面试题之介绍下call，apply，bind相同点和不同点

call、apply 和 bind  是 JavaScript 中用于改变函数执行时 this 指向的方法。

1. call 方法

call 方法允许你调用一个函数，并显式地指定函数内部的 this 值，同时可以传递参数。

语法：

JavaScript复制

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

• thisArg：函数内部的 this 值。

• arg1, arg2, ...：传递给函数的参数。

示例：

function greet(...message) {
  console.log(`${message}, my name is ${this.name}`);
}

const person = { name: "Alice" };

greet.call(person, "Hello","hi","嘻嘻"); // 输出: Hello,hi,嘻嘻, my name is Alice

2. apply 方法

apply 方法与 call 类似，也用于调用一个函数并显式地指定函数内部的 this 值，但它的参数是以数组的形式传递的。

语法：

JavaScript复制

function.apply(thisArg, [argsArray]);

• thisArg：函数内部的 this 值。

• [argsArray]：一个数组，包含要传递给函数的参数。

示例：

function greet(...message) {
  console.log(`${message}, my name is ${this.name}`);
}

const person = { name: "Alice" };

greet.apply(person, ["Hello","hi","嘻嘻"]); // 输出: Hello,hi,嘻嘻, my name is Alice

3. bind 方法

bind 方法用于创建一个新的函数，并将该函数的 this 值永久绑定到指定的对象上。与 call 和 apply 不同，bind 不会立即调用函数，而是返回一个新的函数。

语法：

const newFunction = function.bind(thisArg, arg1, arg2, ...);

• thisArg：绑定到新函数的 this 值。

• arg1, arg2, ...：预绑定的参数（可选）。

示例：

function greet(...message) {
  console.log(`${message}, my name is ${this.name}`);
}

const person = { name: "Alice" };

const greetAlice = greet.bind(person, "Hello","hi");
greetAlice("嘻嘻"); // 输出: Hello,hi,嘻嘻, my name is Alice

相同点

1. 目的相同：call、apply 和 bind 都用于改变函数执行时的上下文（this 值）。

2. 参数传递：都可以传递参数给目标函数（call 和 apply 是直接调用，bind 是预绑定）。

3. 用途广泛：都可以用于继承、函数借用、模拟私有方法等场景。

不同点

1. 调用方式：

   • call：直接调用函数，参数逐个传递。

   • apply：直接调用函数，参数以数组形式传递。

   • bind：返回一个新的函数，this 值和参数被预绑定，需要手动调用。

2. 是否立即执行：

   • call 和 apply：立即调用目标函数。

   • bind：返回一个新的函数，不会立即执行。

3. 参数传递方式：

   • call：参数逐个传递。

   • apply：参数以数组形式传递。

   • bind：预绑定参数，后续调用时可以补充参数。

4. 应用场景：

   • call 和 apply：通常用于立即调用函数并改变上下文。

   • bind：用于创建一个上下文固定的函数，常用于事件处理、回调函数等场景。

总结

• call 和 apply：都用于立即调用函数并改变上下文，区别在于参数传递方式（call 是逐个传递，apply 是数组传递）。

• bind：返回一个新的函数，this 值和参数被预绑定，适合需要延迟调用的场景。

• 选择方法：根据是否需要立即调用以及参数传递方式来选择 call、apply 或 bind。

这些方法在 JavaScript 中非常强大，可以帮助你更好地控制函数的上下文和参数传递。