图解 JavaScript 中的 this 指向：简单易懂，再无困惑！

2023-11-27 05:49:14

JavaScript 中的 this 指向一直是一个让许多开发者头疼的问题。this 指向会随着函数的调用方式和上下文而变化，这使得理解和使用起来变得复杂。

为了让大家轻松理解 this 指向，我们准备了两张图，以直观的方式解释 this 在不同情况下的指向。

第一张图：函数调用方式对 this 指向的影响

// 全局调用
function globalFunc() {
  console.log(this); // 指向 window 对象
}

// 对象方法调用
const obj = {
  name: 'obj',
  objFunc() {
    console.log(this); // 指向 obj 对象
  }
};

// 构造函数调用
function Person(name) {
  this.name = name;
  this.personFunc = function() {
    console.log(this); // 指向 Person 实例
  };
}

// 箭头函数调用
const arrowFunc = () => {
  console.log(this); // 指向 window 对象
};

在第一张图中，我们展示了四种常见的函数调用方式，并说明了每种调用方式下 this 指向的对象。

全局调用： 当函数以全局方式调用时，this 指向 window 对象。
对象方法调用： 当函数作为对象的方法调用时，this 指向该对象本身。
构造函数调用： 当函数作为构造函数调用时，this 指向新创建的对象实例。
箭头函数调用： 箭头函数没有自己的 this 指向，它总是继承外层函数的 this 指向。

第二张图：上下文对 this 指向的影响

// 嵌套函数调用
function outerFunc() {
  const innerFunc = function() {
    console.log(this); // 指向 window 对象
  };
  innerFunc();
}

// bind() 方法改变 this 指向
const obj = {
  name: 'obj'
};
const boundFunc = function() {
  console.log(this); // 指向 obj 对象
}.bind(obj);
boundFunc();

// call() 和 apply() 方法改变 this 指向
function func() {
  console.log(this); // 指向 obj 对象
}
func.call(obj);
func.apply(obj);