2500.jpg

在 JavaScript 中， this 的指向问题常让人一头雾水，以至于有些人无论什么场景下都直接将 this 绑定到一个变量，后面只使用变量，这就有些因噎废食了。接下来让我们一起揭秘 this “魔法”。

this 是什么

this 是一个特殊的对象。this 提供了一种更优雅的方式来隐式“传递”一个对象引用。

如何判断 this 的指向

2502.png

当一个函数被调用时，JS 引擎会创建一个活动记录(也称为执行上下文)。这个记录会包含函数在哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this 是记录中的一个属性，在函数被调用时才会完成 this 的绑定，所以它指向什么完全取决于函数在哪里被调用。并且，调用函数的方式决定着 this 的绑定规则，不同的绑定规则的优先级也是不一致的，优先级顺序如下：

1. new 绑定：使用 new 调用函数。此时 this 绑定的是新创建的对象（参见下方使用 new 调用函数时，发生了什么）。

   function foo(something) {
     this.a = something;
   }
   
   var obj1 = {};
   var bar = foo.bind(obj1);
   bar(2);
   console.log(obj1.a); // 2
   
   var baz = new bar(3);
   console.log(obj1.a); // 2
   console.log(baz.a); // 3
   

2. 显式绑定：通过 call、apply、bind 方法调用函数。此时 this 绑定的是 call、apply、bind 方法中指定的对象。

   function foo() {
     console.log(this.a);
   }
   
   var obj1 = {
     a: 2,
     foo: foo,
   };
   var obj2 = {
     a: 3,
     foo: foo,
   };
   obj1.foo(); // 2
   obj2.foo(); // 3
   obj1.foo.call(obj2); // 3
   obj2.foo.call(obj1); // 2
   

3. 隐式绑定: 在某个上下文对象中调用函数。此时 this 绑定的是这个上下文对象。

   function foo() {
     console.log(this.a);
   }
   
   var obj = { a: 2, foo: foo };
   obj.foo(); // 2
   

4. 默认绑定: 如果不是以上三种的话，使用默认绑定。如果在严格模式下，就绑定到 undefined，否则绑定到运行环境所提供的全局对象。

   function foo() {
     console.log(this.a);
   }
   
   var a = 2;
   foo(); // 2
   

例外情况

• 箭头函数：箭头函数中的 this 并不会使用以上四条标准的绑定规则，而是根据当前的词法作用域来决定，具体来说，箭头函数会继承外层第一个非箭头函数的 this 绑定。

• 匿名函数：匿名函数没有调用者，一般都是在全局环境下调用，使用默认绑定规则。

  var a = 1;
  var obj = {
    a: 2,
    foo() {
      var a = 3;
      console.log(this.a);
  
      var bar = function () {
        console.log(this.a);
      };
      bar();
    },
  };
  
  obj.foo(); // 2 1
  

• 如果你把 null 或者 undefined 作为 this 的绑定对象传入 call、apply、 bind 方法，这些值在调用时会被忽略，实际应用的是默认绑定规则。

关联知识

使用 new 调用函数时，发生了什么

使用 new 来调用函数，或者说发生构造函数调用时，会自动执行下面的操作。

1. 创建(或者说构造)一个全新的对象
2. 为步骤 1 新创建的对象添加属性 __proto__，将该属性指向构造函数的原型对象
3. 将构造函数中调用的 this 绑定到这个新对象
4. 如果构造函数没有主动返回对象，则返回 这个新对象