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

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

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

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

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


bind

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

javascript 复制代码
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方法的第一个参数是要绑定的上下文对象,后面的参数是要传递给函数的参数。

javascript 复制代码
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的第二个参数是一个数组这个数组里面包含要传递给函数的参数。

javascript 复制代码
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这三种方法。

相关推荐
雪落满地香2 小时前
css:圆角边框渐变色
前端·css
风无雨4 小时前
react antd 项目报错Warning: Each child in a list should have a unique “key“prop
前端·react.js·前端框架
人无远虑必有近忧!4 小时前
video标签播放mp4格式视频只有声音没有图像的问题
前端·video
记得早睡~7 小时前
leetcode51-N皇后
javascript·算法·leetcode·typescript
无情白8 小时前
k8s运维面试总结(持续更新)
运维·面试·kubernetes
ylfhpy8 小时前
Java面试黄金宝典33
java·开发语言·数据结构·面试·职场和发展·排序算法
安分小尧9 小时前
React 文件上传新玩法:Aliyun OSS 加持的智能上传组件
前端·react.js·前端框架
编程社区管理员9 小时前
React安装使用教程
前端·react.js·前端框架
拉不动的猪9 小时前
vue自定义指令的几个注意点
前端·javascript·vue.js
yanyu-yaya9 小时前
react redux的学习,单个reducer
前端·javascript·react.js