函数之变奏曲：深入剖析 call、apply 和 bind 函数

2023-09-28 10:43:57

JavaScript 函数的 this 指向

在 JavaScript 中，函数的 this 指向指向函数被调用的上下文对象。默认情况下，this 指向的是全局对象，也就是 window 对象。但是，我们可以通过使用 call、apply 和 bind 函数来改变 this 指向。

call() 函数

call() 函数的语法如下：

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

thisArg：要将 this 指向的对象。
arg1, arg2, ..., argN：要传递给函数的参数。

call() 函数会将 this 指向设置为 thisArg，然后执行函数。例如，以下代码会将 this 指向设置为对象 obj，然后执行函数 func()：

var obj = {
  name: "John"
};

function func() {
  console.log(this.name);
}

func.call(obj); // 输出：John

apply() 函数

apply() 函数的语法如下：

functionName.apply(thisArg, [args]);

thisArg：要将 this 指向的对象。
args：一个包含要传递给函数的参数的数组。

apply() 函数与 call() 函数非常相似，不同之处在于 apply() 函数接受一个参数数组，而 call() 函数接受一个参数列表。例如，以下代码会将 this 指向设置为对象 obj，然后执行函数 func()：

var obj = {
  name: "John"
};

function func() {
  console.log(this.name);
}

func.apply(obj, ["Mary"]); // 输出：Mary

bind() 函数

bind() 函数的语法如下：

functionName.bind(thisArg, arg1, arg2, ..., argN);

thisArg：要将 this 指向的对象。
arg1, arg2, ..., argN：要传递给函数的参数。

bind() 函数与 call() 函数和 apply() 函数不同，它不会立即执行函数，而是返回一个新的函数，这个新的函数的 this 指向被设置为 thisArg，并且已经绑定了参数 arg1、arg2、...、argN。例如，以下代码会创建一个新的函数 funcBound，这个函数的 this 指向设置为对象 obj，并且已经绑定了参数 "Mary"：

var obj = {
  name: "John"
};

function func() {
  console.log(this.name);
}

var funcBound = func.bind(obj, "Mary");

funcBound(); // 输出：Mary

call()、apply() 和 bind() 函数的比较

特性	call()	apply()	bind()
语法	functionName.call(thisArg, arg1, arg2, ..., argN)	functionName.apply(thisArg, [args])	functionName.bind(thisArg, arg1, arg2, ..., argN)
参数	thisArg, arg1, arg2, ..., argN	thisArg, [args]	thisArg, arg1, arg2, ..., argN
返回值	无	无	一个新的函数
立即执行	是	是	否