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 相关文章推荐
别了 JavaScript中的isXX系列
Aug 01 Javascript
jQuery中get()方法用法实例
Dec 27 Javascript
jquery 中ajax执行的优先级
Jun 22 Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 Javascript
Bootstrap布局之栅格系统详解
Jun 13 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
shiro授权的实现原理
Sep 21 Javascript
基于webpack 实用配置方法总结
Sep 28 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 Javascript
小程序中设置缓存过期的实现方法
Jan 14 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
使用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 xml文件操作代码(一)
2009/03/20 PHP
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
thinkphp实现数组分页示例
2014/04/13 PHP
PHP函数超时处理方法
2016/02/14 PHP
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
2017/09/01 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
微信小程序控制台提示warning:Now you can provide attr "wx:key" for a "wx:for" to improve performance解决方法
2019/02/21 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
Python3学习urllib的使用方法示例
2017/11/29 Python
详解python-图像处理(映射变换)
2019/03/22 Python
pycharm如何实现跨目录调用文件
2020/02/28 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
如何用Python 加密文件
2020/09/10 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
Spartoo芬兰:欧洲最大的网上鞋店
2016/08/28 全球购物
资产评估专业大学生求职信
2013/09/29 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
社会实践活动总结格式
2015/05/11 职场文书
党小组推荐意见
2015/06/02 职场文书
手把手教你导入Go语言第三方库
2021/08/04 Golang
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL