深入理解call,apply和bind
在JavaScript 中,call、apply 和 bind 是 Function 物件自帶的三個方法,這三個方法的主要作用是改變函式中的 this 指向,從而可以達到`接花移木`的效果。本文將對這三個方法進行詳細的講解,並列出幾個經典應用場景。
1、call(thisArgs [,args…])
該方法可以傳遞一個thisArgs引數和一個引數列表,thisArgs 指定了函式在執行期的呼叫者,也就是函式中的 this 物件,而引數列表會被傳入呼叫函式中。thisArgs 的取值有以下4種情況:
(1) 不傳,或者傳null,undefined, 函式中的 this 指向 window 物件
(2) 傳遞另一個函式的函式名,函式中的 this 指向這個函式的引用
(3) 傳遞字串、數值或布林型別等基礎型別,函式中的 this 指向其對應的包裝物件,如 String、Number、Boolean
(4) 傳遞一個物件,函式中的 this 指向這個物件
function a(){
console.log(this); //輸出函式a中的this物件
}
function b(){} //定義函式b
var obj = {name:'onepixel'}; //定義物件obj
a.call(); //window
a.call(null); //window
a.call(undefined);//window
a.call(1); //Number
a.call(''); //String
a.call(true); //Boolean
a.call(b);// function b(){}
a.call(obj); //Object
這是call 的核心功能,它允許你在一個物件上呼叫該物件沒有定義的方法,並且這個方法可以訪問該物件中的屬性,至於這樣做有什麼好處,我待會再講,我們先看一個簡單的例子:
var a = {
name:'onepixel', //定義a的屬性
say:function(){ //定義a的方法
console.log("Hi,I'm function a!" );
}
};
function b(name){
console.log("Post params: "+ name);
console.log("I'm "+ this.name);
this.say();
}
b.call(a,'test');
>>
Post params: test
I'm onepixel
I'm function a!
當執行b.call 時,字串`test`作為引數傳遞給了函式b,由於call的作用,函式b中的this指向了物件a, 因此相當於呼叫了物件a上的函式b,而實際上a中沒有定義b 。
2、apply(thisArgs[,args[]])
apply 和 call 的唯一區別是第二個引數的傳遞方式不同,apply 的第二個引數必須是一個數組,而 call 允許傳遞一個引數列表。值得你注意的是,雖然 apply 接收的是一個引數陣列,但在傳遞給呼叫函式時,卻是以引數列表的形式傳遞,我們看個簡單的例子:
function b(x,y,z){
console.log(x,y,z);
}
b.apply(null,[1,2,3]); // 1 2 3
apply 的這個特性很重要,我們會在下面的應用場景中提到這個特性。
3、bind(thisArgs [,args…])
bind是ES5 新增的一個方法,它的傳參和call類似,但又和 call/apply 有著顯著的不同,即呼叫 call 或 apply 都會自動執行對應的函式,而 bind 不會執行對應的函式,只是返回了對函式的引用。粗略一看,bind 似乎比call/apply 要落後一些,那ES5為什麼還要引入bind 呢?
其實,ES5引入 bind 的真正目的是為了彌補 call/apply 的不足,由於 call/apply 會對目標函式自動執行,從而導致它無法在事件繫結函式中使用,因為事件繫結函式不需要我們手動執行,它是在事件被觸發時由JS 內部自動執行的。而 bind 在實現改變函式 this 的同時又不會自動執行目標函式,因此可以完美的解決上述問題,看一個例子就能明白:
var obj = {name:'onepixel'};
/**
* 給document新增click事件監聽,並繫結onClick函式
* 通過bind方法設定onClick的this為obj,並傳遞引數p1,p2
*/
document.addEventListener('click',onClick.bind(obj,'p1','p2'),false);
//當點選網頁時觸發並執行
function onClick(a,b){
console.log(
this.name, //onepixel
a, //p1
b //p2
)
}
當點選網頁時,onClick 被觸發執行,輸出onepixel p1 p2, 說明 onClick 中的 this 被 bind 改變成了obj 物件,為了對 bind 進行深入的理解,我們來看一下 bind 的 polyfill 實現:
if (!Function.prototype.bind) {
Function.prototype.bind = function (oThis) {
var aArgs = Array.prototype.slice.call(arguments, 1),
fToBind = this, //this在這裡指向的是目標函式
fBound = function () {
return fToBind.apply(
//如果外部執行var obj = new fBound(),則將obj作為最終的this,放棄使用oThis
this instanceof fToBind
? this //此時的this就是new出的obj
: oThis || this, //如果傳遞的oThis無效,就將fBound的呼叫者作為this
//將通過bind傳遞的引數和呼叫時傳遞的引數進行合併,並作為最終的引數傳遞
aArgs.concat(Array.prototype.slice.call(arguments)));
};
//將目標函式的原型物件拷貝到新函式中,因為目標函式有可能被當作建構函式使用
fBound.prototype = this.prototype;
//返回fBond的引用,由外部按需呼叫
return fBound;
};
}
一旦函式通過bind傳遞了有效的this物件,則該函式在執行期的this將指向這個物件,即使通過call或apply來試圖改變this的指向也是徒勞的。
//實現陣列的去重功能
Array.prototype.unique = function(fn) {
var rst = [];
var tmp = {};
this.forEach(function(val) {
//使用call來改變fn的this指向,這裡傳window
var key = 'uniq' + (typeof fn === 'function' ? fn.call(window, val) : val);
if (!tmp.hasOwnProperty(key)) {
rst.push(val);
tmp[key] = null;
}
}, this);
return rst;
}
//物件陣列去重
var arr = [
{ id: 2 }, { id: 4 }, { id: 3 }, { id: 3 }, { id: 4 }, { id: 6 }
]
arr.unique(function(v) {
console.log(this) //使用bind傳遞了Array,則this一定是Array,而不會是window
return v.id
}.bind(Array));
4、應用場景一:繼承
大家知道,JavaScript中沒有諸如Java、C# 等高階語言中的extend 關鍵字,因此JS 中沒有繼承的概念,如果一定要繼承的話,call 和 apply 可以實現這個功能:
function Animal(name,weight){
this.name = name;
this.weight = weight;
}
function Cat(){
Animal.call(this,'cat','50');
//Animal.apply(this,['cat','50']);
this.say = function(){
console.log("I am " + this.name+",my weight is " + this.weight);
}
}
var cat = new Cat();
cat.say();//I am cat,my weight is 50
當通過new 運算子產生了cat 時,Cat中的 this 就指向了cat物件(關於new運算子的講解,請參考JS建構函式和new運算子,而繼承的關鍵是在於Cat中執行了Animal.call(this,’cat’,’50’) 這句話,在call中將this作為thisArgs引數傳遞,於是Animal 方法中的 this 就指向了Cat中的 this,而 cat 中的 this 指向的是 cat 物件,所以Animal 中的 this 指向的就是 cat 物件,在 Animal 中定義了name 和 weight 屬性,就相當於在 cat 中定義了這些屬性,因此 cat 物件便擁有了Animal 中定義的屬性,從而達到了繼承的目的。
5、應用場景二:移花接木
在講下面的內容之前,我們首先來認識一下JavaScript 中的一個非標準專業術語:ArrayLike (類陣列/偽陣列)
ArrayLike 物件即擁有陣列的一部分行為,在DOM 中早已表現出來,而jQuery 的崛起讓ArrayLike 在JavaScript 中大放異彩。ArrayLike 物件的精妙在於它和JS 原生的 Array 類似,但是它是自由構建的,它來自開發者對JavaScript 物件的擴充套件,也就是說:對於它的原型(prototype)我們可以自由定義,而不會汙染到JS原生的Array。
ArrayLike 物件在JS中被廣泛使用,比如DOM 中的NodeList, 函式中的arguments 都是類陣列物件,這些物件像陣列一樣儲存著每一個元素,但它沒有運算元組的方法,而我們可以通過call 將陣列的某些方法`移接`到ArrayLike 物件,從而達到操作其元素的目的。比如我們可以這樣遍歷函式中的arguments:
function test(){
//檢測arguments是否為Array的例項
console.log(
arguments instanceof Array, //false
Array.isArray(arguments) //false
);
//判斷arguments是否有forEach方法
console.log(arguments.forEach); //undefined
// 將陣列中的forEach應用到arguments上
Array.prototype.forEach.call(arguments,function(item){
console.log(item); // 1 2 3 4
});
}
test(1,2,3,4);
除此之外,對於apply 而言,我們上面提到了它獨有的一個特性,即apply 接收的是陣列,在傳遞給呼叫函式的時候是以引數列表傳遞的。 這個特性讓apply 看起來比call 略勝一籌,比如有這樣一個場景:給定一個數組[1,3,4,7],然後求陣列中的最大元素,而我們知道,陣列中並沒有獲取最大值的方法,一般情況下,你需要通過編寫程式碼來實現。而我們知道,Math 物件中有一個獲取最大值的方法,即Math.max(), max方法需要傳遞一個引數列表,然後返回這些引數中的最大值。而apply 不僅可以將Math 物件的max 方法應用到其他物件上,還可以將一個數組轉化為引數列表傳遞給max,看程式碼就能一目瞭然:
var arr = [2,3,1,5,4];
Math.max.apply(null,arr); // 5
以上便是call 和apply 比較經典的幾個應用場景,熟練掌握這些技巧,並把這些特性應用到你的實際專案中,會使你的程式碼看起來更加耐人尋味!