入れ子関数の Javascript "this" ポインタ: 混乱を解決するには?

入れ子関数の難題における 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" の動作は、関数の呼び出し方法によって異なります。一般に、次の 3 つの方法があります:

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」スコープにアクセスできるようにするには、「std_obj」オブジェクトを最初の引数:

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

doSomeEffects.call(std_obj);

JavaScript における「この」ポインターの動作の微妙なニュアンスを理解することは、堅牢で保守可能なアプリケーションを構築するために重要です。

以上が入れ子関数の Javascript "this" ポインタ: 混乱を解決するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。