函数的 apply、call 与 bind 的本质与选择

2023-10-23 08:38:39

比较

特征	apply	call	bind
立即调用	是	是	否
参数	作为数组	作为单独参数	作为第一个参数
返回值	函数调用结果	函数调用结果	返回一个新函数
用法	func.apply(this, [args])	func.call(this, arg1, arg2, ...)	func.bind(this, arg1, arg2, ...)

何时使用

apply

当需要将数组作为函数的参数传递时。
当需要动态地调用函数时。
当需要在不同的对象上调用函数时。

call

当需要将参数逐个传递给函数时。
当需要在不同的对象上调用函数时。
当需要在函数内部访问调用它的对象时。

bind

当需要创建偏函数时。
当需要在不同的对象上调用函数时。
当需要在函数内部访问调用它的对象时。

偏函数

偏函数是一种只接收一部分参数的函数，当调用它时，它将返回一个新的函数，该函数接收剩余的参数并返回原始函数的返回值。bind() 方法可用于创建偏函数。

例如，以下代码创建一个偏函数，该函数接收一个参数并返回该参数的平方：

const square = function(x) {
  return x * x;
};

const squareOf2 = square.bind(null, 2);

console.log(squareOf2()); // 4

柯里化

柯里化是一种将函数转换为偏函数的过程。柯里化函数可以作为参数传递给其他函数，从而提高代码的灵活性。

例如，以下代码创建一个柯里化函数，该函数接收两个参数并返回它们的和：

const add = function(x, y) {
  return x + y;
};

const add10 = add.bind(null, 10);

console.log(add10(5)); // 15

高阶函数

高阶函数是指可以接收函数作为参数或返回函数作为结果的函数。apply、call 和 bind 都可以用于创建高阶函数。

例如，以下代码创建一个高阶函数，该函数接收一个函数作为参数并返回该函数的柯里化版本：

const curry = function(func) {
  return function(...args) {
    return func.bind(null, ...args);
  };
};

const addCurried = curry(add);

console.log(addCurried(10)(5)); // 15

总结

apply、call 和 bind 是 JavaScript 中强大的工具，可用于调用函数。它们允许我们轻松地以不同的对象或参数调用函数，从而简化代码并提高灵活性。

特征	apply	call	bind
立即调用	是	是	否
参数	作为数组	作为单独参数	作为第一个参数
返回值	函数调用结果	函数调用结果	返回一个新函数
用法	func.apply(this, [args])	func.call(this, arg1, arg2, ...)	func.bind(this, arg1, arg2, ...)