浅谈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 自动完成脚本整理(33个)
Oct 20 Javascript
JS Map 和 List 的简单实现代码
Jul 08 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
vue动态生成dom并且自动绑定事件
Apr 19 Javascript
详解Vue中状态管理Vuex
May 11 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
解决vue热替换失效的根本原因
Sep 19 Javascript
vue中的适配px2rem示例代码
Nov 19 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 Javascript
localstorage实现带过期时间的缓存功能
Jun 28 Javascript
使用layui的layer组件做弹出层的例子
Sep 27 Javascript
Node配合WebSocket做多文件下载以及进度回传
Nov 07 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小教程之实现链表
2014/06/09 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
SUN的《AJAX与J2EE》全文译了
2007/02/23 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
Node.js使用Angular简单示例
2018/05/11 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
企划主管岗位职责
2013/12/12 职场文书
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
优秀员工演讲稿
2014/05/19 职场文书
经典演讲稿开场白
2014/08/25 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
国庆节慰问信
2015/02/15 职场文书
毕业实习感受与体会
2015/05/26 职场文书
党员干部学习心得体会
2016/01/23 职场文书
怎样写好工作计划
2019/04/10 职场文书
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
Java集成swagger文档组件
2021/06/28 Java/Android