如何在回調中存取正確的'this”？-js教程-PHP中文網

首頁

web前端

js教程

如何在回調中存取正確的'this”？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 24, 2023 am 09:53 AM

如何在回調中存取正確的this”？

在本教程中，我們將了解如何在回呼中存取正確的「this」。

「這個」關鍵字

每個函數都包含一個名為 this 的關鍵字，也稱為“上下文”，其值由函數的呼叫方式決定，而不是由函數的定義方式、時間或位置決定。與其他變數不同，它不受詞法作用域的影響。與其他語言相比，使用函數的「this」關鍵字時，JavaScript 的行為略有不同。在嚴格模式和非嚴格模式之間，還有一些進一步的變化。

函數最常被呼叫的方式決定了「this」的值（運行時綁定）。每次呼叫函數時它都可能會發生變化，並且在執行時不能透過賦值來更改。函數被呼叫的次數，bind() 方法可以設定該值，因為箭頭函數不提供自己的「this」綁定（它保留封閉詞法上下文的「this」值）。

什麼叫回呼？

從另一個函數接收參數的函數稱為回調，通常在稍後的外部函數中使用。高階函數是一個術語，用來描述接受回呼的外部函數。

回呼有自己的一組方法和屬性，因為函數是 JavaScript 中的物件。在高階函數內執行時指派給回呼的「this」屬性完全取決於回呼的製作方式，而不是定義的位置、方式或時間。

透過檢查呼叫回呼的高階函數，我們可以確定回呼中的「this」值。封閉函數的實際定義可能包括本地範圍的屬性，這是回呼中 this 問題的主要原因。但是，由於回調的上下文會根據其呼叫方式而動態變化，因此當透過回呼中的「this」綁定存取該屬性時，它不存在。

現在我們將學習在回調中存取正確的「this」的方法。

使用「self」模式

建立一個名為 self 的變量，並在宣告函數的範圍內為其賦予 this 值是一種典型的模式。我們可以透過建立一個名為 self 的新變數（或任何其他有效的變數名稱都可以）並為其賦予「this」值來實現所需的行為。

範例

<html>
<body>
   <h2 id="this-Inside-a-Callback-using-the-i-self-pattern-i"> '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 id="this-Inside-a-Callback-using-the-i-arrow-function-i"> '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中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。