浅谈javascript中的call、apply、bind


Posted in Javascript onMarch 06, 2016

在JavaScript中,call、apply和bind 是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向,从而可以达到`接花移木`的效果。本文将对这三个方法进行详细的讲解,并列出几个经典应用场景。 

call(thisArgs [,args...])

该方法可以传递一个thisArgs参数和一个参数列表,thisArgs指定了函数在运行期的调用者,也就是函数中的this对象,而参数列表会被传入调用函数中。thisArgs的取值有以下4种情况:

(1) 不传,或者传null,undefined, 函数中的this指向window对象

(2) 传递另一个函数的函数名,函数中的this指向这个函数的引用

(3) 传递字符串、数值或布尔类型等基础类型,函数中的this指向其对应的包装对象,如 String、Number、Boolean

(4) 传递一个对象,函数中的this指向这个对象

function a(){
 console.log(this); //输出函数a中的this对象
}
function b(){} //定义函数b

var obj = {name:'onepixel'}; //定义对象obj

a.call(); //window
a.call(null); //window
a.call(undefined);//window
a.call(1); //Number
a.call(''); //String
a.call(true); //Boolean
a.call(b);// function b(){}
a.call(obj); //Object

这是call的核心功能,它允许你在一个对象上调用该对象没有定义的方法,并且这个方法可以访问该对象中的属性,至于这样做有什么好处,我待会再讲,我们先看一个简单的例子:

var a = {

 name:'onepixel', //定义a的属性

 say:function(){ //定义a的方法
  console.log("Hi,I'm function a!");
 }
};

function b(name){
 console.log("Post params: "+ name);
 console.log("I'm "+ this.name);
 this.say();
}

b.call(a,'test');
>>
Post params: test
I'm onepixel
I'm function a!

当执行b.call时,字符串`test`作为参数传递给了函数b,由于call的作用,函数b中的this指向了对象a, 因此相当于调用了对象a上的函数b,而实际上a中没有定义b 。

apply(thisArgs[,args[]])

apply和call的唯一区别是第二个参数的传递方式不同,apply的第二个参数必须是一个数组,而call允许传递一个参数列表。值得你注意的是,虽然apply接收的是一个参数数组,但在传递给调用函数时,却是以参数列表的形式传递,我们看个简单的例子:

function b(x,y,z){
 console.log(x,y,z);
}

b.apply(null,[1,2,3]); // 1 2 3

apply的这个特性很重要,我们会在下面的应用场景中提到这个特性。

bind(thisArgs [,args...])

bind是ES5新增的一个方法,它的传参和call类似,但又和call/apply有着显著的不同,即调用call或apply都会自动执行对应的函数,而bind不会执行对应的函数,只是返回了对函数的引用。粗略一看,bind似乎比call/apply要落后一些,那ES5为什么还要引入bind呢?

其实,ES5引入bind的真正目的是为了弥补call/apply的不足,由于call/apply会对目标函数自动执行,从而导致它无法在事件绑定函数中使用,因为事件绑定函数不需要我们手动执行,它是在事件被触发时由JS内部自动执行的。而bind在实现改变函数this的同时又不会自动执行目标函数,因此可以完美的解决上述问题,看一个例子就能明白:

var obj = {name:'onepixel'};

/**
 * 给document添加click事件监听,并绑定onClick函数
 * 通过bind方法设置onClick的this为obj,并传递参数p1,p2
 */
document.addEventListener('click',onClick.bind(obj,'p1','p2'),false);

//当点击网页时触发并执行
function onClick(a,b){
 console.log(
   this.name, //onepixel
   a, //p1
   b //p2
 )
}

当点击网页时,onClick被触发执行,输出onepixel p1 p2, 说明onClick中的this被bind改变成了obj对象,为了对bind进行深入的理解,我们来看一下bind的polyfill实现:

if (!Function.prototype.bind) {
 Function.prototype.bind = function (oThis) {
  var aArgs = Array.prototype.slice.call(arguments, 1),
   fToBind = this, //this在这里指向的是目标函数
   fBound = function () {
    return fToBind.apply(
     //如果外部执行var obj = new fBound(),则将obj作为最终的this,放弃使用oThis
     this instanceof fToBind
       ? this //此时的this就是new出的obj
       : oThis || this, //如果传递的oThis无效,就将fBound的调用者作为this

     //将通过bind传递的参数和调用时传递的参数进行合并,并作为最终的参数传递
     aArgs.concat(Array.prototype.slice.call(arguments)));
   };

  //将目标函数的原型对象拷贝到新函数中,因为目标函数有可能被当作构造函数使用
  fBound.prototype = this.prototype;

  //返回fBond的引用,由外部按需调用
  return fBound;
 };
}

应用场景一:继承

大家知道,JavaScript中没有诸如Java、C#等高级语言中的extend 关键字,因此JS中没有继承的概念,如果一定要继承的话,call和apply可以实现这个功能:

function Animal(name,weight){
 this.name = name;
 this.weight = weight;
}

function Cat(){
 Animal.call(this,'cat','50');
 //Animal.apply(this,['cat','50']);

 this.say = function(){
  console.log("I am " + this.name+",my weight is " + this.weight);
 }
}

var cat = new Cat();
cat.say();//I am cat,my weight is 50

当通过new运算符产生了cat时,Cat中的this就指向了cat对象,而继承的关键是在于Cat中执行了Animal.call(this,'cat','50') 这句话,在call中将this作为thisArgs参数传递,于是Animal方法中的this就指向了Cat中的this,而cat中的this指向的是cat对象,所以Animal中的this指向的就是cat对象,在Animal中定义了name和weight属性,就相当于在cat中定义了这些属性,因此cat对象便拥有了Animal中定义的属性,从而达到了继承的目的。 

应用场景二:移花接木

在讲下面的内容之前,我们首先来认识一下JavaScript中的一个非标准专业术语:ArrayLike(类数组/伪数组)

ArrayLike 对象即拥有数组的一部分行为,在DOM中早已表现出来,而jQuery的崛起让ArrayLike在JavaScript中大放异彩。ArrayLike对象的精妙在于它和JS原生的Array类似,但是它是自由构建的,它来自开发者对JavaScript对象的扩展,也就是说:对于它的原型(prototype)我们可以自由定义,而不会污染到JS原生的Array。

ArrayLike对象在JS中被广泛使用,比如DOM中的NodeList, 函数中的arguments都是类数组对象,这些对象像数组一样存储着每一个元素,但它没有操作数组的方法,而我们可以通过call将数组的某些方法`移接`到ArrayLike对象,从而达到操作其元素的目的。比如我们可以这样遍历函数中的arguments:

function test(){
 //检测arguments是否为Array的实例
 console.log(
   arguments instanceof Array, //false
   Array.isArray(arguments) //false
 );
 //判断arguments是否有forEach方法
 console.log(arguments.forEach); //undefined

 // 将数组中的forEach应用到arguments上
 Array.prototype.forEach.call(arguments,function(item){
  console.log(item); // 1 2 3 4
 });

}
test(1,2,3,4);

除此之外,对于apply而言,我们上面提到了它独有的一个特性,即apply接收的是数组,在传递给调用函数的时候是以参数列表传递的。 这个特性让apply看起来比call 略胜一筹,比如有这样一个场景:给定一个数组[1,3,4,7],然后求数组中的最大元素,而你知道,数组中并没有获取最大值的方法,一般情况下,你需要通过编写代码来实现。而我们知道,Math对象中有一个获取最大值的方法,即Math.max(), max方法需要传递一个参数列表,然后返回这些参数中的最大值。而apply不仅可以将Math对象的max方法应用到其他对象上,还可以将一个数组转化为参数列表传递给max,看代码就能一目了然:

var arr = [2,3,1,5,4];

Math.max.apply(null,arr); // 5

以上便是call和apply比较经典的几个应用场景,熟练掌握这些技巧,并把这些特性应用到你的实际项目中,会使你的代码看起来更加耐人寻味!

Javascript 相关文章推荐
关于javascript function对象那些迷惑分析
Oct 24 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
Aug 30 Javascript
webpack4简单入门实例
Sep 06 Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 Javascript
React优化子组件render的使用
May 12 Javascript
微信小程序实现批量倒计时功能
Nov 01 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 Javascript
JavaScript TAB栏切换效果的示例
Nov 05 Javascript
一波JavaScript日期判断脚本分享
Mar 06 #Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 #Javascript
JavaScript实现数据类型的相互转换
Mar 06 #Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 #Javascript
javascript实现label标签跳出循环操作
Mar 06 #Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 #Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 #Javascript
You might like
PHP 日常开发小技巧
2009/09/23 PHP
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
2017/04/28 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
Vue中"This dependency was not found"问题的解决方法
2018/06/19 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
用pycharm开发django项目示例代码
2019/06/13 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
python str字符串转uuid实例
2020/03/03 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
医学专业毕业生推荐信
2013/11/14 职场文书
同学聚会欢迎辞
2014/01/14 职场文书
水利学院求职自荐书
2014/02/01 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
《鸟的天堂》教学反思
2014/02/27 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
实习计划书范文
2015/01/16 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
如何写新闻稿
2015/07/18 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers
MySQL表的增删改查(基础)
2021/04/05 MySQL