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 相关文章推荐
封装了一个js图片轮换效果的函数
Sep 28 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
Mar 04 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
javascript实现简单的进度条
Jul 02 Javascript
canvas绘制的直线动画
Jan 23 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 Javascript
Vue-router 中hash模式和history模式的区别
Jul 24 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
vue实现移动端省市区选择
Sep 27 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下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
2017/10/26 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
仅用50行Python代码实现一个简单的代理服务器
2015/04/08 Python
详解python eval函数的妙用
2017/11/16 Python
python实现事件驱动
2018/11/21 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
惊艳的手工时装首饰:Migonne Gavigan
2018/02/23 全球购物
Java程序开发中如何应用线程
2016/03/03 面试题
护士求职推荐信范文
2013/11/23 职场文书
物流管理毕业生自荐信范文
2014/03/15 职场文书
春节联欢晚会主持词
2014/03/24 职场文书
企业标语口号
2014/06/10 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
科学发展观活动总结
2014/08/28 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
员工试用期自我评价
2014/09/18 职场文书
2015元旦联欢晚会结束语
2014/12/14 职场文书
大学生暑期实践报告
2015/07/13 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
Python可视化神器pyecharts绘制水球图
2022/07/07 Python
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技