JavaScript `this` 關鍵字在不同函數呼叫上下文中的行為如何？

揭示函數中「this」關鍵字的動態

在JavaScript 領域，「this」關鍵字在處理函數時具有重要意義具有功能。它的值取決於所使用的呼叫模式。

調用模式

JavaScript 函數可以通過四種不同的方式調用：

1. 作為方法：
   當函數作為方法被呼叫時一個對象，「this」指的是對象本身。範例：

   const foo = {
     bar() {
       console.log(this); // Logs "foo"
     }
   };
   foo.bar();

   登入後複製

2. 作為函數：
   當函數作為獨立實體呼叫時，「this」預設為全域物件（通常瀏覽器中的“窗口”）。範例：

   function bar() {
     console.log(this); // Logs "Window" (global object)
   }
   bar();

   登入後複製

3. 作為建構子（使用「new」關鍵字）：
   使用「new」關鍵字呼叫函數時，新物件被創建，“this”引用該物件。範例：

   function Constructor() {
     this.property = "value";
   }
   const instance = new Constructor();
   console.log(instance.property); // Logs "value"

   登入後複製

4. 使用「apply」方法：
   「apply」方法允許透過傳入一個值來自訂「this」值目的。範例：

   function bar(a, b) {
     console.log(this); // Logs "obj"
     console.log(a); // Logs "1"
     console.log(b); // Logs "2"
   }
   const obj = {
     a: 1,
     b: 2
   };
   bar.apply(obj);

   登入後複製

巢狀函數和回調的意義

在巢狀函數和回呼中，父函數的呼叫模式決定了巢狀函數中“this”的值。如果父函數作為方法調用，則「this」指的是該物件；如果作為函數調用，它引用全域物件。為了在回調中保留「this」的所需值，採用了綁定函數或使用箭頭函數等技術。

以上是JavaScript `this` 關鍵字在不同函數呼叫上下文中的行為如何？的詳細內容。更多資訊請關注PHP中文網其他相關文章！