面试题解析：bind,call,apply的区别

在面试的过程中，面试官很有可能会问到我们有关this的相关内容。那么关于this我们都知道在 JavaScript 中，this 是一个特殊关键字，它指向当前函数执行时的上下文对象。

this 的值取决于函数被调用的方式:

1. 全局上下文中的 this： 当在全局作用域中使用 this 时，它将指向全局对象（在浏览器中通常是 window 对象，在 Node.js 环境中是 global 对象）。
2. 函数中的 this： 在函数内部，this 的值取决于函数被调用的方式。
3. 使用 call、apply 或 bind 方法来显式设置函数执行时的 this 值。

bind、call和apply都是JavaScript中用于处理函数调用的方法。它们的作用都是相同的而主要区别在于它们如何设置和传递函数的上下文以及参数。

bind

bind会创建一个新的函数，并将原始函数绑定到指定的上下文,以后可以进行复用。这意味着无论在什么时候调用这个新函数，它都会使用绑定的上下文。bind方法可以接收多个参数，第一个参数是要绑定的上下文对象，后面的参数是要传递给原始函数的参数。

const info = { name: '张三' };

function Info(age) {
  console.log(`姓名: ${this.name}`);
  console.log(`年龄: ${age}`);
}

const bindInfo = Info.bind(info,'19');
bindInfo();  // 输出结果为:姓名: 张三
             //            年龄: 19 

在这个例子中，第8行的代码在将原始函数绑定到对象info的上下文的同时，将字符串’19’作为形参age的值传给原始函数。

call

call可以在指定的上下文中调用函数，并传递一个或多个参数。与bind不同的是，call会立即调用函数，而不是返回一个新函数，所以并不能像bind一样进行复用。call方法的第一个参数是要绑定的上下文对象，后面的参数是要传递给函数的参数。

const info = { name: '张三' };

function Info(age,sex) {
  console.log(`姓名: ${this.name}`);
  console.log(`年龄: ${age}`);
  console.log(`性别: ${sex}`);
}

Info.call(info,'19','男'); // 输出结果为:姓名: 张三
                           //            年龄: 19
                           //            性别: 男

在这个例子中，第9行的代码在将原始函数绑定到对象info的上下文的同时，将字符串’19’作为形参age的值传给原始函数。

apply

apply在指定的上下文中调用函数，并传递一个数组作为参数。与call类似，apply也是立即调用函数。第一个参数是要绑定的上下文对象，但与call不同的是，apply的第二个参数是一个数组这个数组里面包含要传递给函数的参数。

const info = { name: '张三' };

function Info(age,sex) {
  console.log(`姓名: ${this.name}`);
  console.log(`年龄: ${age}`);
  console.log(`性别: ${sex}`);
}

Info.apply(info,['19','男']);// 输出结果为:姓名: 张三
                             //            年龄: 19
                             //            性别: 男

总结

• bind创建一个新函数并绑定上下文，以后可以调用。我们还可以通过bind来实现柯里化。
• call在指定的上下文中立即调用函数，并传入参数。
• apply在指定的上下文中立即调用函数，并传入数组作为参数。

总之，this的值在JavaScript中是动态确定的，取决于函数被调用的方式。我们需要根据不同的情况和需求来使用bind,call,apply这三种方法。

原文链接：https://juejin.cn/post/7337534871369973772 作者：Yhuh