面试题解析: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这三种方法。

相关推荐
一涯6 分钟前
页面出现空白区域
前端
moisture27 分钟前
CUDA常规知识点
后端·面试
spmcor30 分钟前
MinIO本地对象存储部署指南
前端
zcychong33 分钟前
ArrayMap、SparseArray和HashMap有什么区别?该如何选择?
android·面试
少年纪34 分钟前
前端用 pdf.js 将 PDF 渲染到 Canvas 再转图片,文字消失的坑
前端
RoyLin35 分钟前
TypeScript设计模式:复合模式
前端·后端·typescript
我是天龙_绍38 分钟前
CSS/JS/图片全挂了,部署后页面白屏/资源加载失败?这两个配置项坑了多少人!
前端
我的小月月39 分钟前
SQLFE:网页版数据库(VUE3+Node.js)
前端·后端
小高00740 分钟前
🌐ES6 这 8 个隐藏外挂,知道 3 个算我输!
前端·javascript·面试
汤姆Tom40 分钟前
Node.js 版本管理、NPM 命令、与 NVM 完全指南
前端·npm·node.js