【轉】javascript中this的四種用法

時間 2020-08-09

原文原文鏈接

在函數執行時，this 老是指向調用該函數的對象。要判斷 this 的指向，其實就是判斷 this 所在的函數屬於誰。java

在《javaScript語言精粹》這本書中，把 this 出現的場景分爲四類，簡單的說就是：數組

有對象就指向調用對象
沒調用對象就指向全局對象
用new構造就指向新對象
經過 apply 或 call 或 bind 來改變 this 的所指。閉包

1) 函數有所屬對象時：指向所屬對象app

函數有所屬對象時，一般經過 . 表達式調用，這時 this 天然指向所屬對象。好比下面的例子：函數

 
         var 
         myObject = {value: 100}; 
        
         myObject.getValue =  
         function 
         () { 
        
         console.log( 
         this 
         .value);  
         // 輸出 100 
        
         // 輸出 { value: 100, getValue: [Function] }， 
        
         // 其實就是 myObject 對象自己 
        
         console.log( 
         this 
         ); 
        
         return 
         this 
         .value; 
        
         }; 
        
         console.log(myObject.getValue());  
         // => 100

getValue() 屬於對象 myObject，並由 myOjbect 進行 . 調用，所以 this 指向對象 myObject。this

2) 函數沒有所屬對象：指向全局對象spa

 
         var 
         myObject = {value: 100}; 
        
         myObject.getValue =  
         function 
         () { 
        
         var 
         foo =  
         function 
         () { 
        
         console.log( 
         this 
         .value)  
         // => undefined 
        
         console.log( 
         this 
         ); 
         // 輸出全局對象 global 
        
         }; 
        
         foo(); 
        
         return 
         this 
         .value; 
        
         }; 
        
         console.log(myObject.getValue());  
         // => 100

在上述代碼塊中，foo 函數雖然定義在 getValue 的函數體內，但實際上它既不屬於 getValue 也不屬於 myObject。foo 並無被綁定在任何對象上，因此當調用時，它的 this 指針指向了全局對象 global。.net

聽說這是個設計錯誤。設計

3) 構造器中的 this：指向新對象指針

js 中，咱們經過 new 關鍵詞來調用構造函數，此時 this 會綁定在該新對象上。

 
         var 
         SomeClass =  
         function 
         (){ 
        
         this 
         .value = 100; 
        
         } 
        
         var 
         myCreate =  
         new 
         SomeClass(); 
        
         console.log(myCreate.value);  
         // 輸出100

順便說一句，在 js 中，構造函數、普通函數、對象方法、閉包，這四者沒有明確界線。界線都在人的心中。

4) apply 和 call 調用以及 bind 綁定：指向綁定的對象

apply() 方法接受兩個參數第一個是函數運行的做用域，另一個是一個參數數組(arguments)。

call() 方法第一個參數的意義與 apply() 方法相同，只是其餘的參數須要一個個列舉出來。

簡單來講，call 的方式更接近咱們平時調用函數，而 apply 須要咱們傳遞 Array 形式的數組給它。它們是能夠互相轉換的。

 
         var 
         myObject = {value: 100}; 
        
         var 
         foo =  
         function 
         (){ 
        
         console.log( 
         this 
         ); 
        
         }; 
        
         foo();  
         // 全局變量 global 
        
         foo.apply(myObject);  
         // { value: 100 } 
        
         foo.call(myObject);  
         // { value: 100 } 
        
         var 
         newFoo = foo.bind(myObject); 
        
         newFoo();  
         // { value: 100 }