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

「這個」關鍵字

什麼叫回呼？

使用「self」模式

範例

'this' Inside a Callback using the 'self' pattern

使用箭頭函數

'this' Inside a Callback using the arrow function

使用另一個變數來儲存「this」物件

使用明確地將 this 綁定到物件

首頁

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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7798

Java教學

1644

CakePHP 教程

1402

Laravel 教程

1299

PHP教程

1234

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。