在JavaScript中,this的值由函數的呼叫上下文決定。但是,在使用回調函數或事件處理程序時,可能並不總是需要此上下文。
考慮以下範例:
<code class="javascript">this.name = "John"; var myName = { name: "Tom", getName: function() { return this.name; } }; var storeMyName = myName.getName; // example 1 var storeMyName2 = myName.getName.bind(myName); // example 2 var storeMyName3 = myName.getName(); // example 3</code>
在範例 1 中呼叫 storeMyName() 會將其指派給全域範圍,結果是「John」而不是預期的「Tom」。
將函數執行委託給其他程式碼時,this 參考可能會變得不可預測。 bind() 允許您在呼叫函數之前手動設定 this 值。
在範例 2 中,使用 bind(myName) 呼叫 storeMyName2() 可確保將 this 值設為 myName 對象,解決了問題在範例 1 中。
範例3 使用myName.getName() 而不進行綁定,但仍然傳回正確的值,因為在getName() 時已正確設定該值函數被執行。這與範例 1/2 形成鮮明對比,在範例 1/2 中函數被儲存而不被執行。
Approach | Time of Invocation | Time of this Binding |
---|---|---|
Function Object | Future | Future |
Function Call | Now | Now |
f.bind() | Future | Now |
bind() 在JavaScript 中是必不可少的,當您需要控制將在不同上下文中執行的函數的this值。透過使用bind(),您可以防止意外行為並確保根據需要設定this引用。
以上是何時以及為何需要 JavaScript bind()?的詳細內容。更多資訊請關注PHP中文網其他相關文章!