web前端面试-- 在 JavaScript 中 bind ， apply 和 call 的区别

本人是一个web前端开发工程师，主要是vue框架，整理了一些面试题，今后也会一直更新，有好题目的同学欢迎评论区分享 ;-）

web面试题专栏：点击此处

---

在 JavaScript 中， bind ， apply 和 call 都是用于改变函数执行上下文的方法。它们的区别如下：

1. bind 方法创建一个新函数，新函数的执行上下文被绑定到指定的对象。它不会立即执行函数，而是返回一个绑定了执行上下文的函数，可以稍后调用。 调用的时候传递单独的参数~

const obj = { name: 'Penk' };
function greet(str) {
  console.log(`Hello, ${this.name+str} !`);
}
const boundGreet = greet.bind(obj,'是个码农');
boundGreet(); // 输出：Hello, Penk是个码农!
1
2
3
4
5
6

2. apply 方法调用函数，并将一个指定的对象作为执行上下文，以及**一个数组（或类数组对象）**作为参数传递给函数。数组中的每个元素将作为参数传递给函数。

const obj = { name: 'Penk' };
function greet(greeting) {
  console.log(`${greeting}, ${this.name}!`);
}
greet.apply(obj, ['Hi']); // 输出：Hi, Penk!
1
2
3
4
5

3. call 方法调用函数，并将一个指定的对象作为执行上下文，以及单独的参数传递给函数。每个参数将作为单独的参数传递给函数。

const obj = { name: 'Penk' };
function greet(greeting) {
  console.log(`${greeting}, ${this.name}!`);
}
greet.call(obj, 'Hey'); // 输出：Hey, Penk!
1
2
3
4
5

总结：

• bind 创建一个新函数，并绑定执行上下文，调用的时候传递单独的参数。
• apply 调用函数，并传递一个数组作为参数。
• call 调用函数，并传递单独的参数。

这些方法允许您在 JavaScript 中更灵活地控制函数的执行上下文。