JS 函数的 call、apply 及 bind 超详细方法

在 JavaScript 中，我们可以用 call、apply、bind 等方法来改变函数的调用方式或绑定上下文。这些方法的使用可以避免代码的重复，提高代码的可重用性，同时也可以更好的管理函数的上下文。

call 方法

call 方法可以将一个函数的 this 指向指定的对象，并且立刻执行该函数。call 方法接收一个参数作为函数的上下文，并在该上下文中执行该函数。

语法：fun.call(thisArg, arg1, arg2, ...)，其中 thisArg 为函数执行时的上下文，其他参数为函数的参数。

示例：

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

const person = {
  name: "Tom"
};

sayHello.call(person); // 输出 "Hello, Tom!"

在这个示例中，person 对象被传递给了 call() 方法，this 就指向了 person 对象，并执行了 sayHello 函数。

apply 方法

apply 方法与 call 方法类似，区别在于 call 方法直接传入参数，而 apply 方法接收一个数组作为参数，并在数组元素的上下文中执行函数。

语法：fun.apply(thisArg, [argsArray])，其中 thisArg 为函数执行时的上下文，argsArray 为需要传入函数的参数数组。

示例：

function sayHello(prefix, suffix) {
  console.log(`${prefix}, ${this.name}! ${suffix}`);
}

const person = {
  name: "Tom"
};

sayHello.apply(person, ["Hi", "How are you?"]); // 输出 "Hi, Tom! How are you?"

在这个示例中，sayHello 接收了两个参数，通过 apply 方法，使用 person 对象作为上下文，并传入了一个参数数组 ["Hi", "How are you?"]，最后输出了期望的字符串。

bind 方法

bind 方法用于创建一个新的函数，在新函数中将一个指定的 this 值绑定到函数体内，并在调用时传入预设的参数列表。

语法：fun.bind(thisArg[, arg1[, arg2[, ...]]])，其中 thisArg 为函数执行时的上下文，其后的参数为需要传入函数的参数。

示例：

function sayHello(greeting) {
  console.log(`${greeting}, ${this.name}!`);
}

const person = {
  name: "Tom"
};

const sayHelloToTom = sayHello.bind(person, "Nice to meet you");

sayHelloToTom(); // 输出 "Nice to meet you, Tom!"

在这个示例中，我们使用 bind 方法预设了 person 对象作为 sayHello 函数的上下文，同时传入了参数 "Nice to meet you"，并生成了一个新的函数 sayHelloToTom，在调用 sayHelloToTom 函数时，会输出与上例相同的字符串。

总结

call、apply、bind 是 JavaScript 中非常常用的方法，代码的可重用性大大提高。当需要修改函数的上下文时，可以使用 call 和 apply；当需要预设参数并返回一个新函数时，可以使用 bind。