ES5 apply与call详解

虽然es6已经出台了不少简单的方法替代了apply和call,可是仍是有不少老大项目使用到了es5的这些方法，因此对于这些方法的掌握是有必要的

---

先回顾一下官方对apply、call的诠释

apply方法

apply 方法
应用某一对象的一个方法，用另外一个对象替换当前对象。

apply([thisObj[,argArray]])

参数
thisObj

可选项。将被用做当前对象的对象。

argArray

可选项。将被传递给该函数的参数数组。

说明
若是 argArray 不是一个有效的数组或者不是 arguments 对象，那么将致使一个 TypeError。

若是没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用做 thisObj， 而且没法被传递任何参数。

call 方法

call 方法
调用一个对象的一个方法，以另外一个对象替换当前对象。

call([thisObj[,arg1[, arg2[,   [,.argN]]]]])

参数
thisObj

可选项。将被用做当前对象的对象。

arg1, arg2,  , argN

可选项。将被传递方法参数序列。

说明
call 方法能够用来代替另外一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

若是没有提供 thisObj 参数，那么 Global 对象被用做 thisObj。

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 则是把参数放在数组里。　　
为了巩固加深记忆，下面列举一些经常使用用法：

apply、call实例

---

数组之间追加

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){ 
    return Object.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 下的全部方法了。

面试题
定义一个 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

---

在讨论bind()方法以前咱们先来看一道题目：

var altwrite = document.write;
altwrite("hello");

结果：Uncaught TypeError: Illegal invocation
altwrite()函数改变this的指向global或window对象，致使执行时提示非法调用异常，正确的方案就是使用bind()方法：

altwrite.bind(document)("hello")

固然也可使用call()方法：

altwrite.call(document, "hello")

绑定函数
bind()最简单的用法是建立一个函数，使这个函数不论怎么调用都有一样的this值。常见的错误就像上面的例子同样，将方法从对象中拿出来，而后调用，而且但愿this指向原来的对象。若是不作特殊处理，通常会丢失原来的对象。使用bind()方法可以很漂亮的解决这个问题：

this.num = 9; 
var mymodule = {
  num: 81,
  getNum: function() { 
    console.log(this.num);
  }
};

mymodule.getNum(); // 81

var getNum = mymodule.getNum;
getNum(); // 9, 由于在这个例子中，"this"指向全局对象

var boundGetNum = getNum.bind(mymodule);
boundGetNum(); // 81

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);
}
var foo = {
x:3
}
bar(); // undefined
var func = bar.bind(foo);
func(); // 3

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

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 则是当即调用 。

bind详细参考 Function.prototype.bind()