在 JavaScript 中，apply() 是一种调用函数的方法，它允许您在特定上下文中执行函数。当您想要使用不同的对象来设置函数的 this 值时，这非常有用。
但是，有时我们可能希望在不更改上下文的情况下调用一个函数的 apply() 方法。这篇文章将介绍这个问题并给出解决方案。
问题
考虑以下示例代码：
const obj1 = { name: 'Alice' };
function greet(greeting) {
console.log(`${greeting}, ${this.name}!`);
}
greet.apply(obj1, ['Hello']);在这个例子中，我们定义了一个名为 greet 的函数，并使用 apply() 方法调用该函数，并将 obj1 对象作为 this 值传递给 greet 函数。这意味着 greet 函数内的 this 值将指向 obj1 对象。
现在，假设我们想要在不更改上下文的情况下调用 greet 函数。这似乎是一个棘手的问题，因为 apply() 方法会改变函数的上下文。那么有没有办法可以绕过这个限制？
解决方案
在 JavaScript 中，函数也是对象。因此，我们可以通过引用函数自身来调用它，而不是使用 apply() 方法。这可以通过以下两种方式之一实现：
1. 使用函数引用
我们可以使用函数的引用来调用它，而不是使用 apply() 方法。这可以通过以下代码实现：
const obj1 = { name: 'Alice' };
function greet(greeting) {
console.log(`${greeting}, ${this.name}!`);
}
const greetRef = greet.bind(obj1);
greetRef('Hello');在这个例子中，我们使用了 bind() 方法来创建一个新的函数 greetRef，该函数将 greet 函数绑定到 obj1 对象上。这样，我们就可以在不更改上下文的情况下调用 greet 函数。
2. 使用箭头函数
另一种方法是使用箭头函数。箭头函数没有自己的 this 值，而是从包含它们的作用域中继承 this 值。因此，我们可以使用箭头函数来调用函数，并将上下文传递给它。
const obj1 = { name: 'Alice' };
const greet = (greeting) => {
console.log(`${greeting}, ${this.name}!`);
};
greet.call(obj1, 'Hello');在这个例子中，我们定义了一个箭头函数 greet，它接受一个参数 greeting，并在控制台上打印出问候语。我们还将 obj1 作为参数传递给 call() 方法，以确保 greet 函数以 obj1 作为上下文执行。
指导意义
理解如何在不更改上下文的情况下调用函数的 apply() 方法对于编写高质量的 JavaScript 代码非常重要。在某些情况下，使用函数引用或箭头函数可以提供更清晰和简洁的代码，并避免可能出现的错误。
当您需要在多个不同的对象上调用同一个函数时尤其如此，您可以使用 bind 方法来创建多个函数引用，每一个都关联到不同的对象。这确保了您的代码具有可复用性和可扩展性。
最后，请记住，在编写代码时始终关注上下文的变化是很重要的，因为它可能会导致意外的行为和错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30831