《前端面试题》- 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.mzph.cn/news/803296.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

美团一面:说说synchronized的实现原理?问麻了。。。。

引言 在现代软件开发领域&#xff0c;多线程并发编程已经成为提高系统性能、提升用户体验的重要手段。然而&#xff0c;多线程环境下的数据同步与资源共享问题也随之而来&#xff0c;处理不当可能导致数据不一致、死锁等各种并发问题。为此&#xff0c;Java语言提供了一种内置…

HwBinder流程分析

HwBinder与普通Binder是一样的,区别是前者是专门给硬件使用&#xff0c;后者是给一般的应用程序使用&#xff0c;为了不影响现有的binder&#xff0c;单独增加硬件的HwBinder来实现硬件相关进程的通信。 HwBinder也是有四部分组成&#xff1a;hwservermanager、server、client…

PUBG绝地求生29.1版本延迟高/卡顿/掉帧/丢包的快速解决方法

要想在绝地求生中获得好成绩&#xff0c;咱们需求把握一些根本的游戏技巧。比方&#xff0c;在挑选降落点时&#xff0c;咱们可以运用u标签来着重“安全”二字。挑选一个相对较为安全的降落点可以防止与其他玩家过早触摸&#xff0c;给自己争夺更多时间来搜集资源和配备。接下来…

ORAN C平面 Section Extension 22

ORAN C平面Section扩展22用于ACK/NACK请求。除section type 7外&#xff0c;section扩展22可以用于从O-DU发送到O-RU的所有section type和section扩展。 对于一个section描述&#xff0c;O-DU可以使用section扩展22要求O-RU使用section type 8 C平面消息进行ACK/NACK反馈。关于…

MyBatis源码介绍

文章目录 MyBatis的核心流程介绍SqlSessionFactory的理解MyBatis中的Executor的源码理解Spring中是如何解决MySQL的SqlSession的线程安全问题MyBatis面向Mapper编程工作原理Mybatis动态sql执行原理Mybatis的一级、二级缓存实现原理Mybatis的插件运行原理以及如何编写一个插件my…

制作一个RISC-V的操作系统十-Trap和Exception(流 mtvec mepc mcause mtval mstatus trap完整流程)

文章目录 流mtvecmepcmcausemtvalmstatustrap 初始化trap的top half&#xff08;硬件完成&#xff09;trap的bottom half&#xff08;软件完成&#xff09;从trap返回代码实现 流 控制流&#xff1a;程序控制的执行流 trap分为中断和异常 mtvec base&#xff1a;存储trap入…

2_8.Linux系统引导过程及引导修复

# 1.磁盘引导 # mbr主引导记录0磁道1扇区446 作用&#xff1a; 记录grub2引导文件的位置 当mbr数据丢失系统会因为找不到启动分区而停止启动 问题模拟方式: 系统磁盘/dev/sda dd if/dev/zero of/dev/vda bs446 count1 ##清空系统/dev/sda上的mbr数据 恢复方式&#xff1a; &…

PyTorch深度学习——线性回归、计算图和自动求导机制、损失函数和优化器

一、线性回归 线性回归模型是输入一个特征的张量&#xff0c;做线性变换&#xff0c;输出一个预测张量 为了构造线性变换&#xff0c;需要知道输入特征维度大小&#xff0c;并且知道线性回归的权重和偏置&#xff0c;在forward方法中&#xff0c;输入一个特征张量x&#xff0…

LeetCode -- 第 392 场周赛

链接 : 竞赛 - 力扣 (LeetCode) 3105. 最长的严格递增或递减子数组 . - 力扣&#xff08;LeetCode&#xff09; 用两个分组循环(本质就是双指针)&#xff0c;分别求出最长的递增和递减子数组的长度&#xff0c;然后取max ; class Solution { public:int longestMonotonicS…

客户现场服务器故障处理建议携带的设备

WIFI路由器&#xff0c;带 SIM卡的&#xff0c;带多个千兆网口的&#xff0c;网线 USB硬盘&#xff08;TB计算&#xff09; U盘启动盘 便携的KVM&#xff08;另外带 键盘/鼠标/VGA线&#xff0c;方便现场多个服务器切换显示和控制&#xff09; USB Hub&#xff08;万一客户服…

图形化界面使用MQ!!!

一、docker安装 1、拉去镜像 docker pull rabbitmq:3.10-management 2、Docker运行&#xff0c;并设置开机自启动&#xff08;第一个-p是MQ默认配置的端口&#xff0c;第二个-p是图形化界面配置的端口&#xff09; docker run -d --restartalways --name rabbitmq -p 5672:5672…

直播系统的短视频直播源码,带有多功能后台系统的直播短视频平台 APP 源码。

内容目录 一、详细介绍二、效果展示1.部分代码2.效果图展示 三、学习资料下载 一、详细介绍 此源码是一个直播系统&#xff0c;集直播、短视频等功能&#xff0c;根据市场趋势开发并推出思乐直播APP&#xff0c;APP功能丰富且可在后台管理系统进行配置&#xff0c;做到按需求来…

《QT实用小工具·二十二》多种样式导航按钮控件

1、概述 源码放在文章末尾 该项目实现了多种样式的导航按钮控件 可设置文字的左侧、右侧、顶部、底部间隔。 可设置文字对齐方式。 可设置显示倒三角、倒三角边长、倒三角位置、倒三角颜色。 可设置显示图标、图标间隔、图标尺寸、正常状态图标、悬停状态图标、选中状态图标…

字节面经之碰上了活菩萨

rt, 楼主碰上了活菩萨. 简单做了个自我介绍, 然后项目没怎么问, 说问我一些计算机基础知识. 然后让我说说我都会什么. 然后从数据结构开始. 让我讲一讲自己熟悉的数据结构, 比如树什么的. 然后我就把二叉树, 二叉搜索树, 二叉平衡树, 红黑树. DFS/BFS还有对应的场景讲了一遍.…

ctfshow web入门 文件上传web162--web167

web162 session文件包含条件竞争 直接包含不传马了 我们上传的文件如果不符合要求&#xff0c;就会被删除&#xff0c;导致成功上传无法访问&#xff0c;没有用。但是如果我们上传的速度比服务器删的速度快&#xff0c;就可以了。 上传.user.ini GIF89a auto_append_file/tmp/…

四、书城开发--3、书城图书部分的开发

书城图书部分 首先我们做书城首页搜索栏下面的图片展示 我们在书城首页组件中通过home请求方法中获取回来的数据中&#xff0c;打印出来可以看到那个banner就是我们现在要的图片 我们在data中定义一个变量banner用来存放获取回来的数据中的banner 然后把它展示出来就可以了&a…

LeetCode-84. 柱状图中最大的矩形【栈 数组 单调栈】

LeetCode-84. 柱状图中最大的矩形【栈 数组 单调栈】 题目描述&#xff1a;解题思路一&#xff1a;单调栈解题思路二&#xff1a;解题思路三&#xff1a; 题目描述&#xff1a; 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且…

阿赵UE学习笔记——26、动画混合空间

阿赵UE学习笔记目录   大家好&#xff0c;我是阿赵。   继续学习虚幻引擎的使用。之前学习了通过蓝图直接控制动画播放&#xff0c;或者通过动画状态机去控制播放。这次来学习一种比较细致的动画控制播放方式&#xff0c;叫做动画混合空间。 一、使用的情景 假设我们现在需…

ssm035基于JavaWeb的家居商城系统的设计与实现+jsp

家居商城系统 摘 要 随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;通过科技手段提高自身的优势&#xff1b;对于家居商城系统当然也不能排除在外&#xff0c;随着网络技术的不断成熟&#xff0c;带动了家居商城系统&#xff0c;它彻底改…

Linux操作系统安装注意事项(新手简易版)

Linux操作系统安装注意事项&#xff08;新手简易版&#xff09; 目录&#xff1a; 1、字符集安装 2、磁盘分区 3、关闭KDUMP防火墙 4、时区选择 注&#xff1a;事例截图是centos8的安装&#xff0c;其他版本是一样的 1、字符集安装 ecology运行需要用到GBK和UTF8字符…