兄台息怒，关于arguments，您的想法和大神是同样同样的----闲聊JS中的apply和call

JavaScript提供了apply和call两种调用方式来肯定函数体中this的指向，表现出来的特征就是：对象能够'借用'其余对象的方法。
以前的几篇博客回顾了一些Web控件的一些开发方法，咱们聊了如何实现一个自定义的组合框，也聊了一个相对复杂一点的地址控件的开发，从上一篇开始，开始聊一些JavaScript语言自己的话题，回顾了闭包和原型继承，今天咱们就一块儿来聊聊apply和call这两种调用方式的前世此生。
固然，尽管主题在变，可是基于业务场景来剖析理论知识的写做风格不会变。
咱们仍是从一个生活中的例子提及：
小明家有水果，也有一台'果汁机'，小红家也有水果，可是没有果汁机。有一天，小红也想把水果榨成果汁来喝，这时候，小红会怎么作呢?固然就是小红能够"借"小明家的果汁机用一下，用完以后再回去，由于不用时放在本身家里还占地方，下次要用，再去借就是了，由于'互助'是JavaScript社区的美德。
咱们看看如何用JavaScript展现这种状况：

var xiaoming = {
    name:'小明',
    fruit:'橙子',
    makeJuice:function(){
        console.log( '正在榨：' + this.name + ' 家的' + this.fruit + '汁!');
    }
}
var xiaohong = {
    name:'小红',
    fruit:'苹果'
}
xiaoming.makeJuice( );                 //输出：正在榨：小明 家的橙子汁！
xiaoming.makeJuice.apply( xiaohong );  //输出：正在榨：小红 家的苹果汁！

apply方法最核心的意义就是这样，显然，若是某个函数体当中根本没有引用this，那是否是也就失去了调用apply的意义？也并不是如此，有时候还须要处理传入的参数。

进一步来看，若是调用的函数须要传递参数，那么调用apply时要如何处理呢？咱们改进一下上面的例子，假设榨果汁的时候，须要传入参数：加水的量以及要榨多长时间。
这时候该如何使用apply呢？

var xiaoming = {
    name:'小明',
    fruit:'橙子',
    makeJuice:function( water, time ){
        console.log( '正在榨：' + this.name + ' 家的' + this.fruit + '汁，加水：' + water + ' mL，用时：' + time + ' 分钟。');
    }
}
var xiaohong = {
    name:'小红',
    fruit:'苹果'
}
var task_info = [ 500 , 1 ] ;          //把要传入的参数放到一个数组里
xiaoming.makeJuice.apply( xiaohong , task_info ) ;  //输出：正在榨：小红 家的苹果汁，加水：500 mL，用时：1 分钟。

【分析】
在使用apply方式使用一个函数时：

• 第1个参数为thisObject，调用时采用传入的thisObject代替函数体中this的指向。
• 第2个参数传入一个数组，函数会用数组的值取代"参数列表"。

回到上面的例子，至关于这样的场景：

小红：小明，你帮我榨一下苹果汁吧。
小明：能够啊，你把我家的榨汁机拿去用就能够了。 用以前你得先想清楚'准备加多少水，要榨几分钟'。
小红：好的。

小红把榨汁机拿来以后，就先把'加 500mL 水，榨 1 分钟'的内容写到'纸'上，准备好原材料以后，就按'纸'上的信息操做榨汁机，避免手忙脚乱。用来写任务相关信息的'纸'就至关于在apply方式调用时用来传递参数列表信息的数组。

说到参数列表，天然就想到了arguments，在调用函数时，函数的运行时环境会自动产生一个变量arguments指向实参列表。不少资料上都会说，arguments是具备数组某些特性的'类数组'(伪数组)。那么，当使用apply方式调用函数时，传入的第2个参数是否能够是一个像arguments这样的'类数组'(伪数组)呢？
咱们再构造一个场景来验证一下，最近小区又搬来了一位王奶奶，有一天王奶奶也想喝果汁，她知道小明家有榨汁机，原本想找小明帮忙，可是小明出差了。小明跟王奶奶说，你想好了要多少许的果汁以及想打多长时间，找小红帮忙就能够了。
如今，咱们就来实现这样的场景，重点在于王奶奶求助小红的函数。

var wang = {
    name: '王奶奶',
    helpFromXiaohong: function( water , time ){
        //小红本身没有榨汁机，仍是要使用小明的榨汁机，使用apply方式调用函数
        //王奶奶的要求 与 使用榨汁机时要准备的'任务内容'彻底同样，
        //因此，这里直接传入arguments看看
        //至于水果嘛，小红固然不会向王奶奶要了，就用本身家的
        //因而，调用方式以下：
        xiaoming.makeJuice.apply( xiaohong , arguments ) ;
    }
}
wang.helpFromXiaohong( 400 , 2 ) ;   //老人家喝的量很少，可是但愿把水果打烂一点

//输出：正在榨：小红 家的苹果汁，加水：400 mL，用时：2 分钟。

发现和咱们预期的内容是彻底同样的，这就意味着，传入apply中的第二个参数，
也能够是一个'类数组'，最多见的固然就是直接将arguments传入做为第2个参数。
'类数组'的特征：

• 具备一个length成员，'表示'包含的'元素个数'。
• 可以用1，2，3等数字来检索它的成员。

到如今咱们已经对apply调用方式有了一些认识，再回到咱们平常的工做当中。咱们常常会看到这样的调用方式：

var w = Array.prototype.shift.apply( arguments );

这行代码表示什么意思也许你们都很清楚，就是将隐含的'类数组'arguments的第一个参数值取出来，而后赋给变量w。

【思考】

1. 为何不直接用arguments调用shift函数呢？

由于arguments不是真正的'数组'，从JavaScript的语言特征来讲，arguments仅仅是具备某些'数组特征'的对象。它不是经过new Array()的方式建立，它的原型链也没有链向'Array.prototype'，因此不能直接使用shift()函数。
"靠，既然是语言自带的东东，为何不直接设计成数组呢？搞得老子每次想用一下数组的相关方法还得拐个弯。"
兄台息怒，其实这样想的人并非您一我的，包括JavaScript的大师老道(Douglas Crockfod)也是这么想的，正所谓英雄所见略同。

2. 如何理解var w = Array.prototype.shift.apply( arguments );这一个语句呢？

咱们了解到，根据apply的调用模式，它会用传入的第1个参数代替函数体中的this。从这里来看，就是用arguments这个对象(具备'数组'特征的特殊对象)代替了Array.prototype.shift中的this。

咱们知道，若是用一个数组对象去调用shift是没有问题的。
例如：

console.log( ['A','B','C'].shift() ) ; //输出: A

由于在['A','B','C'].shift()的调用过程当中，没有传入任何参数，因此，能够推断Array.prototype.shift的函数体中，确定引用了this。经过对this.length 以及 this[0] 这种方式的处理来计算运算结果，

显然，这个特殊的对象arguments进行arguments.length 以及 arguments[0] 这样的使用方式是没有问题的，是能体现出它的'数组特征'的，因此，经过调用Array.prototype.shift.apply( arguments );可以得到传入的第1个参数值。

为了增长'画面感'，咱们把它放入前面王奶奶求助的函数中：

var wang = {
    name: '王奶奶',
    helpFromXiaohong: function( water , time ){
        var w = Array.prototype.shift.apply( arguments );
        console.log( '王奶奶想喝 ' + w + ' mL的果汁。' );  
        xiaoming.makeJuice.apply( xiaohong , arguments ) ;
        }
    }
   wang.helpFromXiaohong( 400 , 2 ) ;  

>指望输出:
王奶奶想喝 400 mL的果汁。
正在榨：小红 家的苹果汁，加水：400 mL，用时：2 分钟。
>实际输出:
王奶奶想喝 400 mL的果汁。
正在榨：小红 家的苹果汁，加水：2 mL，用时：undefined 分钟。

【分析】

1. 对于咱们刚才想验证的结论，发现咱们的假设是正确的。arguments对象成功'借用'了数组的shift函数，因此输出：王奶奶想喝 400 mL的果汁。
2. 可是，在下面的调用中，竟然输出的是：正在榨：小红 家的苹果汁，加水：2 mL，用时：undefined 分钟。

这个很好理解，shift函数的做用是：'弹出'数组的'第1个元素'并返回。这就意味着，通过var w = Array.prototype.shift.apply( arguments );调用以后，arguments中的内容也发生了变化，arguments[0]的值已经不是400!

这也再一次说明：

• apply的调用方式，除了替换函数体中的this的指向以外，函数的其余逻辑没有发生任何变化。'借用'的函数的效果，就跟对象本身拥有这个函数同样。
• arguments这个'相似数组'，除了不是'原型继承自'Array.prototype以外，其余的特征和数组也是同样同样的。

3. 在刚才的场景下，若是你确实须要在调用xiaoming.makeJuice.apply( xiaohong , arguments ) ;以前显示一下王奶奶想喝多少mL的果汁，直接调用var w = arguments[0]; 就能够了，何须要'弹'人家呢。

完整的例子以下：

var xiaoming = {
    name:'小明',
    fruit:'橙子',
    makeJuice:function( water, time ){
        console.log( '正在榨：' + this.name + ' 家的' + this.fruit + '汁，加水：' + water + ' mL，用时：' + time + ' 分钟。');
    }
}
var xiaohong = {
    name:'小红',
    fruit:'苹果'
}
var wang = {
    name: '王奶奶',
    helpFromXiaohong: function( water , time ){
        var w = arguments[0];
        console.log( '王奶奶想喝 ' + w + ' mL的果汁。' );  
        xiaoming.makeJuice.apply( xiaohong , arguments ) ;
        }
}
wang.helpFromXiaohong( 400 , 2 ) ;  

最后，咱们再补充说明一个特性：若是咱们在使用apply调用方式时，第1个参数传入的是null，可是，被'借用'函数的函数体自己又使用了this，那么，会不会报异常呢？由于直接写null.name这样的方式确定是不行的。这里不卖关子，先把答案搁这里。答案是：不会报异常。
话说过了几天，王奶奶又想要喝果汁了，因而又给小明打电话，可是小明还在出差啊，因而小明又叫王奶奶去找小红帮忙，另外，小明也给小红打了个电话解释状况。这回接到小明的电话，小红可有点不乐意了，心想：'小明你是什么人啊？好名声你来拿，麻烦事我去作。'尽管内心有些不爽，可是毕竟是热心肠的好女孩，王奶奶的忙仍是帮了，不过，这一回，她可就没有拿本身家的水果去榨了，而是直接用了社区的水果。

回到王奶奶的求助函数，既然不用xiaohong家的水果，就不用传入xiaohong这个对象了，传一个null试试看。

xiaoming.makeJuice.apply( xiaohong , arguments ) ;

修改成：

xiaoming.makeJuice.apply( null , arguments ) ;

而且在代码的开头增长如下变量：

var name = '社区';
var fruit = '西瓜' ;

这时候，输出的内容为：
王奶奶想喝 400 mL的果汁。
正在榨：社区 家的西瓜汁，加水：400 mL，用时：2 分钟。

也就是说，若是第一个传入的参数是null，那么，在函数体内的this会指向全局对象，在浏览器中就是window(在Chrome浏览器中是这样的效果)。很显然，若是函数体内用到了this，而你在用apply方式调用它时，给它传一个null过去，这是一种'小红同窗赌气'的行为，不是一个好的习惯。

因此，对于apply调用方式，咱们能够总结以下：

1. 若是某个函数的函数体中明显使用了this，那么，就应该传入一个明确的thisObj对象，而且这个对象应该包含相关的属性。相似于人家把'榨汁机'借给你用已经不错了，你不能本身连水果也不许备吧？
2. 若是某个函数就是'工具'类型的，那么，在使用apply调用方式时，能够传入一个null做为thisObject。相似于'水果刀'，使用时放在跕板上的水果是什么，它就切什么，跟拿着水果刀的人有什么没有半毛钱关系。

第二种状况的一个常见的使用场景是：函数的接口要求传入一个'参数列表'，但你手头只有一个数组。
例如：但愿你这样调用Math.max( 2 , 10 , 6 , 1 ); 可是，你的手头只有[2,10,6,1]这样的一个数组。
-若是直接调用Math.max([2,10,6,1]); 会输出NaN。由于Math.max会认为第一个参数[2,10,6,1]根本就不是一个number。
-或者你能够这样：

var test_array = [2,10,6,1];
Math.max( test_array[0] , test_array[1] , test_array[2] , test_array[3] );

显然，这种方式是在练习打字，而不是在编程序^_^～～

[参数列表]和[数组]，[数组]和[参数列表].......apply调用方式不就能够实现转换嘛，因此，咱们能够这样操做：

 var test_array = [2,10,6,1];
 console.log(  Math.max.apply( null , test_array ) );  //输出：10     

输出了咱们指望的结果：10，是的，当时就是这样。

若是小红也不用社区的水果，直接用小明家的水果呢？那就不须要用apply方式调用了，直接用以下方式就能够了：

xiaoming.makeJuice( arguments ) ; 

咱们再来看一下这时候的王奶奶的求助函数：

var wang = {
name: '王奶奶',
helpFromXiaohong: function( water , time ){
     var w = arguments[0];
     console.log( '王奶奶想喝 ' + w + ' mL的果汁。' ); 
     xiaoming.makeJuice( arguments ) ; 
  }
}

看函数名称是helpFromXiaohong(从小红处得到帮助)，实际上倒是xiaoming.makeJuice(小明在提供帮助)。咱们隐约感觉到了某些'设计模式'的感受。关于设计模式，咱们下次有空再聊。

今天的话题就聊到这里...

什么？尚未讲到call呢！

差点搞忘了，call方式和apply方式的差异主要体如今传入的形式参数的不同，当采用call调用的时候，第1个参数传入thisObject，第2个参数以及后面的参数组成'实参列表'传递给函数。
例如：
用apply方式调用时，咱们会这样写：

var task_info = [400,2];
xiaoming.makeJuice.apply( xiaohong , task_info ) ;

而用call方式调用时，咱们会这样写：

xiaoming.makeJuice.call( xiaohong , 400 , 2 ) 

有人说，其实call调用方式就是使用apply方式实现的，相似于给Function.prototype定义了一个成员函数call。JavaScript引擎到底如何实现，咱们无从知晓，不过从JavaScript大神老道在他的书中只字未提call方式，可见咱们只要理解了apply调用方式，而且知道apply和call在形式参数上的不一样，也许就能够了。

形式参数上的差别，咱们能够再用一个生活中的例子理解一下：

小明常常去韩国出差，小红呢，常常委托小明帮忙在韩国带一些化妆品。
往常在小明出差前，小红都会把要买的化妆品写在一个清单里(至关于：apply模式把参数值放到一个数组里)，
小明到了韩国的商场以后，只要拿出购物清单对照着买就能够了，至关于应用(apply)一下这个购物清单，这就是apply调用方式。

可是，有一次，小明由于出差时间短，就没有告诉小红，快回国到机场的时候，接到了小红的电话呼叫(call)，没错，是小红call过来的。
"死鬼，去韩国出差也不说一声！是存心躲着本姑奶奶吗？！"
"你听我解释，这不时间过短了，我立刻就回国了，如今已经快到釜山机场了。"
"如今在机场了也得给我买！你听好了我要买什么！"
"好吧，我如今去给你买，你说一下你要买什么。"
显然，小明手里头没有一个明确的购物清单，时间又那么紧，不可能先整理一张清单出来再去商场购买。
因而，小明就到商场里面，听着小红的电话，小红说一个，小明就把对应商品往购物车里放，这就是call方式。

【总结】

在本文当中，咱们解释了函数的apply调用方式的价值和使用方式，并结合常见的使用场景，解释了函数体中隐含的arguments对象的一些特征，也解释了apply调用方式的一些注意事项，最后指出了apply调用方式和call调用方式的差别。今天的话题就聊到这里，感谢诸位捧场。