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 相关文章推荐
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
Jan 27 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
Aug 18 Javascript
关于Javascript 对象(object)的prototype
May 09 Javascript
Javascript冒泡排序算法详解
Dec 03 Javascript
JavaScript实现拖拽网页内元素的方法
Apr 15 Javascript
JQuery实现的图文自动轮播效果插件
Jun 19 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 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环形链表实现方法示例
2017/09/15 PHP
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
2016/07/25 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
微信小程序加载更多 点击查看更多
2016/11/29 Javascript
微信小程序 欢迎界面开发的实例详解
2016/11/30 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
bootstrap confirmation按钮提示组件使用详解
2017/08/22 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
Vue开发中遇到的跨域问题及解决方法
2020/02/11 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
python处理html转义字符的方法详解
2016/07/01 Python
Python反射用法实例简析
2017/12/22 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
django 信号调度机制详解
2019/07/19 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
采购人员的个人自我评价
2014/01/16 职场文书
上课看小说检讨书
2014/02/22 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
2014年团队工作总结
2014/11/24 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
2019各种承诺书范文
2019/06/24 职场文书
MySQL中你可能忽略的COLLATION实例详解
2021/05/12 MySQL
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android