JavaScript 中的 this：一劳永逸地了解 this 的工作原理

前端

2023-11-19 13:24:51

this 是什么？

在 JavaScript 中，this 是一个变量，它始终指向正在执行代码的对象。这对于理解 JavaScript 中的对象和方法是如何工作的非常重要。

this 的值

this 的值取决于它所在的位置。在以下情况下，this 的值是：

在一个对象的方法中，this 的值是该对象。
在一个函数中，this 的值是全局对象。
在一个构造函数中，this 的值是正在创建的新对象。
在一个事件处理程序中，this 的值是触发事件的元素。

绑定 this

有时候，我们需要在函数中使用 this，但是 this 的值并不是我们想要的。我们可以使用 bind() 方法来绑定 this 的值。

例如，以下代码将 this 的值绑定为 person 对象：

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

const sayHello = person.sayHello.bind(person);

sayHello(); // Hello, my name is John.

箭头函数

箭头函数是另一种控制 this 值的方法。箭头函数没有自己的 this 值，它会继承父函数的 this 值。

例如，以下代码中的箭头函数继承了 person 对象的 this 值：

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

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