一次性讲清楚apply/call/bind

说到apply/call/bind，必须首先提一下this，因为这三者的根本作用就是改变函数运行时的this指向，所以要想说清它们，必须先说清this

以下是函数的调用方法：

• 方法调用模式：当一个函数被保存为对象的一个属性时，我们称它为对象的一个方法，如果调用表达式包含一个提取属性的动作，那么它就是被当做一个方法来调用,此时的this被绑定到这个对象。

    var a = 1
    var obj1 = {
      a:2,
      fn:function(){
        console.log(this.a)
      }
    }
    obj1.fn()//2    

此时的this是指obj1这个对象，事实上谁调用这个函数，this就是谁,补充一下，DOM对象绑定事件也属于方法调用模式，因此它绑定的this就是事件源DOM对象

• 函数调用模式：就是普通函数的调用，此时的this被绑定到window

1. 最最普通的函数调用

function fn1(){
      console.log(this)//window
    }
fn1()

2. 函数嵌套

function fn1(){
    function fn2(){
        console.log(this)//window
    }
    fn2()
}
fn1()

3. 把函数赋值之后再调用

var a = 1
var obj1 = {
    a:2,
    fn:function(){
        console.log(this.a)
    }
}
var fn1 = obj1.fn
fn1()//1

此时fn1就是不带任何修饰的函数调用，因此它的this绑定的就是window，它也被称为隐性绑定

4. 回调函数
   这上面的函数是一个回调函数，先简单的拆分一下，

var a = 1
function f1(fn){
    fn()
    console.log(a)//1
}
f1(f2)

function f2(){
    var a = 2
}

简单分析一下f1的运行,

//参数的隐性赋值
var fn = undefined
fn = f2
fn()

有没有很熟悉的感觉，其实这又回到了第三种情况，因此最后的a打印出的是全局的a，因此回调函数绑定的也是全局的this，借此，我们终于可以解释为什么setTimeout总是丢失this了，因为它也就是一个回调函数，而已。

setTimeout(function() {
    console.log(this)//window
    function fn(){
        console.log(this)//window
    }
    fn()
}, 0);

• 构造器调用模式:如果一个函数前面带上new来调用，那么背地里会将创建一个连接到prototype成员的新对象，同时this会被绑定到那个新对象上

function Person(name,age){
// 这里的this都指向实例
    this.name = name
    this.age = age
    this.sayAge = function(){
        console.log(this.age)
    }
}

var dcbryant = new Person('dcbryant',22)
dcbryant.sayAge()//22

• Apply调用模式
  说了那么多，终于提到我们的主角apply了，apply方法让我们构建一个参数数组给调用函数，它也允许我们选择this的值，apply接受两个参数，第一个是要绑定给this的值，第二个就是一个参数数组。当第一个参数为null、undefined的时候，默认指向window

var arr = [1,2,3,89,46]
var max = Math.max.apply(null,arr)//89

前面的模式this都是被指定的，而这个方法可就厉害了，由我们自己掌控的this的指向，将this指向改为apply第一个参数即可，那我们不得不怀疑一下其他的模式是不是浏览器自己帮我们apply的呢？所以我们又可以这么理解：

obj1.fn() 
obj1.fn.apply(obj1);

fn1()
fn1.apply(null)

f1(f2)
f1.call(null,f2)//call和apply的作用一样，只是第二个参数稍有不同

这样一来this的谜题终于大白于天下了，apply函数的作用就是动态的改变this上下文，那apply、call、bind三者有什么异同呢？

先说说apply、call，其实这两者大同小异，他们除了第二个参数有些差异，其他都是一样的，call接受的是若干个参数的列表，而apply接受的一个包含多个参数的数组或者类数组。

再说说apply、call和bind，call和apply改变了函数的this上下文后便执行该函数,而bind则是返回改变了上下文后的一个函数,静态绑定函数执行上下文的this属性，并且不随函数的调用方式而变化,知道了bind的作用，不如我们自己来实现一个：

Function.prototype.bind = Function.prototype.bind ||
function(context){
    var self = this
    var args = Array.prototype.slice.call(arguments, 1)
    return function(){
        var innerArgs = Array.prototype.slice.call(arguments);
        var finalArgs = args.concat(innerArgs);
        return self.apply(context,finalArgs);
    }
}

这次的bind()方法可以绑定对象，也支持在绑定的时候传参,但是Javascript的函数还可以作为构造函数，那么绑定后的函数用这种方式调用时，情况就比较微妙了，需要涉及到原型链的传递

Function.prototype.bind = Function.prototype.bind ||
function(context){
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);
    var F = function(){};

    var bound = function(){
        var innerArgs = Array.prototype.slice.call(arguments);
        var finalArgs = args.concat(innerArgs);
        return self.apply((this instanceof F ? this : context), finalArgs);
    };

    F.prototype = self.prototype;
    bound.prototype = new F();
    return bound
}

设置一个中转构造函数F，使绑定后的函数与调用bind()的函数处于同一原型链上，用new操作符调用绑定后的函数，返回的对象也能正常使用instanceof

最后说说主要应用场景：
1.求数组中的最大和最小值

var arr = [1,2,3,89,46]
var max = Math.max.apply(null,arr)//89
var min = Math.min.apply(null,arr)//1

2.将类数组转化为数组

var trueArr = Array.prototype.slice.call(arrayLike)

3.数组追加

var arr1 = [1,2,3];
var arr2 = [4,5,6];
var total = [].push.apply(arr1, arr2);//6
// arr1 [1, 2, 3, 4, 5, 6]
// arr2 [4,5,6]

4.判断变量类型

function isArray(obj){
    return Object.prototype.toString.call(obj) == '[object Array]';
}
isArray([]) // true
isArray('dcbryant') // false

5.利用call和apply做继承

function Person(name,age){
    // 这里的this都指向实例
    this.name = name
    this.age = age
    this.sayAge = function(){
        console.log(this.age)
    }
}
function Boy(){
    Person.apply(this,arguments)//将父元素所有方法在这里执行一遍就继承了
}
var dcbryant = new Boy('dcbryant',22)

6.使用 log 代理 console.log

function log(){
  console.log.apply(console, arguments);
};

参考链接：
js中call、apply、bind那些事
Javascript中bind()方法的使用与实现