this 指向全面解析：深层次理解 JavaScript 中 this 的奥秘

2023-12-25 14:22:43

前言

this 是 JavaScript 中一个非常重要的，它在代码中无处不在。但是，对于许多初学者来说，this 的指向却是一个难以理解的概念。本文将从 this 的基本概念入手，逐步深入分析 this 的指向，帮助你全面掌握 this 的使用。

this 的基本概念

this 是 JavaScript 中一个关键字，它指向当前执行上下文的某个对象。在不同的上下文中，this 的指向也不同。

在一个函数的执行上下文中，this 指向该函数的调用者。
在一个对象的执行上下文中，this 指向该对象本身。
在一个全局执行上下文中，this 指向 window 对象。

this 的指向是如何确定的

this 的指向是在执行上下文的创建过程中，被确定的。也就是说，只有在函数调用时，this 的指向才会被确定。

函数调用时的 this 指向

在函数调用时，this 的指向由以下因素决定：

如果函数是作为某个对象的的方法被调用的，那么 this 指向该对象。
如果函数是作为独立函数被调用的，那么 this 指向 window 对象。
如果函数是作为回调函数被调用的，那么 this 的指向取决于回调函数的调用方式。

对象方法调用时的 this 指向

当一个函数作为某个对象的的方法被调用时，this 指向该对象。这是因为，在对象方法调用时，该对象被隐式地传递给了该方法作为第一个参数。

const person = {
  name: 'John',
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

person.greet(); // Hello, my name is John.

在上面的代码中，当 person.greet() 被调用时，this 指向 person 对象。因此，this.name 等价于 person.name，输出结果为 "Hello, my name is John."。

独立函数调用时的 this 指向

当一个函数作为独立函数被调用时，this 指向 window 对象。这是因为，在独立函数调用时，没有对象被隐式地传递给该函数作为第一个参数。

function greet() {
  console.log(`Hello, my name is ${this.name}.`);
}

greet(); // Hello, my name is undefined.

在上面的代码中，当 greet() 被调用时，this 指向 window 对象。因此，this.name 等价于 window.name，而 window.name 是 undefined，输出结果为 "Hello, my name is undefined."。

回调函数调用时的 this 指向

当一个函数作为回调函数被调用时，this 的指向取决于回调函数的调用方式。

如果回调函数是作为某个对象的的方法被调用的，那么 this 指向该对象。
如果回调函数是作为独立函数被调用的，那么 this 指向 window 对象。
如果回调函数是作为箭头函数被调用的，那么 this 的指向与它的父作用域相同。

const person = {
  name: 'John',
  greet: function() {
    setTimeout(function() {
      console.log(`Hello, my name is ${this.name}.`);
    }, 1000);
  }
};

person.greet(); // Hello, my name is John.

在上面的代码中，当 person.greet() 被调用时，this 指向 person 对象。因此，this.name 等价于 person.name，输出结果为 "Hello, my name is John."。

function greet() {
  setTimeout(function() {
    console.log(`Hello, my name is ${this.name}.`);
  }, 1000);
}

greet(); // Hello, my name is undefined.

const person = {
  name: 'John',
  greet: () => {
    setTimeout(() => {
      console.log(`Hello, my name is ${this.name}.`);
    }, 1000);
  }
};

person.greet(); // Hello, my name is John.

在上面的代码中，当 person.greet() 被调用时，this 指向 person 对象。这是因为，箭头函数没有自己的 this，它继承了父作用域的 this。因此，this.name 等价于 person.name，输出结果为 "Hello, my name is John."。

箭头函数中的 this 指向

箭头函数没有自己的 this，它继承了父作用域的 this。因此，在箭头函数中，this 的指向与它的父作用域相同。

const person = {
  name: 'John',
  greet: () => {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

person.greet(); // Hello, my name is John.

在上面的代码中，当 person.greet() 被调用时，this 指向 person 对象。这是因为，箭头函数 greet() 没有自己的 this，它继承了父作用域 person 的 this。因此，this.name 等价于 person.name，输出结果为 "Hello, my name is John."。

this 指向的常见问题

为什么箭头函数没有自己的 this？

箭头函数没有自己的 this，这是因为箭头函数的目的是为了简化函数的写法。如果箭头函数有自己的 this，那么它的写法就会变得更加复杂。

如何改变 this 的指向？

this 的指向是可以在运行时改变的。最常见的方法是使用 bind()、call() 和 apply() 方法。

bind() 方法可以创建一个新的函数，该函数的 this 指向被固定为指定的对象。
call() 方法可以立即执行一个函数，并将该函数的 this 指向指定的对象。
apply() 方法可以立即执行一个函数，并将该函数的 this 指向指定的对象，同时将参数列表作为第二个参数传递给该函数。

const person = {
  name: 'John'
};

const greet = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

const boundGreet = greet.bind(person);
boundGreet(); // Hello, my name is John.

greet.call(person); // Hello, my name is John.

greet.apply(person); // Hello, my name is John.