Call, Apply & Bind：语法、区别、用法和实现深入分析

2023-10-13 12:23:36

在 JavaScript 中，函数原型链中的 Call、Apply 和 Bind 方法是用于改变函数中的 this 指向的重要概念。这些方法具有不同的语法、用法和实现方式，本文将深入分析它们的用法、区别和内部实现，帮助您更深入地理解和掌握这些方法。

1. 语法

Call 方法 ：

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

Apply 方法 ：

fun.apply(thisArg, [arg1, arg2, ...])

Bind 方法 ：

fun.bind(thisArg)

2. 用法

Call 方法 ：
将一个函数的 this 指向显式地指定为某个对象，并执行该函数。

// 实例
const person = {
  name: "John Doe",
  greet: function () {
    console.log(`Hello, my name is ${this.name}`);
  },
};

const anotherPerson = {
  name: "Jane Doe",
};

person.greet.call(anotherPerson); // 输出：Hello, my name is Jane Doe

Apply 方法 ：
与 Call 方法类似，Apply 方法也会将一个函数的 this 指向显式地指定为某个对象，并执行该函数。不同的是，Apply 方法接收一个数组作为参数，而 Call 方法则接收多个单独的参数。

// 实例
const person = {
  name: "John Doe",
  greet: function () {
    console.log(`Hello, my name is ${this.name}`);
  },
};

const anotherPerson = {
  name: "Jane Doe",
};

person.greet.apply(anotherPerson, ["Jane Doe"]); // 输出：Hello, my name is Jane Doe

Bind 方法 ：
将一个函数的 this 指向显式地指定为某个对象，并返回一个新的函数，该函数在被调用时，this 指向将是指定的这个对象。

// 实例
const person = {
  name: "John Doe",
  greet: function () {
    console.log(`Hello, my name is ${this.name}`);
  },
};

const anotherPerson = {
  name: "Jane Doe",
};

const boundGreet = person.greet.bind(anotherPerson);

boundGreet(); // 输出：Hello, my name is Jane Doe

3. 区别

Call 方法和 Apply 方法 ：
- Call 方法接收多个单独的参数，而 Apply 方法接收一个数组作为参数。
- 在严格模式下，如果第一个参数传递的是 null / undefined，或者不传，Call 方法和 Apply 方法都会抛出 TypeError 异常，而 Bind 方法不会。
Apply 方法和 Bind 方法 ：
- Apply 方法会立即执行函数，而 Bind 方法只是返回一个新的函数，该函数在被调用时，this 指向将是指定的这个对象。