call、apply、bind 的妙处与取舍

2024-01-19 01:40:55

call、apply、bind 都是 JavaScript 中用来改变函数内部 this 指向的方法，这三个方法都非常有用，而且经常被用来解决各种各样的问题，比如：

改变函数的执行上下文
调用一个对象的函数
传递参数给函数
创建新的函数

虽然这三个方法都具有相同的功能，但它们在使用上还是有一些区别的，接下来，我将详细解释这三个方法的用法和区别，以便您能够根据需要选择合适的方法使用。

call

call 方法的语法如下：

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

thisArg：要将函数作用域绑定到该值
arg1, arg2, ...：要传递给函数的参数

call 方法的作用是将函数作用域绑定到 thisArg 参数，然后执行函数，并将 arg1、arg2、... 等参数传递给函数。

例如，以下代码使用 call 方法将函数作用域绑定到对象 obj，然后执行函数，并将参数 1 和 2 传递给函数：

const obj = {
  name: 'John Doe',
  greet: function(greeting) {
    console.log(greeting + ', ' + this.name);
  }
};

obj.greet('Hello'); // Hello, John Doe

apply

apply 方法的语法如下：

Function.apply(thisArg, [args])

thisArg：要将函数作用域绑定到该值
args：要传递给函数的参数，必须是一个数组

apply 方法的作用与 call 方法基本相同，唯一区别在于 apply 方法将参数作为数组传递给函数，而 call 方法则将参数作为单独的参数传递给函数。

例如，以下代码使用 apply 方法将函数作用域绑定到对象 obj，然后执行函数，并将参数 1 和 2 传递给函数：

const obj = {
  name: 'John Doe',
  greet: function(greeting) {
    console.log(greeting + ', ' + this.name);
  }
};

obj.greet.apply(obj, ['Hello']); // Hello, John Doe

bind

bind 方法的语法如下：

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

thisArg：要将函数作用域绑定到该值
arg1, arg2, ...：要传递给函数的参数

bind 方法的作用与 call 和 apply 方法不同，bind 方法不会立即执行函数，而是返回一个新的函数，该函数的作用域已经绑定到 thisArg 参数，并且已经将 arg1、arg2、... 等参数传递给了函数。

例如，以下代码使用 bind 方法将函数作用域绑定到对象 obj，然后返回一个新的函数，该函数的作用域已经绑定到对象 obj，并且已经将参数 1 传递给了函数：

const obj = {
  name: 'John Doe',
  greet: function(greeting) {
    console.log(greeting + ', ' + this.name);
  }
};

const greetJohn = obj.greet.bind(obj, 'Hello');

greetJohn(); // Hello, John Doe

区别

call、apply 和 bind 这三个方法的主要区别在于：

call 方法将参数作为单独的参数传递给函数，而 apply 方法将参数作为数组传递给函数。
bind 方法不会立即执行函数，而是返回一个新的函数，该函数的作用域已经绑定到 thisArg 参数，并且已经将 arg1、arg2、... 等参数传递给了函数。

使用场景

call、apply 和 bind 这三个方法都有各自的优点和缺点，在实际开发中，需要根据具体情况选择合适的方法使用。

call 方法比较简单，使用方便，而且可以传递任意数量的参数给函数。
apply 方法可以将参数作为数组传递给函数，这在某些情况下非常有用，比如当您需要将一个数组作为参数传递给函数时。
bind 方法可以返回一个新的函数，该函数的作用域已经绑定到 thisArg 参数，并且已经将 arg1、arg2、... 等参数传递给了函数。这在某些情况下非常有用，比如当您需要创建一个新的函数，并且该函数的作用域需要绑定到某个对象时。