转---深刻浅出妙用 Javascript 中 apply、call、bind

做者：伯乐在线专栏做者 - chokcoco

若有好文章投稿，请点击 → 这里了解详情

如需转载，发送「转载」二字查看说明

 

这篇文章实在是很难下笔，由于网上相关文章不胜枚举。

 

巧合的是前些天看到阮老师的一篇文章的一句话：

“对我来讲，博客首先是一种知识管理工具，其次才是传播工具。个人技术文章，主要用来整理我还不懂的知识。我只写那些我尚未彻底掌握的东西，那些我精通的东西，每每没有动力写。炫耀历来不是个人动机，好奇才是。"

 

对于这句话，不能赞同更多，也让我下决心好好写这篇，网上文章虽多，大多复制粘贴，且晦涩难懂，我但愿可以经过这篇文章，可以清晰的提高对apply、call、bind的认识，而且列出一些它们的妙用加深记忆。

 

apply、call

 

在 javascript 中，call 和 apply 都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向。

 

JavaScript 的一大特色是，函数存在「定义时上下文」和「运行时上下文」以及「上下文是能够改变的」这样的概念。

 

先来一个栗子：

 

function fruits() {}

 

fruits.prototype = {

color: "red",

say: function() {

console.log("My color is " + this.color);

}

}

 

var apple = new fruits;

apple.say(); //My color is red

 

可是若是咱们有一个对象banana= {color : "yellow"} ,咱们不想对它从新定义 say 方法，那么咱们能够经过 call 或 apply 用 apple 的 say 方法：

 

banana = {

color: "yellow"

}

apple.say.call(banana); //My color is yellow

apple.say.apply(banana); //My color is yellow

 

因此，能够看出 call 和 apply 是为了动态改变 this 而出现的，当一个 object 没有某个方法（本栗子中banana没有say方法），可是其余的有（本栗子中apple有say方法），咱们能够借助call或apply用其它对象的方法来操做。

 

apply、call 的区别

 

对于 apply、call 两者而言，做用彻底同样，只是接受参数的方式不太同样。例如，有一个函数定义以下：

 

var func = function(arg1, arg2) {

 

};

 

就能够经过以下方式来调用：

 

func.call(this, arg1, arg2);

func.apply(this, [arg1, arg2])

 

其中 this 是你想指定的上下文，他能够是任何一个 JavaScript 对象(JavaScript 中一切皆对象)，call 须要把参数按顺序传递进去，而 apply 则是把参数放在数组里。　　

 

JavaScript 中，某个函数的参数数量是不固定的，所以要说适用条件的话，当你的参数是明确知道数量时用 call 。

 

而不肯定的时候用 apply，而后把参数 push 进数组传递进去。当参数数量不肯定时，函数内部也能够经过 arguments 这个数组来遍历全部的参数。

 

为了巩固加深记忆，下面列举一些经常使用用法：

 

一、数组之间追加

 

var array1 = [12 , "foo" , {name "Joe"} , -2458];

var array2 = ["Doe" , 555 , 100];

Array.prototype.push.apply(array1, array2);

/* array1 值为 [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */

 

二、获取数组中的最大值和最小值

 

var numbers = [5, 458 , 120 , -215 ];

var maxInNumbers = Math.max.apply(Math, numbers), //458

maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458

 

number 自己没有 max 方法，可是 Math 有，咱们就能够借助 call 或者 apply 使用其方法。

 

三、验证是不是数组（前提是toString()方法没有被重写过）

 

functionisArray(obj){

    returnObject.prototype.toString.call(obj) === '[object Array]' ;

}

 

四、类（伪）数组使用数组方法

 

var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));

 

Javascript中存在一种名为伪数组的对象结构。比较特别的是 arguments 对象，还有像调用 getElementsByTagName , document.childNodes 之类的，它们返回NodeList对象都属于伪数组。不能应用 Array下的 push , pop 等方法。

 

可是咱们能经过 Array.prototype.slice.call 转换为真正的数组的带有 length 属性的对象，这样 domNodes 就能够应用 Array 下的全部方法了。

 

深刻理解运用apply、call

 

下面就借用一道面试题，来更深刻的去理解下 apply 和 call 。

 

定义一个 log 方法，让它能够代理 console.log 方法，常见的解决方法是：

 

function log(msg)　{

    console.log(msg);

}

log(1); //1

log(1,2); //1

 

上面方法能够解决最基本的需求，可是当传入参数的个数是不肯定的时候，上面的方法就失效了，这个时候就能够考虑使用 apply 或者 call，注意这里传入多少个参数是不肯定的，因此使用apply是最好的，方法以下：

 

function log(){

    console.log.apply(console, arguments);

};

log(1); //1

log(1,2); //1 2

 

接下来的要求是给每个 log 消息添加一个"(app)"的前辍，好比：

 

log("hello world"); //(app)hello world

 

该怎么作比较优雅呢?这个时候须要想到arguments参数是个伪数组，经过 Array.prototype.slice.call 转化为标准数组，再使用数组方法unshift，像这样：

 

function log(){

    var args = Array.prototype.slice.call(arguments);

    args.unshift('(app)');

 

    console.log.apply(console, args);

};

 

bind

 

说完了 apply 和 call ，再来讲说bind。bind() 方法与 apply 和 call 很类似，也是能够改变函数体内 this 的指向。

 

MDN的解释是：bind()方法会建立一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以建立它时传入 bind()方法的第一个参数做为 this，传入 bind() 方法的第二个以及之后的参数加上绑定函数运行时自己的参数按照顺序做为原函数的参数来调用原函数。

 

直接来看看具体如何使用，在常见的单体模式中，一般咱们会使用 _this , that , self 等保存 this ，这样咱们能够在改变了上下文以后继续引用到它。 像这样：

 

var foo = {

bar : 1,

eventBind: function(){

var _this = this;

$('.someClass').on('click',function(event) {

/* Act on the event */

console.log(_this.bar); //1

});

}

}

 

因为 Javascript 特有的机制，上下文环境在 eventBind:function(){ } 过渡到 $('.someClass').on('click',function(event) { }) 发生了改变，上述使用变量保存 this 这些方式都是有用的，也没有什么问题。固然使用 bind() 能够更加优雅的解决这个问题：

 

var foo = {

bar : 1,

eventBind: function(){

$('.someClass').on('click',function(event) {

/* Act on the event */

console.log(this.bar); //1

}.bind(this));

}

}

 

在上述代码里，bind() 建立了一个函数，当这个click事件绑定在被调用的时候，它的 this 关键词会被设置成被传入的值（这里指调用bind()时传入的参数）。所以，这里咱们传入想要的上下文 this(其实就是 foo )，到 bind() 函数中。而后，当回调函数被执行的时候， this 便指向 foo 对象。再来一个简单的栗子：

 

var bar = function(){

console.log(this.x);

}

 

bar(); // undefined

var func = bar.bind(foo);

func(); // 3

 

这里咱们建立了一个新的函数 func，当使用 bind() 建立一个绑定函数以后，它被执行的时候，它的 this 会被设置成 foo ， 而不是像咱们调用 bar() 时的全局做用域。

 

有个有趣的问题，若是连续 bind() 两次，亦或者是连续 bind() 三次那么输出的值是什么呢？像这样：

 

var bar = function(){

console.log(this.x);

}

var foo = {

x:3

}

var sed = {

x:4

}

var func = bar.bind(foo).bind(sed);

func(); //?

 

var fiv = {

x:5

}

var func = bar.bind(foo).bind(sed).bind(fiv);

func(); //?

 

答案是，两次都仍将输出 3 ，而非期待中的 4 和 5 。缘由是，在Javascript中，屡次 bind() 是无效的。更深层次的缘由， bind() 的实现，至关于使用函数在内部包了一个 call / apply ，第二次 bind() 至关于再包住第一次 bind() ,故第二次之后的 bind 是没法生效的。

 

apply、call、bind比较

 

那么 apply、call、bind 三者相比较，之间又有什么异同呢？什么时候使用 apply、call，什么时候使用 bind 呢。简单的一个栗子：

 

var obj = {

x: 81,

};

 

var foo = {

getX: function() {

return this.x;

}

}

 

console.log(foo.getX.bind(obj)()); //81

console.log(foo.getX.call(obj)); //81

console.log(foo.getX.apply(obj)); //81

 

三个输出的都是81，可是注意看使用 bind() 方法的，他后面多了对括号。

 

也就是说，区别是，当你但愿改变上下文环境以后并不是当即执行，而是回调执行的时候，使用 bind() 方法。而 apply/call 则会当即执行函数。

 

再总结一下：

 

• apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；

• apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；

• apply 、 call 、bind 三者均可以利用后续参数传参；

• bind是返回对应函数，便于稍后调用；apply、call则是当即调用 。

 

本文实例出现的全部代码，在个人github上能够下载。