当前位置: 首页 > news >正文

《前端面试题》- JS基础 - call()、apply()、bind() 的区别

call 、bind 、 apply 这三个函数的功能都是改变this的指向问题,但是也存在一定的区别。

  • call 的参数是直接放进去的,第二第三第 n 个参数全都用逗号分隔,
  • apply 的所有参数都必须放在一个数组里面传进去
  • bind 除了返回是函数以外,它 的参数和 call 一样。

对比的时候,以call为基准,call的使用方式形如:obj.say.call(objCall,'YES', 'YES');, apply与call的区别在于,传参如果有多个,只能放到数组里面;bind与call的区别在于,并不会立即执行函数,而且会返回一个新函数,可延迟执行。

为了更好的理解,写个小例子对比下使用:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>@media print {.child {page-break-inside: avoid; }}</style>
</head><body><div class="container"></div>
</body>
<script>// 这里面的say方法里面的this指向就是obj,所以调用obj.say()// 会输出“我的名字是:zzh, 平时爱阅读么:YES, 平时爱运动么:YES”const obj = {name: 'zzh',age: 18,say(loveRead, loveSopot) {console.log(`我的名字是:${this.name}, 平时爱阅读么:${loveRead}, 平时爱运动么:${loveSopot}`);}};obj.say('YES', 'YES');/*** call*/// 这个时候,我想使用call去改变this的指向需要怎么做呢let objCall = { name: 'new zzh'};// 将obj的say方法,利用call绑定到objCall上,并且立即执行函数obj.say.call(objCall,'YES', 'YES'); // 输出结果:我的名字是:new zzh, 平时爱阅读么:YES, 平时爱运动么:YES/*** apply, 它与call的区别就是传参如果有多个,只能使用数组,而call可以单个传递*/let objApply = { name: 'new zzh with apply'};obj.say.apply(objApply,['YES','NO']); // 输出结果:我的名字是:new zzh with apply, 平时爱阅读么:YES, 平时爱运动么:NO/*** bind, 它与call的区别就是返回了一个函数,不会立即执行函数*/let objBind = { name: 'new zzh with bind'};// 将obj的say方法,利用call绑定到objCall上,并且立即执行函数let objBindNew = obj.say.bind(objCall,'NO', 'YES');objBindNew();// 输出结果:我的名字是:new zzh, 平时爱阅读么:NO, 平时爱运动么:YES</script></html>
5d5e02e94006892c2659449f0cd111a4.png

 

http://www.lryc.cn/news/335300.html

相关文章:

  • 开源软件技术社区方案
  • 【开源书籍】深入讲解内核网络、Kubernetes、ServiceMesh、容器等云原生相关技术。
  • 【C语言】“vid”Microsoft Visual Studio安装及应用(检验内存泄露)
  • Accuracy准确率,Precision精确率,Recall召回率,F1 score
  • 系统架构最佳实践 -- 智慧图书管理系统架构设计
  • 网络基础三——IP协议补充和Mac帧协议
  • 人工智能——深度学习
  • postgresql uuid
  • 【azure笔记 1】容器实例管理python sdk封装
  • Nestjs 中定义既可以捕获错误(Error)和又可以异常(Exception)的过滤器
  • GitHub 仓库 (repository) Branch - SSH clone URL - Clone in Desktop - Download ZIP
  • Training - 使用 WandB 配置 可视化 模型训练参数
  • N1922A是德科技N1922A功率传感器
  • 最简洁的Docker环境配置
  • Docker内更新Jenkins详细讲解
  • 基于遗传模拟退火混合优化算法的车间作业最优调度matlab仿真,输出甘特图
  • Mac 安装 brew brew cask 遇到的问题以及解决办法
  • Vitalik Buterin香港主旨演讲:协议过去10年迅速发展,但存在效率、安全两大问题
  • 【leetcode】大数相加
  • 数据检索的优化之道:B树与B+树的深度解析与应用探索
  • 替换服务器的SSL证书有什么影响?
  • java中可变参数和简单游戏
  • 软考高级架构师:TCP/IP 协议 和 OSI 七层模型
  • 【微服务】------常见模型的分析与比较
  • C#实现HTTP上传文件的方法
  • pdffactory pro 8注册码序列号下载 附教程
  • 软件供应链安全:寻找最薄弱的环节
  • Training - Kubeflow 的 PyTorchJob 配置 DDP 分布式训练 (ncclInternalError)
  • java Web在线考试管理系统用eclipse定制开发mysql数据库BS模式java编程jdbc
  • 爬虫 新闻网站 以湖南法治报为例(含详细注释) V4.0 升级 自定义可任意个关键词查询、时间段、粗略判断新闻是否和优化营商环境相关,避免自己再一个个判断