浅谈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 相关文章推荐
jquery $.ajax相关用法分享
Mar 16 Javascript
基于jQuery实现图片的前进与后退功能
Apr 24 Javascript
js 动态加载事件的几种方法总结
Dec 25 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
浅谈js中变量初始化
Feb 03 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
详解ECharts使用心得总结
Dec 06 Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 Javascript
浅谈Webpack自动化构建实践指南
Dec 18 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 Javascript
vue 本地环境跨域请求proxyTable的方法
Sep 19 Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 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调用三种数据库的方法(1)
2006/10/09 PHP
深入php var_dump()函数的详解
2013/06/05 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
Javascript图像处理思路及实现代码
2012/12/25 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
DOM事件探秘篇
2017/02/15 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
Python 的内置字符串方法小结
2016/03/15 Python
Python+matplotlib+numpy绘制精美的条形统计图
2018/01/02 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
基于Python安装pyecharts所遇的问题及解决方法
2019/08/12 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
Django使用rest_framework写出API
2020/05/21 Python
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
食品营养与检测应届生求职信
2013/11/08 职场文书
投资协议书范本
2014/04/21 职场文书
重点工程汇报材料
2014/08/27 职场文书
电工实训报告总结
2014/11/05 职场文书
员工工作能力评语
2014/12/31 职场文书
世界气象日活动总结
2015/02/27 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
师德承诺书2015
2015/04/28 职场文书
2015年小学二年级班主任工作总结
2015/05/21 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书