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

JS中的call、apply和bind

1. 前言

在JavaScript中，call、apply和bind是用于改变函数的执行上下文（即this的指向）的方法。它们能够使我们更灵活地控制函数的执行环境，尤其是在涉及到函数的继承、方法的传递以及上下文改变的场景下非常有用。

本文将详细讲解call、apply和bind的使用方法，并通过示例代码来演示其运行结果。

2. call方法

2.1 概述

call方法是所有函数对象上都拥有的一个方法，它用于调用一个函数，并且将此函数的执行上下文（即this的指向）修改成指定的对象，并且可以传递多个参数。

2.2 语法

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

thisArg: 必选参数，函数执行时的this值。
arg1, arg2, …: 可选参数，传递给函数的参数列表。

2.3 示例代码

const person = {
  name: "Alice",
  sayHello: function() {
    console.log("Hello, " + this.name);
  }
};

const anotherPerson = {
  name: "Bob"
};

person.sayHello();  // 输出：Hello, Alice
person.sayHello.call(anotherPerson);  // 输出：Hello, Bob

上述示例中，我们定义了一个person对象，其中包含一个sayHello方法。当我们调用person的sayHello方法时，它会输出”Hello, Alice”。然而，通过调用call方法，并且传递anotherPerson作为参数，我们改变了sayHello方法的执行上下文，使其输出”Hello, Bob”。这样我们可以通过call方法改变一个函数的this指向。

3. apply方法

3.1 概述

apply方法和call方法类似，同样是用于调用一个函数并改变其执行上下文的方法，但apply方法接受的参数是一个数组。

3.2 语法

function.apply(thisArg, [argsArray])

thisArg: 必选参数，函数执行时的this值。
argsArray: 可选参数，一个数组或者类数组对象，其中的元素将作为参数传递给函数。

3.3 示例代码

function sum(a, b) {
  return a + b;
}

const numbers = [1, 2];
const result = sum.apply(null, numbers);
console.log(result);  // 输出：3

上述示例中，我们定义了一个函数sum，用于计算两个数的和。通过apply方法，我们将numbers数组中的元素依次作为参数传递给sum函数，并计算出结果3。

4. bind方法

4.1 概述

bind方法和call、apply方法不同，它不会立即调用函数，而是返回一个新的函数，该函数的this值指向被绑定的对象。

4.2 语法

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

thisArg: 必选参数，函数执行时的this值。
arg1, arg2, …: 可选参数，要绑定到新函数的预设参数。

4.3 示例代码

const person = {
  name: "Alice",
  sayHello: function() {
    console.log("Hello, " + this.name);
  }
};

const anotherPerson = {
  name: "Bob"
};

const sayHello = person.sayHello.bind(anotherPerson);
sayHello();  // 输出：Hello, Bob

上述示例中，我们先定义了一个person对象和一个anotherPerson对象。通过调用bind方法并传递anotherPerson作为参数，我们得到一个新的函数sayHello，该函数的this指向anotherPerson。最后调用sayHello函数，它会输出”Hello, Bob”。