JavaScript 中的 call、apply 和 bind

介绍

• call和apply都是立即执行函数，并且可以改变函数的this指向，主要区别在于参数的传递方式：call是逐个传递，apply是作为数组传递。
• bind则是返回一个新的函数，不会立即执行，但其this已经绑定到指定的对象，可以稍后执行或作为回调函数使用。

使用场景

• 当你希望改变函数执行时的this指向，并且立即执行该函数时，可以使用call或apply。
• 当你需要将函数稍后执行，但又想预先确定this的指向时，可以使用bind。

call 方法

call方法允许你调用一个函数，同时允许你为函数调用设置this值，并接受逐个列出的参数。

语法：

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

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

使用场景及代码示例：

• 场景：在不同的对象之间共享方法时。

function showDetails(age, job) {
  console.log(this.name + " is " + age + " years old and is a " + job + ".");
}

var person1 = { name: "John" };
var person2 = { name: "Jane" };

showDetails.call(person1, 30, "Developer");
showDetails.call(person2, 25, "Designer");

function showDetails(age, job) {
  console.log(this.name + " is " + age + " years old and is a " + job + ".");
}

var person1 = { name: "John" };
var person2 = { name: "Jane" };

showDetails.call(person1, 30, "Developer");
showDetails.call(person2, 25, "Designer");

apply 方法

apply方法的作用与call相似，不同之处在于它接受一个参数数组，而不是一系列的参数列表。

语法：

func.apply(thisArg, [argsArray])

func.apply(thisArg, [argsArray])

使用场景及代码示例：

• 场景：当函数需要传递一个参数数组时。

function showDetails(age, job) {
  console.log(this.name + " is " + age + " years old and is a " + job + ".");
}

var person1 = { name: "John" };
var details = [30, "Developer"];

showDetails.apply(person1, details);

function showDetails(age, job) {
  console.log(this.name + " is " + age + " years old and is a " + job + ".");
}

var person1 = { name: "John" };
var details = [30, "Developer"];

showDetails.apply(person1, details);

bind 方法

bind方法创建一个新的函数，在bind被调用时，这个新函数的this被指定为bind的第一个参数，其余参数将作为新函数的参数，供调用时使用。

语法：

var boundFunc = func.bind(thisArg[, arg1[, arg2[, ...]]])

var boundFunc = func.bind(thisArg[, arg1[, arg2[, ...]]])

使用场景及代码示例：

• 场景：当你需要预设函数的this上下文，但不立即执行该函数时。

function showDetails(age, job) {
  console.log(this.name + " is " + age + " years old and is a " + job + ".");
}

var person1 = { name: "John" };
var showJohnDetails = showDetails.bind(person1, 30, "Developer");

showJohnDetails(); // 稍后调用

function showDetails(age, job) {
  console.log(this.name + " is " + age + " years old and is a " + job + ".");
}

var person1 = { name: "John" };
var showJohnDetails = showDetails.bind(person1, 30, "Developer");

showJohnDetails(); // 稍后调用

以上就是call、apply和bind的基本介绍和使用示例。