浅谈javascript中call()、apply()、bind()的用法


Posted in Javascript onApril 20, 2015

call(thisObj,arg1,arg2...)、apply(thisObj,[obj1,obj2...])这二个方法是每个函数都包含的非继承的方法

call(thisobj[, args])和apply(thisobj[, args])

作用都是一样的,简单来说就是改变当前使用该方法的对象中的this指向,指向调用方法中的thisObj对象二者的区别(第一个参数是相同的)就是call方法中传入的参数是是一个个列举出来的,而apply方法中的参数二是一个数组

还是举例说明比较直观:

window.color='red';
var o={color:"blue"};
function sayColor(){
alert(this.color);
};
sayColor(); //red(全局函数,this是window)
sayColor.call(this);//red(调用call方法,指定对象是this,这里的this是window,没什么意义)
sayColor.call(window);//red(调用call方法,指定对象是window,没什么意义)
sayColor.call(o); //blue (调用call方法,指定对象是o,所以this指代对象o,这里由原来的window指向了o)
sayColor.apply(o);//blue (调用call方法,指定对象是o,所以this指代对象o,这里由原来的window指向了o)

ECMAScript5中的bind()方法和前二种方法相似,bind()这个方法会创建一个函数的实例,这个实例的this值会被绑定到传递给bind()函数的值

例子:

function a(y){
return this.x+y;
};
var o={x:1};
var g=a.bind(o);
g(2);//3

从例子中可以看出函数a绑定到对象o上了,并且返回了新的函数g,调用g时,a函数会当作对象o的方法来调用 
bind()这个方法是将函数绑定到某个对象上,并且返回一个新的函数,这个新函数中传入的参数都将传入被绑定的函数上。

下面来看看他们的区别

在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 相关文章推荐
JavaScript 比较时间大小的代码
Apr 24 Javascript
基于jquery的跨域调用文件
Nov 19 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
Sequelize中用group by进行分组聚合查询
Dec 12 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
Jun 22 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
vue.js购物车添加商品组件的方法
Sep 17 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 Javascript
javascript中callee与caller的区别分析
Apr 20 #Javascript
javascript正则表达式中的replace方法详解
Apr 20 #Javascript
javascript正则表达式基础知识入门
Apr 20 #Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 #Javascript
Javascript实现颜色rgb与16进制转换的方法
Apr 18 #Javascript
JS解析XML文件和XML字符串详解
Apr 17 #Javascript
JS设置cookie、读取cookie、删除cookie
Apr 17 #Javascript
You might like
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
php接口和抽象类使用示例详解
2014/03/02 PHP
PHP chop()函数讲解
2019/02/11 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
JS实现字符串转驼峰格式的方法
2016/12/16 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
2017/07/31 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
使用python Django做网页
2013/11/04 Python
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
python读写json文件的简单实现
2017/04/11 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
如何完美的建立一个python项目
2020/10/09 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
德国网上宠物店:Zoobio
2018/05/23 全球购物
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
广告艺术设计专业自荐书
2014/07/08 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
2014年客房部工作总结
2014/11/22 职场文书
培训班通知
2015/04/25 职场文书
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL