揭秘 this、apply、call、bind，轻松理解函数调用背后的奥秘

JavaScript 中的 this 与调用方法

在 JavaScript 中，this 关键字是一个特殊的变量，用于指向当前函数的调用上下文。理解 this 关键字对于编写健壮、可维护的 JavaScript 代码至关重要。

this 的指向

this 关键字的指向取决于函数的调用方式：

• 作为对象的方法调用： 当一个函数作为对象的方法被调用时，this 指向该对象。这允许函数访问对象属性和方法。
• 独立于对象调用： 当一个函数独立于对象被调用时，this 指向全局对象（在浏览器中通常是 window 对象）。

例如：

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

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

在第一个例子中，greet 函数作为 person 对象的方法被调用，因此 this 指向 person 对象。在第二个例子中，greet 函数独立于对象被调用，因此 this 指向全局对象，this.name 的值为 undefined。

apply(), call() 和 bind()

apply(), call() 和 bind() 都是 JavaScript 中的函数调用方法，允许我们改变函数的调用上下文，从而控制 this 关键字的指向。

• apply(): 将函数作为第一个参数，并将函数的参数作为数组作为第二个参数。this 指向数组中的第一个元素。
• call(): 与 apply() 类似，但它将函数的参数作为单独的参数传递。this 指向第一个参数。
• bind(): 将函数作为第一个参数，并返回一个新的函数，该函数的调用上下文被绑定到 bind() 方法的第一个参数。

例如：

const person = {
  name: 'John'
};

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

greet.apply(person, ['Mary']); // 输出：Hello, my name is Mary.
greet.call(person, 'Mary'); // 输出：Hello, my name is Mary.
const boundGreet = greet.bind(person);
boundGreet(); // 输出：Hello, my name is John.

在这些例子中，我们使用 apply(), call() 和 bind() 来改变 greet 函数的调用上下文，从而控制 this 关键字的指向。

总结

this 关键字和 apply(), call() 和 bind() 方法是 JavaScript 中控制函数调用上下文的强大工具。通过理解它们的用法和区别，我们可以更灵活地使用函数，并编写出更加健壮和可维护的代码。

常见问题解答

• this 关键字总是指向全局对象吗？
  不，this 关键字的指向取决于函数的调用上下文。

• 什么时候应该使用 apply(), call() 和 bind()？
  当我们需要改变函数的调用上下文时。例如，将对象的方法绑定到另一个对象或创建一个不会立即调用的新函数。

• bind() 方法和 call() 方法有什么区别？
  bind() 方法返回一个新的函数，其调用上下文被绑定到 bind() 方法的第一个参数，而 call() 方法立即调用函数。

• 如何检查 this 关键字的指向？
  可以使用 console.log(this) 来检查 this 关键字的指向。

• this 关键字在箭头函数中如何工作？
  在箭头函数中，this 关键字指向创建箭头函数时的调用上下文。