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

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

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

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

相关推荐

  1. 面试解析:bind,call,apply区别2

    2024-03-29 11:48:05       40 阅读
  2. Vue2面试:watch和computed区别

    2024-03-29 11:48:05       58 阅读
  3. Vue2面试:说一下路由模式hash和history区别

    2024-03-29 11:48:05       51 阅读
  4. 面试http和https区别

    2024-03-29 11:48:05       43 阅读
  5. 面试:指针和引用区别

    2024-03-29 11:48:05       45 阅读
  6. 面试: malloc与new区别

    2024-03-29 11:48:05       34 阅读
  7. 面试:String 、StringBuffer 、StringBuilder区别

    2024-03-29 11:48:05       29 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-29 11:48:05       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-29 11:48:05       100 阅读
  3. 在Django里面运行非项目文件

    2024-03-29 11:48:05       82 阅读
  4. Python语言-面向对象

    2024-03-29 11:48:05       91 阅读

热门阅读

  1. Vue如何实现自定义组件改变组件背景色?

    2024-03-29 11:48:05       41 阅读
  2. 关于gson解析把int类型转成浮点型的问题

    2024-03-29 11:48:05       37 阅读
  3. TCP/IP参考模型(四层及其解析)

    2024-03-29 11:48:05       42 阅读
  4. MySQL学习必备SQL_DDL_DML_DQL

    2024-03-29 11:48:05       43 阅读
  5. vue.js 开发如何应用“软件工程“的原则?

    2024-03-29 11:48:05       38 阅读
  6. ARM day8作业

    2024-03-29 11:48:05       38 阅读
  7. 完整的FPGA设计流程包括哪些?

    2024-03-29 11:48:05       50 阅读
  8. 微信小程序预先加载服务器的图片

    2024-03-29 11:48:05       37 阅读
  9. 十一、Spring源码学习之registerListeners方法

    2024-03-29 11:48:05       30 阅读
  10. FFMPEG对于处理rtp流出现马赛克问题处理

    2024-03-29 11:48:05       43 阅读