11.30学习笔记

作用域和闭包

1. this的不同应用场景，如何取值？

   1. 作为普通函数调用

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FE2gKReS-1606807690168)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201130102348188.png)]

   2. call、apply、bind函数的调用，bind会返回新的函数去调用执行

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UO0IXSx8-1606807690170)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201130102416882.png)]

   3. 作为对象方法被调用

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y1oaj2As-1606807690172)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201130102506989.png)]

   4. 在class方法中调用

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vr7EGCj5-1606807690174)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201130102758267.png)]

   5. 箭头函数

      setTimeout的箭头函数this取值是根据其上级函数来取的，与上级作用域的值一样

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7x9uEDBY-1606807690176)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201130102613685.png)]

   6. this的取值是在函数执行时定义的

2. 手写bind函数

   // 模拟bind函数
   Function.prototype.bind1 = function () {
       // 将参数拆解为数组，可将列表变为数组
       // arguments可以获取一个函数的所有参数
       const args = Array.prototype.slice.call(arguments);
       // 获取this（数组第一项—）
       const t = args.shift();
       // fn1.bind(...)中的fn1
       const self = this;
   
       // 返回一个函数
       return function () {
           return self.apply(t, args);
       }
   }
   
   function fn(a, b) {
       console.log('this', this);
       console.log(a, b);
       return "this is fn";
   }
   
   var fn2 = fn.bind1({x: 100}, 10, 20);
   var res = fn2();
   console.log(res);
   

3. 实际开发环境中闭包的使用，举例

   1. 函数作为返回值

   2. 函数作为参数被传递

   3. 自由变量的查找，是在函数定义的地方查找，向上级作用域查找，不是函数执行的地方

      function print(fn) {
      	const a = 200;
      	fn();
      }
      const a = 100;
      function fn() {
      	console.log(a);
      }
      print(fn)  //100
      

4. 作用域实例

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p4OnG7xT-1606807690178)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201130100112543.png)]

5. 块级作用域

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HQyy0Bhn-1606807690179)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201130100251713.png)]

6. checkValidity()：如果input输入有效，则返回true；输入无效可以调用obj.validationMessage()方法查看输入无效时浏览器的信息。

7. JavaScript的delete关键词会删除属性的值及其本身。delete person.age

8. getter和setter的使用

   getter：

   // 创建对象：
   var person = {
     firstName: "Bill",
     lastName : "Gates",
     language : "en",
     get lang() {
       return this.language.toUpperCase();
     }
   };
   
   // 使用 getter 来显示来自对象的数据：
   document.getElementById("demo").innerHTML = person.lang;
   

   setter：

   var person = {
     firstName: "Bill",
     lastName : "Gates",
     language : "",
     set lang(lang) {
       this.language = lang.toUpperCase();
     }
   };
   
   // 使用 setter 来设置对象属性：
   person.lang = "en";
   
   // 显示来自对象的数据：
   document.getElementById("demo").innerHTML = person.language;
   

9. 为什么使用 Getter 和 Setter？

   • 它提供了更简洁的语法
   • 它允许属性和方法的语法相同
   • 它可以确保更好的数据质量
   • 有利于后台工作

10. Object.defineProperty()：方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

    Object.defineProperty(obj, "reset", { //obj为对象，reset为对象方法
      get : function () {this.counter = 0;}//对象方法的具体实现
    });
    

11. 对象构造器

    function Person(first, last, age, eye) { //对象构造器使用大写首字母命名
        this.firstName = first;
        this.lastName = last;
        this.age = age;
        this.eyeColor = eye;
    }
    

    向构造器添加新属性时，不能直接添加，必须添加到构造器函数内部。

    Person.prototype.nationality = "English"; //使用原型可以直接添加新属性或新方法

12. 内建javascript构造器

    var x1 = new Object();    // 一个新的 Object 对象
    var x2 = new String();    // 一个新的 String 对象
    var x3 = new Number();    // 一个新的 Number 对象
    var x4 = new Boolean();   // 一个新的 Boolean 对象
    var x5 = new Array();     // 一个新的 Array 对象
    var x6 = new RegExp();    // 一个新的 RegExp 对象
    var x7 = new Function();  // 一个新的 Function 对象
    var x8 = new Date();      // 一个新的 Date 对象
    

    Math() 对象不再此列。Math 是全局对象。new 关键词不可用于 Math。

    var x1 = {};            // 新对象
    var x2 = "";            // 新的原始字符串
    var x3 = 0;             // 新的原始数值
    var x4 = false;         // 新的原始逻辑值
    var x5 = [];            // 新的数组对象
    var x6 = /()/           // 新的正则表达式对象
    var x7 = function(){};  // 新的函数对象
    

13. ES5的新的对象方法

    // 添加或更改对象属性
    Object.defineProperty(object, property, descriptor)
    
    // 添加或更改多个对象属性
    Object.defineProperties(object, descriptors)
    
    // 访问属性
    Object.getOwnPropertyDescriptor(object, property)
    
    // 以数组返回所有属性
    Object.getOwnPropertyNames(object)
    
    // 以数组返回所有可枚举的属性
    Object.keys(object)
    
    // 访问原型
    Object.getPrototypeOf(object)
    
    // 阻止向对象添加属性
    Object.preventExtensions(object)
    
    // 如果可将属性添加到对象，则返回 true
    Object.isExtensible(object)
    
    // 防止更改对象属性（而不是值）
    Object.seal(object)
    
    // 如果对象被密封，则返回 true
    Object.isSealed(object)
    
    // 防止对对象进行任何更改
    Object.freeze(object)
    
    // 如果对象被冻结，则返回 true
    Object.isFrozen(object)
    

14. 更改元数据

    writable : true      // 属性值可修改
    enumerable : true    // 属性可枚举
    configurable : true  // 属性可重新配置
    writable : false     // 属性值不可修改
    enumerable : false   // 属性不可枚举
    configurable : false // 属性不可重新配置