手把手教您轻松搞定apply和bind

2023-12-18 00:03:35

apply() 和 bind()：JavaScript 中处理函数调用的利器

在 JavaScript 中，函数调用是程序执行的关键。apply() 和 bind() 两个函数可以显著简化函数调用和对象方法的处理，让开发者轻松掌控 this 绑定、函数柯里化和高阶函数等重要概念。

apply() 函数 的作用是将一个函数应用到一个对象上，并将该对象作为函数的 this 值。其语法如下：

Function.prototype.apply(thisArg, argArray)

其中：

举个例子，假设我们有一个函数 func，它接收两个参数，一个是数字，一个是字符串：

function func(num, str) {
  console.log(num + str);
}

如果我们想将 func 应用到对象 obj 上，并使用 obj 作为 func 的 this 值，我们可以使用 apply() 函数：

const obj = {
  name: '张三'
};

func.apply(obj, [1, '你好']); // 输出：1你好

通过 apply() 函数，我们轻松地将函数应用到不同对象上，而无需修改函数本身。

bind() 函数 的作用是创建一个新的函数，该函数的 this 值被固定为 bind() 函数调用的第一个参数。其语法如下：

Function.prototype.bind(thisArg, ...args)

其中：

bind() 函数返回一个新的函数，其 this 值被固定为 thisArg，并且可以像普通函数一样调用。例如，对于前面提到的 func 函数，我们可以使用 bind() 创建一个新函数，并将 this 值固定为对象 obj：

const obj = {
  name: '张三'
};

const boundFunc = func.bind(obj);

boundFunc(1, '你好'); // 输出：1你好

通过 bind() 函数，我们方便地创建新函数，其 this 值固定为指定对象，并可以像普通函数一样调用。

apply() 和 bind() 都是处理函数调用的重要函数，但它们也有以下区别：

apply() 函数将函数应用到一个对象上，作为函数的 this 值；bind() 函数创建一个新函数，其 this 值固定为 bind() 函数调用的第一个参数。
apply() 函数需要将函数参数放在数组中传递；bind() 函数可以将函数参数直接传递。
apply() 函数只能调用一次；bind() 函数可以多次调用。