CALL/APPLY/BIND 剖析 JavaScript 函数的this指向

探索 JavaScript 中的神奇三剑客：call()、apply() 和 bind()

在 JavaScript 的函数调用世界中，this 扮演着至关重要的角色，它指向当前函数执行的环境对象，即函数所属的对象。然而，有时候我们希望函数的 this 指向指定的对象，而不是默认的执行环境对象。这就是 call(), apply() 和 bind() 方法闪亮登场的时候了。它们是改变函数 this 指向的强大工具，在 JavaScript 中有着广泛的应用。

call() 方法

call() 方法允许我们显式地设置函数的 this 值。它就像一个魔法棒，可以将函数的 this 指向变成我们想要的对象。其语法格式如下：

functionName.call(thisArg, arg1, arg2, ...);

其中：

• functionName：要调用的函数。
• thisArg：指定函数的 this 值。
• arg1, arg2, ...：传递给函数的参数。

举个例子：

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

// 使用 call() 方法改变 this 指向
person.greet.call({ name: 'Jane' }, 'Hello'); // 输出：Hello, Jane!

在上面的示例中，我们使用 call() 方法将 person.greet 函数的 this 指向从默认的 person 对象更改为 { name: 'Jane' } 对象。因此，函数内部的 this.name 将被解析为 "Jane"，而不是 "John"。

apply() 方法

apply() 方法与 call() 方法类似，但它接受一个数组作为参数，而不是一组单独的参数。其语法格式如下：

functionName.apply(thisArg, [arg1, arg2, ...]);

其中：

• functionName：要调用的函数。
• thisArg：指定函数的 this 值。
• [arg1, arg2, ...]：传递给函数的参数数组。

举个例子：

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

// 使用 apply() 方法改变 this 指向
const args = ['Hello', 'Jane'];
person.greet.apply({ name: 'Jane' }, args); // 输出：Hello, Jane!

与 call() 方法不同，apply() 方法将参数数组中的元素逐个传递给函数，而 call() 方法则需要我们一一列出参数。

bind() 方法

bind() 方法是一个更强大的工具，它可以创建一个新的函数，该函数的 this 值永久绑定到指定的值。其语法格式如下：

functionName.bind(thisArg);

其中：

• functionName：要绑定的函数。
• thisArg：指定绑定的 this 值。

举个例子：

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

// 使用 bind() 方法绑定 this 指向
const greetJane = person.greet.bind({ name: 'Jane' });

// 调用 greetJane 函数，this 指向已绑定为 { name: 'Jane' }
greetJane('Hello'); // 输出：Hello, Jane!

在上面的示例中，我们使用 bind() 方法将 person.greet 函数的 this 指向永久绑定到 { name: 'Jane' } 对象。因此，无论 greetJane 函数在何处调用，它的 this 值始终为 { name: 'Jane' }。

比较

为了帮助你更好地理解这三个方法，我们总结了它们的差异：

方法	参数	返回值
call()	thisArg, arg1, arg2, ...	无
apply()	thisArg, [arg1, arg2, ...]	无
bind()	thisArg	新函数

结论

call(), apply() 和 bind() 方法是改变函数 this 指向的强大工具。它们在 JavaScript 中有着广泛的应用，例如对象方法的借用、构造函数的调用、事件处理程序的绑定等等。通过灵活运用这些方法，你可以实现更灵活的函数调用，编写出更优雅的代码。

常见问题解答

1. 这三个方法有什么区别？
   • call() 和 apply() 方法允许一次性改变函数的 this 指向，而 bind() 方法创建了一个新的函数，该函数的 this 值永久绑定到指定的值。
2. 我什么时候应该使用 call() 方法？
   • 当你想将函数的 this 指向显式地设置为特定对象时，可以使用 call() 方法。
3. 我什么时候应该使用 apply() 方法？
   • 当你想将函数的参数作为数组传递时，可以使用 apply() 方法。
4. 我什么时候应该使用 bind() 方法？
   • 当你想创建一个新的函数，该函数的 this 值永久绑定到指定的值时，可以使用 bind() 方法。
5. 这三个方法的返回值是什么？
   • call() 和 apply() 方法没有返回值，而 bind() 方法返回一个新的函数。