浅谈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 相关文章推荐
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
JS实现按钮添加背景音乐示例代码
Oct 17 Javascript
javascript中join方法实例讲解
Feb 21 Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 Javascript
vue实现将一个数组内的相同数据进行合并
Nov 07 Javascript
JavaScript 声明私有变量的两种方式
Feb 05 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
如何使用PHP中的字符串函数
2006/10/09 PHP
php+mysqli使用面向对象方式查询数据库实例
2015/01/29 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
让Firefox支持event对象实现代码
2009/11/07 Javascript
javascript中的array数组使用技巧
2010/01/31 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2012/01/21 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
js控制div弹出层实现方法
2015/05/11 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
jquery获取所有选中的checkbox实现代码
2016/05/26 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
JS实现简易贪吃蛇游戏
2020/08/24 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
微信小程序组件生命周期的踩坑记录
2021/03/03 Javascript
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
python类继承用法实例分析
2015/05/27 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
2018/12/17 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
化妆品活动策划方案
2014/05/23 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书
python中的random模块和相关函数详解
2022/04/22 Python