轻松掌握JavaScript中的上下文绑定！

前端

2023-02-07 13:58:28

JavaScript 中的上下文绑定

什么是上下文绑定？

上下文绑定是指一个函数内部的 this 所指向的对象。它决定了函数中的 this 关键字所访问的对象属性和方法。理解上下文绑定可以帮助我们避免常见的错误，并编写出更健壮的代码。

this 指向的规则

在 JavaScript 中，this 指向的规则如下：

在函数体中直接调用函数时：
- 在严格模式下，this 指向 undefined。
- 在非严格模式下，this 指向全局对象（window）。
使用 new 关键字创建对象时： this 指向新创建的对象。
使用箭头函数时： this 指向父作用域中的 this 值。

严格模式下的 this 指向

严格模式下，this 指向的规则更严格。在函数体中直接调用函数时，this 指向 undefined。这有助于避免常见的错误，例如：

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

person.greet(); // Error: Cannot read properties of undefined (reading 'name')

因为 greet() 函数直接在对象 person 中调用，所以 this 指向 undefined。由于 undefined 没有 name 属性，所以会报错。

非严格模式下的 this 指向

非严格模式下，this 指向的规则更宽松。在函数体中直接调用函数时，this 指向全局对象。这允许我们在函数中访问全局对象的方法和属性：

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

window.name = "John";
greet(); // Hello, my name is John.

由于 greet() 函数直接在全局对象 window 中调用，所以 this 指向 window 对象。由于 window 对象有一个 name 属性，所以输出 "Hello, my name is John."。

箭头函数的 this 指向

箭头函数是一种特殊的函数，没有自己的 this 值。它总是继承父作用域中的 this 值：

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

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

由于箭头函数 greet 继承了父作用域（对象 person）中的 this 值，所以 this 指向 person 对象，并且可以访问其 name 属性。

如何显式绑定 this

有时，我们需要显式绑定 this 值。例如，当我们希望函数中的 this 始终指向特定对象时，可以使用 bind() 方法：

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

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

bind() 方法将 greet() 函数与 person 对象绑定，即使 greet() 函数被单独调用，this 也会指向 person 对象。

常见问题解答

为什么在严格模式下 this 指向 undefined？

严格模式旨在减少 JavaScript 中的隐式行为，避免意外的全局作用域污染。因此，在严格模式下，this 指向 undefined，以明确表明函数中没有 this 值。
箭头函数的 this 值总是指向父作用域中的 this 值，这会造成问题吗？

通常情况下，箭头函数的 this 值继承父作用域中的 this 值不会造成问题。然而，在某些情况下，如果父作用域中的 this 值发生变化，可能会导致箭头函数的行为意外。
显式绑定 this 的好处是什么？

显式绑定 this 的好处是它可以防止 this 值意外更改，并确保 this 始终指向预期的对象。
什么时候应该显式绑定 this？

当我们需要确保函数中的 this 值指向特定对象时，或者当箭头函数中的 this 值继承父作用域中的 this 值时，应该显式绑定 this。
显式绑定 this 的不同方法有哪些？

除了使用 bind() 方法，还有其他方法可以显式绑定 this，包括使用 call() 和 apply() 方法。