javascript中apply、call和bind的使用区别


Posted in Javascript onApril 05, 2016

在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可以这样:

1.xw.say.call(xh);

对于apply可以这样:

1.xw.say.apply(xh);

而对于bind来说需要这样:

1.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来说是这样的

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

而对于apply来说是这样的

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

看到区别了吗,call后面的参数与say方法中是一一对应的,而apply的第二个参数是一个数组,数组中的元素是和say方法中一一对应的,这就是两者最大的区别。

那么bind怎么传参呢?它可以像call那样传参。

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

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

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

以上这篇javascript中apply、call和bind的使用区别就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery替换table中的内容并显示进度条的代码
Aug 02 Javascript
JS验证邮箱格式是否正确的代码
Dec 05 Javascript
jquery实现显示已选用户
Jul 21 Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 Javascript
浅析JS抽象工厂模式
Dec 14 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 Javascript
vue el-table实现自定义表头
Dec 11 Javascript
VSCode launch.json配置详细教程
Jun 18 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 Javascript
JavaScript数组去重的两种方法推荐
Apr 05 #Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 #Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 #Javascript
JS中的forEach、$.each、map方法推荐
Apr 05 #Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 #Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 #Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 #Javascript
You might like
一个PHP的String类代码
2010/04/20 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
javascript算法学习(直接插入排序)
2011/04/12 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
[02:33]2018DOTA2亚洲邀请赛赛前采访——LGD
2018/04/04 DOTA
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
python实现mysql的读写分离及负载均衡
2018/02/04 Python
python range实例用法分享
2020/02/06 Python
python绘制封闭多边形教程
2020/02/18 Python
执行Python程序时模块报错问题
2020/03/26 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
医学生实习自我鉴定
2013/09/27 职场文书
餐厅考勤管理制度
2014/01/28 职场文书
捐款倡议书范文
2014/02/02 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
小学社会实践活动总结
2014/07/03 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
党员教师个人对照检查材料(群众路线)
2014/09/26 职场文书
房屋所有权证明
2014/10/20 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python