JS中的call、apply和bind详解|极客笔记

JS中的call、apply和bind详解

1. 概述

在JavaScript中，call、apply和bind是三个常用的函数方法。它们有着相似的作用，都可以用于改变函数执行时的上下文（即函数内部的this指向）及参数传递，但又有一些细微的差别。本文将详细介绍这三个方法的使用方法、区别及适用场景。

2. call方法

2.1 语法

call方法是函数对象的一个原型方法，其语法如下：

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

其中，fun表示需要调用的函数对象，thisArg表示在调用函数时要使用的this值（即函数内部的this指向），arg1, arg2, ...表示传递给函数的参数列表。

2.2 示例

下面通过一个简单的示例来说明call方法的使用：

// 定义一个person对象
var person = {
  name: 'Alice',
  greet: function(message) {
    console.log(message + ', ' + this.name);
  }
};

// 定义另一个对象
var anotherPerson = {
  name: 'Bob'
};

// 使用call方法调用person对象的greet方法，将this指向anotherPerson
person.greet.call(anotherPerson, 'Hello');

运行结果：

Hello, Bob

在上面的示例中，我们定义了一个person对象，并在其中定义了一个greet方法，该方法接受一个message参数并输出带有message和name的字符串。然后我们定义了另一个anotherPerson对象，并使用call方法来调用person对象的greet方法，将this指向anotherPerson，传入'Hello'作为message参数。结果会输出Hello, Bob，即call方法成功改变了函数执行时的上下文。

3. apply方法

3.1 语法

apply方法和call方法类似，也是函数对象的一个原型方法，其语法如下：

fun.apply(thisArg, [argsArray])

其中，fun表示需要调用的函数对象，thisArg表示在调用函数时要使用的this值（即函数内部的this指向），argsArray是一个数组或类数组对象，表示传递给函数的参数列表。

3.2 示例

下面我们来看一个使用apply方法的示例：

// 定义一个person对象
var person = {
  name: 'Alice',
  greet: function(message) {
    console.log(message + ', ' + this.name);
  }
};

// 定义另一个对象
var anotherPerson = {
  name: 'Bob'
};

// 使用apply方法调用person对象的greet方法，将this指向anotherPerson
person.greet.apply(anotherPerson, ['Hello']);

运行结果：

Hello, Bob

在上面的示例中，我们使用apply方法调用person对象的greet方法，将this指向anotherPerson，并传入一个包含'Hello'的数组作为参数。结果和使用call方法调用的结果相同。

4. bind方法

4.1 语法

bind方法是函数对象的一个原型方法，其语法如下：

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

其中，fun表示需要调用的函数对象，thisArg表示在调用函数时要使用的this值（即函数内部的this指向），arg1, arg2, ...表示要在调用函数时预先传递的参数。

4.2 示例

接下来我们通过一个示例来说明bind方法的使用：

// 定义一个person对象
var person = {
  name: 'Alice',
  greet: function(message) {
    console.log(message + ', ' + this.name);
  }
};

// 定义另一个对象
var anotherPerson = {
  name: 'Bob'
};

// 使用bind方法创建一个新的函数，并将this指向anotherPerson
var greetBob = person.greet.bind(anotherPerson);

// 调用新创建的函数
greetBob('Hello');

运行结果：

Hello, Bob

在上面的示例中，我们使用bind方法创建了一个新的函数greetBob，并将this指向anotherPerson。然后我们调用greetBob函数，传入'Hello'作为参数。结果输出Hello, Bob，表示bind方法成功创建了一个带有预先绑定值的函数。

5. 使用场景

5.1 call的使用场景

call方法的使用场景比较多，其中包括：

改变函数内部的this指向：通过call方法，我们可以手动指定函数执行时的上下文，即传递一个对象作为thisArg参数。
参数传递：除了this指向，call方法还可以用于传递参数给函数。

5.2 apply的使用场景

apply方法主要用于以下两种场景：

改变函数内部的this指向：和call方法一样，apply方法可以用于手动指定函数执行时的上下文。
参数传递：apply方法接受一个数组或类数组对象作为参数列表，适用于那些参数数量不固定的情况。

5.3 bind的使用场景

bind方法主要用于预先绑定函数执行时的this值，并创建一个新的函数。常见的使用场景包括：

事件处理：在事件处理函数中使用bind方法，可以将事件处理函数绑定到特定的上下文，避免在回调函数中丢失this指向。

6. 总结

通过本文的介绍，我们了解到了JavaScript中的call、apply和bind方法。这三个方法都可以用于改变函数执行时的上下文，区别在于参数传递的形式和返回值。call和apply方法可以立即执行函数，而bind方法则会创建一个新的函数。这些方法在某些场景下非常实用，能够简化代码和避免出现一些常见的错误。

在实际使用中，我们需要根据具体的情况选择合适的方法。如果需要立即执行函数并传递参数，可以使用call或apply方法；如果只需要绑定函数的执行上下文，并希望稍后再执行该函数，可以使用bind方法。