揭秘 JavaScript 函数的秘密武器：call、apply 和 bind

2023-11-21 18:19:31

简介
在 JavaScript 中，函数是一个功能性的代码块，当它被调用时，将执行其中的代码。函数可以接收参数，并返回一个值。
JavaScript 函数的执行离不开 this，this 指向函数被调用的对象。this 的值可以通过多种方式确定，其中 call、apply 和 bind 是最常用的方法。

call

call() 方法允许我们指定函数的 this 值。
语法：

Function.call(thisArg, arg1, arg2, ...)

其中，

Function 是要调用的函数。
thisArg 是要作为 this 值的对象。
arg1、arg2 等是传递给函数的参数。

例如：

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

greet.call(null, "John"); // Hello, John!
greet.call(window, "Jane"); // Hello, Jane!

apply

apply() 方法与 call() 方法类似，不同之处在于 apply() 方法接受一个数组作为参数，而不是一个参数列表。

语法：

Function.apply(thisArg, argsArray)

其中，

Function 是要调用的函数。
thisArg 是要作为 this 值的对象。
argsArray 是一个包含要传递给函数的参数的数组。

例如：

function sum(a, b) {
  return a + b;
}

console.log(sum.apply(null, [1, 2])); // 3
console.log(sum.apply(window, [3, 4])); // 7

bind

bind() 方法与 call() 和 apply() 方法不同，它不会立即调用函数，而是返回一个新的函数。这个新函数的 this 值被绑定为 bind() 方法的第一个参数。

语法：

Function.bind(thisArg, arg1, arg2, ...)

其中，

Function 是要调用的函数。
thisArg 是要作为 this 值的对象。
arg1、arg2 等是要传递给函数的参数。

例如：

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

let greetJohn = greet.bind(null, "John");
greetJohn(); // Hello, John!

let greetJane = greet.bind(window, "Jane");
greetJane(); // Hello, Jane!