js apply、call、bind 各自的特点与用法

2023-09-10 14:43:24

在JavaScript中，apply、call、bind都是操作函数this指向的内置方法，它们都能够改变函数的this指向，使得函数的执行上下文发生变化。

apply方法

apply方法的语法格式如下：

functionName.apply(thisArg, argArray);

functionName: 要调用的函数。
thisArg: 指定函数的this指向。
argArray: 调用函数时传入的参数，是一个数组。

apply方法的执行过程如下：

将thisArg作为函数的this指向。
将argArray中的元素依次作为函数的参数。
执行函数。

例如，以下代码演示了如何使用apply方法来改变函数的this指向：

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

const person = {
  name: 'John Doe',
};

greet.apply(person); // 输出: John Doe

call方法

call方法的语法格式如下：

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

functionName: 要调用的函数。
thisArg: 指定函数的this指向。
arg1, arg2, ..., argN: 调用函数时传入的参数，可以是任意数量。

call方法的执行过程如下：

将thisArg作为函数的this指向。
将arg1、arg2、...、argN依次作为函数的参数。
执行函数。

例如，以下代码演示了如何使用call方法来改变函数的this指向：

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

const person = {
  name: 'John Doe',
};

greet.call(person); // 输出: John Doe

bind方法

bind方法的语法格式如下：

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

functionName: 要调用的函数。
thisArg: 指定函数的this指向。
arg1, arg2, ..., argN: 调用函数时传入的参数，可以是任意数量。

bind方法的执行过程如下：

返回一个新的函数，该函数的this指向固定为thisArg。
如果bind方法中提供了参数，则这些参数将作为新函数的参数的前面几项。
当新函数被调用时，任何传入的参数将作为新函数参数的后面几项。

例如，以下代码演示了如何使用bind方法来改变函数的this指向：

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

const person = {
  name: 'John Doe',
};

const boundGreet = greet.bind(person);

boundGreet(); // 输出: John Doe

apply、call、bind的区别

apply、call、bind这三个方法都是用来改变函数的this指向的，但它们之间还是有一些区别的：

参数传递方式不同 ：apply方法的第二个参数是一个数组，而call方法的第二个参数及以后的参数都是一个个的参数。
返回结果不同 ：apply方法和call方法都直接执行函数并返回执行结果，而bind方法返回的是一个新的函数，该函数的this指向固定为bind方法中指定的thisArg。