我的JS笔记 -- this


this引用的是函数据以执行的环境对象。虽然函数的作用域是在声明时决定的,但是this实际上是在函数被调用时发生的绑定,它指向什么完全取决于函数在哪里被调用,所以this的指向是可变的。

this是函数的内部属性,所以this的使用环境是在函数中。

this的指向是一个对象。

this绑定规则

判断函数中this绑定的对象规则:

  1. 函数是否在new中调用(new 绑定)?如果是的话this绑定的是新创建的对象;
  2. 函数是否通过call、apply(显式绑定)或者硬绑定调用? 如果是的话,this绑定的是指定的对象;
  3. 函数是否在某个上下文对象中调用(也就是函数作为某个对象的方法调用)(隐式绑定)?如果是的话,this绑定的是那个上下文对象;
  4. 如果都不是的话, 使用默认绑定。如果在严格模式下,就绑定到undefined,否则绑定到全局对象;

从上至下逐条判断,就能正确判断this的指向。

  • new 绑定,构造函数生成实例中调用;

    function F() {
    this.a = 1;
    this.sayA = function () {
    console.log(this.a);
    }
    }
    var f = new F();
    f.sayA(); // 1

  • call、apply调用(显式绑定);

    • call、apply接收两个参数,第一个是参数是对象,函数this就会指向这个对象,如果你传入了一个原始值(字符串类型、布尔类型或者数字类型)来当作 this 的绑定对象,这个原始值会被转换成它的对象形式(也就是 new String(..)、new Boolean(..)或者new Number(..));第二个参数是函数调用的;

        var a = 1;
        var obj = {
            a: 2
        };
        function f() {
            console.log(this.a);
        }
        f(); // 1
        f.call(obj); // 2,硬性将f的this绑定到指定对象
        f.apply(obj); // 2
      
    • bind,bind的作用与call、apply一样,都是为函数指定执行环境对象,但是bind返回的是一个新函数,而call和apply会直接执行返回结果;

        var a = 1;
        var obj = {
            a: 2
        };
        function f() {
            console.log(this.a);
        }
        f(); // 1
        var f2 = f.bind(obj); // 返回的是一个新函数,所以可以将函数保存至变量,方便以后调用
        f2(); // 2
      
    • 如果你把null或者undefined作为 this 的绑定对象传入call、apply或者bind,这些值在调用时会被忽略,实际应用的是默认绑定规则;

  • 作为对象方法调用(隐式绑定);

      var a = 1;
      function f() {
          console.log(this.a);
      }
      var obj = {
          a: 2,
          f: f // 将对象的方法指向函数
      };
      obj.f(); // 2,当函数作为对象方法时,this就指向当前对象
    
      var f2 = obj.f;
      f2(); //1,相当于直接调用f,所以this指向全局对象
    
      var obj2 = {
          a: 3,
          f: obj.f
      };
      obj2.f(); // 3,作为对象方法调用
    
  • 默认函数调用,函数独立调用;

      var a = 1; // 全局变量会成为全局对象的属性,所以当this指向全局对象时能够访问
      function f() {
          console.log(this.a);
      }
      f(); // 1,普通的函数调用,this指向全局对象
    

更多文章在 这里 ,觉得不错希望点个 star

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 官方中文版原文链接 感谢社区中各位的大力支持,译者再次奉上一点点福利:阿里云产品券,享受所有官网优惠,并抽取幸运大...
    HetfieldJoe阅读 6,932评论 15 54
  • 参考链接 this 关键字 深入理解上下文this 慕课视频 基本含义 以上示例中实际都是执行的showName方...
    day_day_up阅读 832评论 2 3
  • Q&A: 1. apply、call 有什么作用,什么区别? apply: 定义:fun.apply(thisAr...
    进击的阿群阅读 379评论 0 0
  • 转换为call/apply来看待this的值 彻底搞懂this 阮一峰-this原理 this 由于运行期绑定的特...
    DeeJay_Y阅读 764评论 0 0
  • 与其他语言相比,函数的this关键字在JavaScript中的表现略有不同,此外,在严格模式和非严格模式之间也会有...
    codingC阅读 586评论 0 0