一次性讲清楚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
- 最最普通的函数调用
function fn1(){
console.log(this)//window
}
fn1()
- 函数嵌套
function fn1(){
function fn2(){
console.log(this)//window
}
fn2()
}
fn1()
- 把函数赋值之后再调用
var a = 1
var obj1 = {
a:2,
fn:function(){
console.log(this.a)
}
}
var fn1 = obj1.fn
fn1()//1
此时fn1就是不带任何修饰的函数调用，因此它的this绑定的就是window，它也被称为隐性绑定
- 回调函数
这上面的函数是一个回调函数，先简单的拆分一下，
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);
};
