javascript中call,apply,bind的区别详解


Posted in Javascript onDecember 11, 2020

在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢。

在说区别之前还是先总结一下三者的相似之处:
1、都是用来改变函数的this对象的指向的。
2、第一个参数都是this要指向的对象。
3、都可以利用后续参数传参。

那么他们的区别在哪里的,先看一个例子。

var xw = {
     name : "小王",
     gender : "男",
     age : 24,
     say : function() {
       alert(this.name + " , " + this.gender + " ,今年" + this.age);                
        }
     }
     var xh = {
       name : "小红",
       gender : "女",
       age : 18
       }
     xw.say();

显示的肯定是小王 , 男 , 今年24。
那么如何用xw的say方法来显示xh的数据呢。
对于call可以这样:

xw.say.call(xh);

对于apply可以这样:

xw.say.apply(xh);

而对于bind来说需要这样:

xw.say.bind(xh)();

如果直接写xw.say.bind(xh)是不会有任何结果的,看到区别了吗?call和apply都是对函数的直接调用,而bind方法返回的仍然是一个函数,因此后面还需要()来进行调用才可以。
那么call和apply有什么区别呢?我们把例子稍微改写一下。

var xw = {
            name : "小王",
            gender : "男",
            age : 24,
            say : function(school,grade) {
                alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);                
            }
        }
        var xh = {
            name : "小红",
            gender : "女",
            age : 18
        }

可以看到say方法多了两个参数,我们通过call/apply的参数进行传参。
对于call来说是这样的

xw.say.call(xh,"实验小学","六年级");

而对于apply来说是这样的

xw.say.apply(xh,["实验小学","六年级"]);

看到区别了吗,call后面的参数与say方法中是一一对应的,而apply的第二个参数是一个数组,数组中的元素是和say方法中一一对应的,这就是两者最大的区别。
那么bind怎么传参呢?它可以像call那样传参。

xw.say.bind(xh,"实验小学","六年级")();

但是由于bind返回的仍然是一个函数,所以我们还可以在调用的时候再进行传参。

xw.say.bind(xh)("实验小学","六年级");

以上就是javascript中call,apply,bind的区别详解的详细内容,更多关于JavaScript call,apply,bind的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
JavaScript实现Flash炫光波动特效
May 14 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
May 05 Javascript
Javascript中级语法快速入手
Jul 30 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
Vuex的初探与实战小结
Nov 26 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 Javascript
vue离开当前页面触发的函数代码
Sep 01 Javascript
electron踩坑之remote of undefined的解决
Oct 06 Javascript
使用js获取身份证年龄的示例代码
Dec 11 #Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 #Vue.js
node koa2 ssr项目搭建的方法步骤
Dec 11 #Javascript
uni-app 自定义底部导航栏的实现
Dec 11 #Javascript
微信小程序实现音乐播放页面布局
Dec 11 #Javascript
JS实现可以用键盘方向键控制的动画
Dec 11 #Javascript
JS实现京东商品分类侧边栏
Dec 11 #Javascript
You might like
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
简单的php新闻发布系统教程
2014/05/09 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
Js与下拉列表处理问题解决
2014/02/13 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
javascript常用的方法整理
2015/08/20 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
Python如何读取文件中图片格式
2020/01/13 Python
使用Pytorch搭建模型的步骤
2020/11/16 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
潘多拉珠宝英国官方网上商店:PANDORA英国
2018/06/12 全球购物
请说出你所知道的线程同步的方法
2013/04/19 面试题
外语专业毕业生自我评价分享
2013/10/05 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
内勤岗位职责
2015/02/10 职场文书
员工工作表扬信
2015/05/05 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
spring boot中nativeQuery的用法
2021/07/26 Java/Android
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫