JavaScript 中的 this

一、this 对象的定义

• this 是 JavaScript 中的一个关键字，其值在函数调用时确定。

• 在大多数情况下，this 的值由函数的调用方式决定。

• this 是函数执行时自动生成的内部对象，只能在函数内部使用，指向调用它的对象。

二、this 的绑定规则

• 默认绑定：在全局环境中定义的函数中使用 this，通常指向全局对象（非严格模式下）。

• var name = 'Jenny';
  function person() {
      return this.name;
  }
  console.log(person());  // Jenny
  
  

• 隐式绑定：函数作为某个对象的方法被调用时，this 指向该对象。

• function test() {
      console.log(this.x);
  }
  var obj = { x: 1, m: test };
  obj.m(); // 1
  
  

• new 绑定：使用 new 关键字创建实例时，this 指向新创建的实例对象。

• function test() {
      this.x = 1;
  }
  var obj = new test();
  obj.x // 1
  
  

• 显示绑定：使用 apply()、call()、bind() 方法显式改变函数的调用对象，this 指向第一个参数。

三、箭头函数中的 this

• 箭头函数在定义时就绑定了 this 的值，通常指向定义时的上下文。

• const obj = {
      sayThis: () => {
          console.log(this);
      }
  };
  obj.sayThis(); // window
  
  

• 箭头函数的 this 不能作为构造函数使用，且在事件监听和原型方法中可能不按预期工作。

四、this 绑定的优先级

• 隐式绑定 vs 显式绑定：显式绑定优先级更高。

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

• new 绑定 vs 隐式绑定：new 绑定优先级更高。

• function foo(something) {
      this.a = something;
  }
  var obj1 = { foo: foo };
  var obj2 = {};
  obj1.foo(2);
  console.log(obj1.a); // 2
  new obj1.foo(4);
  console.log(obj1.a); // 2
  
  

• new 绑定 vs 显式绑定：new 绑定优先级最高。

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

总结

• this 的值取决于函数的调用方式。

• 默认绑定指向全局对象（非严格模式）。

• 隐式绑定指向函数调用的上下文对象。

• new 绑定创建一个新实例，this 指向该实例。

• 显式绑定通过 apply()、call()、bind() 方法改变 this 的指向。

• 箭头函数在定义时绑定 this，不适用于构造函数。

• this 绑定优先级：new 绑定 > 显式绑定 > 隐式绑定 > 默认绑定。