call & apply & bind -高级前端必考

JavaScript 中 call、apply 和 bind 的用法与区别

一、对比

方法	调用方式	参数传递方式	是否立即执行	优点	缺点	典型使用场景
call	立即调用	依次传递多个独立参数	是	灵活改变 this 指向并立即执行，方便传递多个已知参数	参数较多时代码冗长	对象方法调用、函数参数已知的情况
apply	立即调用	传递一个数组（类数组）作为参数	是	适合将数组或类数组作为参数传递，代码简洁	参数必须是数组或类数组	数组参数处理、类数组操作
bind	返回新函数	可预先设定 this 和部分参数	否	可创建新函数，预设 this 和参数，提高代码复用性和灵活性	创建新函数可能增加内存占用	需要预设上下文和参数的场景，如事件处理

二、call 方法

用法

call 方法会调用函数，并将函数内部的 this 指向指定的对象，同时可以传递参数给函数。

语法：

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

举例

const person = {
  name: "John",
  greet: function(age, hobby) {
    console.log(`Hello, my name is ${this.name}. I am ${age} years old and I like ${hobby}.`);
  }
};

person.greet(30, "reading"); // 直接调用，this 指向 person
// Hello, my name is John. I am 30 years old and I like reading.

const anotherPerson = {
  name: "Jane"
};

person.greet.call(anotherPerson, 25, "cooking"); // 使用 call，this 指向 anotherPerson
// Hello, my name is Jane. I am 25 years old and I like cooking.

优点

• 可以灵活地改变函数内部的 this 指向，调用函数并立即执行。
• 能够方便地为函数传递多个参数，参数依次传递。（写的时候很爽，复用的时候太恶心）

缺点

• 如果参数数量较多，在调用 call 时需要逐个列出参数，代码可能会显得冗长。（所以尽量用apply，因为apply和call的不同就是传参方式，apply中只传一个数据即可）

三、apply 方法 （重点，常用）

用法

apply 方法也用于调用函数，指定函数内部的 this 指向，但它接受一个数组（或类数组对象）作为函数的参数。

语法：

function.apply(thisArg, [argsArray])

举例

const numbers = [1, 2, 3, 4, 5];

const max = Math.max.apply(null, numbers); // 使用 apply，将数组元素作为参数传递给 Math.max
console.log(max); // 5

const person = {
  name: "John",
  greet: function(...args) {
    console.log(`Hello, my name is ${this.name}. I like ${args.join(", ")}.`);
  }
};

const hobbies = ["reading", "cooking", "hiking"];
person.greet.apply(person, hobbies); // 使用 apply 传递数组参数
// Hello, my name is John. I like reading, cooking, hiking.

优点

• 适合将数组或类数组对象作为参数传递给函数，避免逐个列出参数，使代码更简洁。

缺点

• 参数必须是一个数组或类数组对象，不能像 call 那样直接传递多个独立参数。（复用的时候很爽）

使用场景

• 防抖、节流中，可以用apply来更改闭包中return出来的function的this指向，从而可以在方法函数中用this指向来添加业务逻辑

四、bind 方法

用法

bind 方法会创建一个新函数，并将新函数内部的 this 指向指定的对象。调用 bind 不会立即执行函数，而是返回一个新函数，这个新函数可以在后续被调用。

语法：

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

举例

const person = {
  name: "John",
  greet: function(time, ...hobbies) {
    console.log(`Good ${time}, my name is ${this.name}. I like ${hobbies.join(", ")}.`);
  }
};

const greetMorning = person.greet.bind(person, "morning");
greetMorning("reading", "cooking"); // Good morning, my name is John. I like reading, cooking.

const anotherPerson = {
  name: "Jane"
};

const anotherGreet = person.greet.bind(anotherPerson, "afternoon");
anotherGreet("hiking", "painting"); // Good afternoon, my name is Jane. I like hiking, painting.

优点

• 可以预先设定函数的 this 指向和部分参数，创建一个新函数，这个新函数可以在之后被多次调用，提高代码的复用性和灵活性。
• 在事件处理函数或定时器等场景中非常有用，可以提前绑定好上下文，避免在回调中手动设置 this。

缺点

• 创建了一个新的函数，如果频繁使用可能会增加内存占用，相比之下 call 和 apply 是直接调用函数。

使用场景

• 当需要预先设定函数的上下文和部分参数，但又不希望立即执行函数，而是稍后多次调用时。例如，在设置事件监听器时，提前绑定好对象的方法作为事件处理函数，这样在事件触发时，函数内部的 this 就已经正确指向了设定的对象。