简单分析apply、call、bind

apply & call & bind

在 js中call/apply，都是为了改变函数运行的上下文(context)，而存在的，也就是改变了函数体内部的this指向。

1.call/apply的作用及原理

先看一个栗子：

function foo(){}

foo.prototype = {
    color:'red',
    size:18,
    say:function(){
        console.log('my color is' + this.color);
        console.log('my size is' + this.size);
    }
}

var apply = new foo;
apply.say() // my color is red  //  my size is 18

如果我有个对象

myColor = {
    color:blue
}

想使用上面foo对象的say方法就可以借助 call/apply:

var resCall = apple.say.call(myColor);     //my color is blue  // my size is undefined
console.log(myColor)         // {color:red}
console.log(resCall)         // undefined

var resApply = apple.say.apply(myColor);    //my color is blue  // my size is undefined
console.log(myColor)         // {color:red}
console.log(resApply)         // undefined

通过上面的栗子，我们可以看到call/apply的实现效果是完全一样的，他们的作用就是改变了this的指向。

2.call/apply的区别

两者的区别其实就在传参的方式上面，先看一个栗子:

    var foo = function (arg1,arg2){};
    

我们可以这么来调用

foo.call(this,arg1,arg2);
foo.apply(this,[arg1,arg2]);

这里的this指定的是当前的上下文，call是按照规定的顺序去传递参数，apply是以数组的形式去传递参数。

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

而不确定的时候用 apply，然后把参数 push 进数组传递进去。当参数数量不确定时，函数内部也可以通过 arguments 这个伪数组来遍历所有的参数。

下面是一些高频用法：

// 数组的合并
var a = [1,2,3,4,{A,B}]
var b = [a,b,c]
Array.prototype.push.apply(a,b)          // [1,2,3,4,{A,B},a,b,c]

// 获取数组中的最大值和最小值
var number = [1,0,4,-2,5]
var maxNum = Math.max.apply(Math,number)    // 5

var maxNum = Math.max.call(Math,1,0,4,-2,5)     // 5 

// 验证是否是数组
function isArray(obj){
    return Object.prototype.toString.call(obj) === '[Object Array]'
}

// 类（伪）数组使用数组方法
Array.prototype.slice.call(document.getElementsByTagName('*'));

常见类（伪）数组： arguments, getElementsByTagName , document.childNodes ...etc

3.bind 的使用

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

// 简单的定义一个log()代替原来的console.log()
var log = console.log.bind(console);
log('aaa')      // aaa
log = console.log.bind(console,111);
log('aaa')      // 111 aaa
log = console.log.bind(console,[111,'bbb']);
log('aaa')      // [111,'bbb'] aaa

上面的栗子可以看出 bind的传参的方式类似于call,他和call,apply不一样的是会创建一个新的函数，需要手动去调用，bind的时候传递的参数优先去调用的时候传入。