說到apply/call/bind，必須首先提一下this，因?yàn)檫@三者的根本作用就是改變函數(shù)運(yùn)行時的this指向，所以要想說清它們，必須先說清this
以下是函數(shù)的調(diào)用方法：
- 方法調(diào)用模式：當(dāng)一個函數(shù)被保存為對象的一個屬性時，我們稱它為對象的一個方法，如果調(diào)用表達(dá)式包含一個提取屬性的動作，那么它就是被當(dāng)做一個方法來調(diào)用,此時的this被綁定到這個對象。
var a = 1
var obj1 = {
a:2,
fn:function(){
console.log(this.a)
}
}
obj1.fn()//2
此時的this是指obj1這個對象，事實(shí)上誰調(diào)用這個函數(shù)，this就是誰,補(bǔ)充一下，DOM對象綁定事件也屬于方法調(diào)用模式，因此它綁定的this就是事件源DOM對象
- 函數(shù)調(diào)用模式：就是普通函數(shù)的調(diào)用，此時的this被綁定到window
- 最最普通的函數(shù)調(diào)用
function fn1(){
console.log(this)//window
}
fn1()
- 函數(shù)嵌套
function fn1(){
function fn2(){
console.log(this)//window
}
fn2()
}
fn1()
- 把函數(shù)賦值之后再調(diào)用
var a = 1
var obj1 = {
a:2,
fn:function(){
console.log(this.a)
}
}
var fn1 = obj1.fn
fn1()//1
此時fn1就是不帶任何修飾的函數(shù)調(diào)用，因此它的this綁定的就是window，它也被稱為隱性綁定
- 回調(diào)函數(shù)
這上面的函數(shù)是一個回調(diào)函數(shù)，先簡單的拆分一下，
var a = 1
function f1(fn){
fn()
console.log(a)//1
}
f1(f2)
function f2(){
var a = 2
}
簡單分析一下f1的運(yùn)行,
//參數(shù)的隱性賦值
var fn = undefined
fn = f2
fn()
有沒有很熟悉的感覺，其實(shí)這又回到了第三種情況，因此最后的a打印出的是全局的a，因此回調(diào)函數(shù)綁定的也是全局的this，借此，我們終于可以解釋為什么setTimeout總是丟失this了，因?yàn)樗簿褪且粋€回調(diào)函數(shù)，而已。
setTimeout(function() {
console.log(this)//window
function fn(){
console.log(this)//window
}
fn()
}, 0);
- 構(gòu)造器調(diào)用模式:如果一個函數(shù)前面帶上new來調(diào)用，那么背地里會將創(chuàng)建一個連接到prototype成員的新對象，同時this會被綁定到那個新對象上
function Person(name,age){
// 這里的this都指向?qū)嵗? this.name = name
this.age = age
this.sayAge = function(){
console.log(this.age)
}
}
var dcbryant = new Person('dcbryant',22)
dcbryant.sayAge()//22
- Apply調(diào)用模式
說了那么多，終于提到我們的主角apply了，apply方法讓我們構(gòu)建一個參數(shù)數(shù)組給調(diào)用函數(shù)，它也允許我們選擇this的值，apply接受兩個參數(shù)，第一個是要綁定給this的值，第二個就是一個參數(shù)數(shù)組。當(dāng)?shù)谝粋€參數(shù)為null、undefined的時候，默認(rèn)指向window
var arr = [1,2,3,89,46]
var max = Math.max.apply(null,arr)//89
前面的模式this都是被指定的，而這個方法可就厲害了，由我們自己掌控的this的指向，將this指向改為apply第一個參數(shù)即可，那我們不得不懷疑一下其他的模式是不是瀏覽器自己幫我們apply的呢？所以我們又可以這么理解：
obj1.fn()
obj1.fn.apply(obj1);
fn1()
fn1.apply(null)
f1(f2)
f1.call(null,f2)//call和apply的作用一樣，只是第二個參數(shù)稍有不同
這樣一來this的謎題終于大白于天下了，apply函數(shù)的作用就是動態(tài)的改變this上下文，那apply、call、bind三者有什么異同呢？
先說說apply、call，其實(shí)這兩者大同小異，他們除了第二個參數(shù)有些差異，其他都是一樣的，call接受的是若干個參數(shù)的列表，而apply接受的一個包含多個參數(shù)的數(shù)組或者類數(shù)組。
再說說apply、call和bind，call和apply改變了函數(shù)的this上下文后便執(zhí)行該函數(shù),而bind則是返回改變了上下文后的一個函數(shù),靜態(tài)綁定函數(shù)執(zhí)行上下文的this屬性，并且不隨函數(shù)的調(diào)用方式而變化,知道了bind的作用，不如我們自己來實(shí)現(xiàn)一個：
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的函數(shù)還可以作為構(gòu)造函數(shù)，那么綁定后的函數(shù)用這種方式調(diào)用時，情況就比較微妙了，需要涉及到原型鏈的傳遞
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
}
設(shè)置一個中轉(zhuǎn)構(gòu)造函數(shù)F，使綁定后的函數(shù)與調(diào)用bind()的函數(shù)處于同一原型鏈上，用new操作符調(diào)用綁定后的函數(shù)，返回的對象也能正常使用instanceof
最后說說主要應(yīng)用場景：
1.求數(shù)組中的最大和最小值
var arr = [1,2,3,89,46]
var max = Math.max.apply(null,arr)//89
var min = Math.min.apply(null,arr)//1
2.將類數(shù)組轉(zhuǎn)化為數(shù)組
var trueArr = Array.prototype.slice.call(arrayLike)
3.數(shù)組追加
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都指向?qū)嵗? this.name = name
this.age = age
this.sayAge = function(){
console.log(this.age)
}
}
function Boy(){
Person.apply(this,arguments)//將父元素所有方法在這里執(zhí)行一遍就繼承了
}
var dcbryant = new Boy('dcbryant',22)
6.使用 log 代理 console.log
function log(){
console.log.apply(console, arguments);
};
參考鏈接：
js中call、apply、bind那些事
Javascript中bind()方法的使用與實(shí)現(xiàn)
