嵌套函數中的Javascript“this”指針難題

在Web開發場景中，嵌套函數中“this”指針的行為可能會令人費解。考慮以下程式碼：

var std_obj = {
  options: {rows: 0, cols: 0},
  activeEffect: "none",
  displayMe: function() {
    // this refers to std_obj
    if (this.activeEffect == "fade") {}

    var doSomeEffects = function() {
      // this surprisingly refers to window object
      if (this.activeEffect == "fade") {}
    }

    doSomeEffects();
  }
};

std_obj.displayMe();

上面的程式碼中，巢狀函數「doSomeEffects()」內的「this」指標意外指向「window」物件。此行為與巢狀函數繼承外部函數作用域的預期相矛盾，其中「this」指的是「std_obj」。

瞭解 Javascript 函數呼叫與作用域

Javascript 函數中「this」的行為取決於函數的呼叫方式。一般有以下三種方式：

1. 方法呼叫： someThing.someFunction(arg1, arg2, argN)
2. Function.call 呼叫： someFunction.call(someThing, arg1, arg2, argN)
3. Function.apply 呼叫： someFunction.apply(someThing, [arg1, arg2, argN])

在所有這些呼叫中，「this ” 物件將是“someThing”。但是，呼叫沒有前導父對象的函數（例如範例中的 doSomeEffects()）通常會導致「this」物件被設定為全域對象，在大多數瀏覽器中是「window」物件。

在範例程式碼中，巢狀函數「doSomeEffects()」在沒有父物件的情況下被調用，因此它繼承了全域作用域，並且它的「this」指標指向「window」 目的。這就是您觀察到意外行為的原因。

為了確保巢狀函數可以存取「std_obj」範圍，您可以使用Function.call() 方法呼叫它，並將「std_obj」物件作為第一個參數：

var doSomeEffects = function() {
  // this now refers to std_obj
  if (this.activeEffect == "fade") {}
}

doSomeEffects.call(std_obj);

理解 Javascript 中「this」指標行為的細微差別對於建立健全且可維護的應用程式至關重要。