this 所綁定的物件並非是函式宣告的時候所定義，而是在呼叫函式時的時機去決定 this 所指向的目標
四個規則如下
1. 預設繫結 -> 就是字面上的預設，若沒有其他三項規則下，通常 this 就是預設繫結也就是綁定到 global object，如上圖 first & second function 的 this 都屬於 global object
2. 隱含繫結 -> 當函式的呼叫是透過物件參考而呼叫的話，this 會被綁定到此物件上，而注意到的是假使是多個物件參考連結，是綁定於最後的物件，而注意到根據函式使用方式，有可能會丟失隱含繫結的綁定
3. 明確繫結 -> 不同於隱含系結須透過物件參考呼叫函式，所有的 JS 函式都可以透過 call(..) & apply(..) 來做 this 綁定
4. 硬繫結 -> 上述的系結方法都有可能遇到預料外的情況如 this 被某個 framework 給覆蓋掉，在 ES5 提供了 bind 來強制綁定，先前寫 react 的大家應該也很常使用到此方法
再來額外會影響到 this 繫結的還有透過 new 所創建出來的物件，以一個 new 的行為建立物件會有以下的行為
1. 建立一個全新的物件
2. 此物件會帶有 constructor function 的 prototype chain
3. 此物件會被設為 constructor function 中的 this
4. 除非函式自帶回傳物件，否則 new 會自動回傳新建的物件
而 this 綁定的優先順序則是從後到頭，也就是 new 物件繫結 > bind > call & apply > obj.function > default
總結
1. 是否為 new 所建立的物件，如果是則以 new 綁定的 this 為主
2. 透過 bind 硬繫結強制綁定函式與其對應的物件，注意到在 bind 參數裡面除了第一個為綁定的物件以外，後續的參數會被預設為綁定函式中的標準參數，技術上來說被稱為 currying
3. 透過 call & apply 明確指定函式運用的物件
4. 預設情況下的 this 為 global object 或者在嚴格模式執行下為 undefined
No comments:
Post a Comment