变身函数通灵大师，揭秘call、apply、bind三剑客的奇妙世界

2023-03-24 14:01:55

函数调用：JavaScript 编程世界的基本功

在 JavaScript 的世界里，函数调用就像魔杖一样，它让代码动起来。当我们召唤一个函数时，JavaScript 会执行函数体内神奇的代码，根据需要变幻出一个值。调用函数简单得就像挥动魔杖一样，只需要函数名和一些参数就可以了。

例如：

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

console.log(sum(1, 2)); // 输出：3

在这个例子中，我们定义了一个名叫 sum 的函数，它接受两个参数 a 和 b，并返回它们的和。当我们调用 sum(1, 2) 时，JavaScript 就挥舞着它的魔杖，执行 sum 函数体内的代码，将 1 和 2 相加，然后变出结果 3，并把它打印到控制台。

call、apply、bind：函数调用的三位法宝

除了传统的函数调用方式，JavaScript 还提供了 call、apply 和 bind 三个神奇的魔法咒语，它们能让我们以不同的方式召唤函数，实现更加灵活的编程。

Function.prototype.call

call 魔法咒语允许我们指定函数执行时的上下文（this 值）和参数列表，然后立即执行函数。咒语的语法如下：

function.call(thisArg, ...args)

其中：

thisArg：指定函数执行时的上下文（this 值）。
...args：函数的参数列表。

例如：

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

// 使用 call 咒语指定 thisArg 和参数列表
greet.call(null, "John"); // 输出：Hello, John!

在这个例子中，我们使用 call 咒语指定 greet 函数的执行上下文（this 值）为 null，并传递了一个参数 "John"。当我们念出 greet.call(null, "John") 时，JavaScript 会将 greet 函数的 this 值设为 null，并将参数 "John" 传递给 greet 函数，然后立刻执行 greet 函数，并打印出 "Hello, John!"。

Function.prototype.apply

apply 魔法咒语与 call 咒语类似，但它接受一个数组作为参数列表，而不是单独的参数列表。咒语的语法如下：

function.apply(thisArg, argsArray)

其中：

thisArg：指定函数执行时的上下文（this 值）。
argsArray：一个包含函数参数的数组。

例如：

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

// 使用 apply 咒语指定 thisArg 和参数数组
const args = [1, 2];
const result = sum.apply(null, args); // result = 3

在这个例子中，我们使用 apply 咒语指定 sum 函数的执行上下文（this 值）为 null，并传递了一个包含参数 1 和 2 的数组 args。当我们念出 sum.apply(null, args) 时，JavaScript 会将 sum 函数的 this 值设为 null，并将 args 数组中的元素逐一传递给 sum 函数，然后立刻执行 sum 函数，并返回结果 3。

Function.prototype.bind

bind 魔法咒语与 call 和 apply 咒语不同，它不会立即执行函数，而是返回一个新的函数，这个新函数的执行上下文（this 值）和参数列表已经预先绑定好了。咒语的语法如下：

function.bind(thisArg, ...args)

其中：

thisArg：指定函数执行时的上下文（this 值）。
...args：函数的参数列表。

例如：

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

// 使用 bind 咒语指定 thisArg 和参数列表
const greetJohn = greet.bind(null, "John");

// 稍后调用 greetJohn 函数
greetJohn(); // 输出：Hello, John!

在这个例子中，我们使用 bind 咒语指定 greet 函数的执行上下文（this 值）为 null，并传递了一个参数 "John"。当我们念出 greet.bind(null, "John") 时，JavaScript 不会立即执行 greet 函数，而是返回一个新的函数 greetJohn。这个新函数 greetJohn 已经预先绑定好了 this 值和参数列表，当我们稍后调用 greetJohn() 时，JavaScript 会将 greetJohn 函数的 this 值设为 null，并将参数 "John" 传递给 greetJohn 函数，然后立刻执行 greetJohn 函数，并打印出 "Hello, John!"。

call、apply、bind 的妙用

call、apply 和 bind 这三个魔法咒语在 JavaScript 中有着广泛的应用，下面列举一些常见的用法：

改变函数的执行上下文（this 值） ：这三个咒语都可以改变函数的执行上下文（this 值），从而允许我们在不同的对象上调用同一个函数。
柯里化 ：柯里化是指将一个函数的多个参数转换为一系列单参数函数的过程。我们可以使用 bind 咒语来实现柯里化。
偏应用 ：偏应用是指将一个函数的部分参数预先绑定，然后返回一个新的函数，这个新函数接受剩余的参数。我们可以使用 bind 咒语来实现偏应用。
函数组合 ：函数组合是指将多个函数组合在一起，形成一个新的函数。我们可以使用 call、apply 或 bind 咒语来实现函数组合。
高阶函数 ：高阶函数是指接受函数作为参数或返回函数的函数。我们可以使用 call、apply 或 bind 咒语来创建高阶函数。

结语

call、apply 和 bind 是 JavaScript 中的三把利剑，它们允许我们以不同的方式召唤函数，从而实现更灵活的编程。掌握这三个咒语，你就能在 JavaScript 的世界里挥洒自如，写出更加简洁优雅的代码。

常见问题解答

call、apply 和 bind 之间有什么区别？
- call 和 apply 咒语都是立即执行函数，但 call 咒语接受单独的参数列表，而 apply 咒语接受数组形式的参数列表。bind 咒语则返回一个新的函数，这个新函数的执行上下文和参数列表已经预先绑定好了。
什么时候应该使用 call、apply 或 bind？
- 使用 call 或 apply 咒语来立即执行函数，并改变函数的执行上下文。使用 bind 咒语来创建新的函数，这个新函数的执行上下文和参数列表已经预先绑定好了。
柯里化和偏应用有什么区别？
- 柯里化是指将一个函数的多个参数转换为一系列单参数函数的过程。偏应用是指将一个函数的部分参数预先绑定，然后返回一个新的函数，这个新函数接受剩余的参数。
函数组合是什么？
- 函数组合是指将多个函数组合在一起，形成一个新的函数。我们可以使用 call、apply 或 bind 咒语来实现函数组合。
高阶函数是什么？
- 高阶函数是指接受函数作为参数或返回函数的函数。我们可以使用 call、apply 或 bind 咒语来创建高阶函数。