如何在回調中存取正確的“this”？
- WBOY轉載
- 2023-08-24 09:53:09995瀏覽
在本教程中，我們將了解如何在回呼中存取正確的「this」。
「這個」關鍵字
每個函數都包含一個名為 this 的關鍵字，也稱為“上下文”，其值由函數的呼叫方式決定，而不是由函數的定義方式、時間或位置決定。與其他變數不同，它不受詞法作用域的影響。與其他語言相比，使用函數的「this」關鍵字時，JavaScript 的行為略有不同。在嚴格模式和非嚴格模式之間，還有一些進一步的變化。
函數最常被呼叫的方式決定了「this」的值（運行時綁定）。每次呼叫函數時它都可能會發生變化，並且在執行時不能透過賦值來更改。函數被呼叫的次數，bind() 方法可以設定該值，因為箭頭函數不提供自己的「this」綁定（它保留封閉詞法上下文的「this」值）。
什麼叫回呼？
從另一個函數接收參數的函數稱為回調，通常在稍後的外部函數中使用。高階函數是一個術語，用來描述接受回呼的外部函數。
回呼有自己的一組方法和屬性，因為函數是 JavaScript 中的物件。在高階函數內執行時指派給回呼的「this」屬性完全取決於回呼的製作方式，而不是定義的位置、方式或時間。
透過檢查呼叫回呼的高階函數，我們可以確定回呼中的「this」值。封閉函數的實際定義可能包括本地範圍的屬性，這是回呼中 this 問題的主要原因。但是，由於回調的上下文會根據其呼叫方式而動態變化，因此當透過回呼中的「this」綁定存取該屬性時，它不存在。
現在我們將學習在回調中存取正確的「this」的方法。
使用「self」模式
建立一個名為 self 的變量，並在宣告函數的範圍內為其賦予 this 值是一種典型的模式。我們可以透過建立一個名為 self 的新變數（或任何其他有效的變數名稱都可以）並為其賦予「this」值來實現所需的行為。
範例
<html>
<body>
<h2> 'this' Inside a Callback using the <i> 'self' pattern </i> </h2>
<button onclick="myFunction()"> Click here </button>
<div id="root" style="
background-color: rgb(240, 248, 255);
border: 1px solid gray;
margin: 5px 0px;
padding: 10px;
">
Welcome to Tutorialspoint!
</div>
<script>
const root = document.getElementById('root')
function myFunction() {
this.variable = 'I am this variable'
const variable = 'I am a const variable'
const self = this
setTimeout(() => {
root.innerHTML = this.variable + '<br/>'
root.innerHTML += variable
}, 1000)
}
</script>
</body>
</html>
使用箭頭函數
ECMAScript 6 見證了 JavaScript 箭頭函數的首次登場。它們沒有自己的綁定，是傳統函數表達式的更簡潔的替代方案。這確保瞭如果在箭頭函數內部引用 this，它會作為常規變數在範圍內進行搜尋。
範例
<html>
<body>
<h2> 'this' Inside a Callback using the <i> arrow function </i> </h2>
<button onclick="myFunction('ABC')"> Click here </button>
<div id="root" style="
background-color: rgb(240, 248, 255);
border: 1px solid gray;
margin: 5px 0px;
padding: 10px;
">
Welcome to Tutorialspoint!
</div>
<script>
const root = document.getElementById('root')
function myFunction(name) {
this.name = name
let obj = {
run: function(callback) {
setTimeout(callback, 1000)
},
}
obj.run(() => {
root.innerHTML = this.name
})
}
</script>
</body>
</html>
使用另一個變數來儲存「this」物件
該物件連結到它，這通常是當我們嘗試在回調中存取它時真正想要存取的物件。建立變數並在回調作用域之前儲存其值是實現此目的的一種方法（儘管有些程式設計師不願意這樣做，因為它看起來很混亂）。
有些人稱之為“that”或“self”，但只要術語明確，就沒有關係。此解決方法非常有效，因為該變數符合詞法範圍要求，因此可在回調中使用。您仍然可以存取回呼的動態 this 綁定，這是這種方式的另一個好處。
範例
<html>
<body>
<h2>
'this' Inside a Callback using the
<i> another variable to store the 'this' object </i>
</h2>
<button onclick="myFunction('XYZ')"> Click here </button>
<div id="root" style="
background-color: rgb(240, 248, 255);
border: 1px solid gray;
margin: 5px 0px;
padding: 10px;
">
Welcome to Tutorialspoint!
</div>
<script>
const root = document.getElementById('root')
function myFunction(name) {
this.name = name
let that = this
let obj = {
run: function(callback) {
setTimeout(callback, 1000)
},
}
obj.run(function() {
root.innerHTML = this.name
})
}
</script>
</body>
</html>
使用明確地將 this 綁定到物件
當我們定義回調時，我們可以聲明我們想要什麼。我們可以使用bind()方法來設定「this」值，並確保它在整個函數執行過程中保持這種狀態，無論它是如何或在哪裡呼叫或傳遞的。
bind() 方法在每個函數中都可用，並使用連接到給定物件的「this」屬性建立一個新函數。傳回函數和原始函數之間的唯一區別是您可以完全控制「this」屬性指向的內容。
範例
<html>
<body>
<h2>
'this' Inside a Callback using
<i> explicitly binding this to an object </i>
</h2>
<button onclick="myFunction('Tutorialspoint')"> Click here </button>
<div id="root" style="
background-color: rgb(240, 248, 255);
border: 1px solid gray;
margin: 5px 0px;
padding: 10px;
">
Welcome to Tutorialspoint!
</div>
<script>
const root = document.getElementById('root')
function myFunction(name) {
this.name = name
let callbackFunction = function() {
root.innerHTML = this.name
}.bind(this)
let obj = {
run: function(callbackFunction) {
setTimeout(callbackFunction, 1000)
},
}
obj.run(callbackFunction)
}
</script>
</body>
</html>
以上是如何在回調中存取正確的“this”？的詳細內容。更多資訊請關注PHP中文網其他相關文章！