2023前端面试题-Js面试题-call()、apply()、 bind()的作用和区别?

75 阅读1分钟

在 JavaScript 中,可以使用 call()、apply() 和 bind() 方法来改变函数的 this 上下文指向。

一、call() 和 apply()

call() 和 apply() 方法都是立即调用函数并且指定函数中 this 指向的方式,它们的作用是相同的,唯一的区别是它们传参的方式不同。

call() 方法需要将参数一个一个传递进去。
apply() 方法则将参数放到一个数组中一起传递进去。

示例

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

const person = {
  name: 'Alice'
};

// 使用 call() 方法改变函数上下文中的 this 指向
greeting.call(person); // 输出:Hello, Alice!

// 使用 apply() 方法改变函数上下文中的 this 指向
greeting.apply(person); // 输出:Hello, Alice!

二、 bind()

bind() 方法则是将函数与指定的 this 值进行绑定,并返回一个新函数,这个新函数的 this 值已经被预设了。这个新函数可以稍后调用,也可以传入参数。

示例

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

const person = {
  name: 'Alice'
};

// 使用 bind() 方法改变函数上下文中的 this 指向
const hello = greeting.bind(person, 'Hello');
hello(); // 输出:Hello, Alice!

// 可以在调用时传入参数,覆盖 bind() 中传入的参数
hello('Hi'); // 输出:Hi, Alice!

总结:

call() 和 apply() 方法是直接改变函数的上下文,并立即调用函数。

bind() 方法则是创建一个新函数,并将原函数的上下文和参数都预设了。

更多前端面试题请看:存图,扫

daan-s.png