《JavaScript設計模式與開發實踐》基礎篇（1）—— this、call 和 apply

關於書籍《JavaScript設計模式與開發實踐》的一些學習總結，本章梳理關於this、call和apply的知識，做爲設計模式的基礎知識的第一部分

this

JavaScript 的 this 老是指向一個對象，而具體指向哪一個對象是在運行時基於函數的執行環境動態綁定的，而非函數被聲明時的環境

this的指向

基本能夠分紅如下四種狀況

• 做爲對象的方法調用
• 做爲普通函數調用
• 構造器調用
• Function.prototype.call 或 Function.prototype.apply 調用

當函數做爲對象的方法被調用時，this 指向該對象

var obj = { 
    a: 1,
    getA: function(){
        alert ( this === obj ); // 輸出:true alert ( this.a ); // 輸出: 1
    }
};

obj.getA();
複製代碼

當函數不做爲對象的屬性被調用時，也就是咱們常說的普通函數方式,此時的 this 老是指向全局對象。在瀏覽器的 JavaScript 裏，這個全局對象是 window 對象。

window.name = 'globalName';
var myObject = { 
    name: 'sven',
    getName: function(){ 
        return this.name;
    } 
};
var getName = myObject.getName; 
console.log( getName() ); // globalName
複製代碼

構造器調用

• 當用 new 運算符調用函數時，該函數總 會返回一個對象，一般狀況下，構造器裏的 this 就指向返回的這個對象

var MyClass = function(){ 
    this.name = 'sven';
};
var obj = new MyClass();
alert ( obj.name );    // 輸出:sven
複製代碼

• 若是構造器顯式地返回了一個 object 類型的對象，那麼這次運算結果最終會返回這個對象，而不是咱們以前期待的 this

var MyClass = function(){
    this.name = 'sven';
    return { // 顯式地返回一個對象
        name: 'anne' 
    }
};
var obj = new MyClass();
alert ( obj.name ); // 輸出:anne
複製代碼

跟普通的函數調用相比，用 Function.prototype.call 或Function.prototype.apply 能夠動態地 改變傳入函數的 this

var obj1 = { 
    name: 'sven',
    getName: function(){
         return this.name;
    } 
};
var obj2 = { 
    name: 'anne'
};
console.log( obj1.getName() );// 輸出: sven
console.log( obj1.getName.call( obj2 ) ); // 輸出:anne
複製代碼

call 和 apply

Function.prototype.call 和 Function.prototype.apply 都是很是經常使用的方法。它們的做用如出一轍，區別僅在於傳入參數形式的不一樣

方法	apply	call
第一個參數	函數體內 this 對象的指向	函數體內 this 對象的指向
第二個參數	帶下標的集合	從第二個參數開始，每一個參數被依次傳入函數

apply

var func = function( a, b, c ){
     alert ( [ a, b, c ] ); // 輸出 [ 1, 2, 3 ]
};
func.apply( null, [ 1, 2, 3 ] );
複製代碼

call

var func = function( a, b, c ){
     alert ( [ a, b, c ] ); // 輸出 [ 1, 2, 3 ]
};
func.call( null, 1, 2, 3 );
複製代碼

call和apply的用途

• 改變 this 指向
• 借用其餘對象的方法

改變 this 指向

var obj1 = { 
    name: 'sven'
};
var obj2 = { 
    name: 'anne'
};
window.name = 'window';
var getName = function(){ 
    alert ( this.name );
};
getName();     // 輸出：window
getName.call( obj1 ); // 輸出: sven
getName.call( obj2 ); // 輸出: anne
複製代碼

借用其餘對象的方法

(function(){
    Array.prototype.push.call( arguments, 3 ); 
    console.log ( arguments ); // 輸出[1,2,3]
})( 1, 2 );
複製代碼

系列文章：

《JavaScript設計模式與開發實踐》最全知識點彙總大全