浅谈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:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
纯css+js写的一个简单的tab标签页带样式
Jan 28 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
Jul 10 Javascript
ES6中class类用法实例浅析
Apr 06 Javascript
layui.js实现的表单验证功能示例
Nov 15 Javascript
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
小程序scroll-view组件实现滚动的示例代码
Sep 20 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
Apr 22 Javascript
通过vue写一个瀑布流插件代码实例
Sep 07 Javascript
react组件基本用法示例小结
Apr 27 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
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
dedecms系统常用术语汇总
2007/04/03 PHP
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
PHP强制转化的形式整理
2020/05/22 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
javascript读取xml
2006/11/04 Javascript
javascript中length属性的探索
2011/07/31 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
jquery获取div距离窗口和父级dv的距离示例
2013/10/10 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
2018/10/30 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
JavaScript十大取整方法实例教程
2020/12/03 Javascript
Python3访问并下载网页内容的方法
2015/07/28 Python
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
使用Python3制作TCP端口扫描器
2017/04/17 Python
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
详解Python time库的使用
2019/10/10 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
行风评议整改报告
2014/11/06 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
Go获取两个时区的时间差
2022/04/20 Golang
springboot实现string转json json里面带数组
2022/06/16 Java/Android