关于call、apply和bind的方法

2023-11-30 12:34:34

call、apply和bind方法的概述

在JavaScript中，call、apply和bind方法都是用来改变函数的this的指向的。这三个方法都有一个共同的第一个参数，即用来改变this指向的对象。不同的是，apply的第二个参数接受的是一个数组，而call和bind接受的则是连续的参数。

call方法

call方法的语法如下：

Function.call(thisArg, arg1, arg2, ...)

其中，

Function：要调用的函数。
thisArg：用来改变this指向的对象。
arg1, arg2, ...：要传递给函数的参数。

call方法的用法如下：

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

const person = {
  name: 'John'
};

greet.call(person, 'John'); // Hello, John!

在上面的示例中，greet函数被调用了两次。第一次，this指向greet函数本身，所以console.log()输出的是Hello, undefined!。第二次，greet函数被调用时，this指向person对象，所以console.log()输出的是Hello, John!。

apply方法

apply方法的语法如下：

Function.apply(thisArg, argsArray)

其中，

Function：要调用的函数。
thisArg：用来改变this指向的对象。
argsArray：一个包含要传递给函数的参数的数组。

apply方法的用法如下：

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

const person = {
  name: 'John'
};

const args = ['John'];

greet.apply(person, args); // Hello, John!

bind方法

bind方法的语法如下：

Function.bind(thisArg, arg1, arg2, ...)

其中，

Function：要调用的函数。
thisArg：用来改变this指向的对象。
arg1, arg2, ...：要传递给函数的参数。

bind方法的用法如下：

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

const person = {
  name: 'John'
};

const boundGreet = greet.bind(person);

boundGreet(); // Hello, John!

call、apply和bind方法的比较

下表比较了call、apply和bind方法的异同：

特性	call	apply	bind
语法	Function.call(thisArg, arg1, arg2, ...)	Function.apply(thisArg, argsArray)	Function.bind(thisArg, arg1, arg2, ...)
第二个参数	连续的参数	数组	连续的参数
返回值	无	无	一个新的函数