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

嗨呀豆豆呢發表於2018-12-09
JavaScript設計模式APP

關於書籍《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設計模式與開發實踐》最全知識點彙總大全

相關文章