ネストされた JavaScript 関数で「this」ポインタを保持する方法

ネストされた関数の JavaScript "this" ポインター

JavaScript では、ネストされた関数を使用する場合、"this" ポインターの値が混乱を招く可能性があります。機能。予想に反して、ネストされた関数を呼び出すと、外側の関数ではなく、グローバルな「window」オブジェクトに「this」ポインタを割り当てることができます。

次のコードを考えてみましょう。

<code class="javascript">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 unexpectedly refers to the window object
      if (this.activeEffect == "fade") { }
    };

    doSomeEffects();
  }
};

std_obj.displayMe();</code>

In thisこのシナリオでは、入れ子関数 doSomeEffects が呼び出されるとき、「this」ポインターは、std_obj のスコープ内で宣言されているにもかかわらず、「window」オブジェクトを指します。これは、JavaScript が関数の呼び出し方法に基づいて「this」ポインターを決定するためです。

この場合、先頭の親オブジェクトなしで doSomeEffects が呼び出され、その結果、グローバル オブジェクト (通常は「ウィンドウ」オブジェクト) が生成されます。 )「this」に割り当てられています。この問題を解決するには、次の 3 つのメソッドを使用できます。

1. call メソッドを使用して関数を呼び出す:

   <code class="javascript">doSomeEffects.call(std_obj);</code>

2. apply メソッドで関数を適用します:

   <code class="javascript">doSomeEffects.apply(std_obj, []);</code>

3. バインドされた関数を作成します:

   <code class="javascript">var boundDoSomeEffects = doSomeEffects.bind(std_obj);
   boundDoSomeEffects();</code>

以上がネストされた JavaScript 関数で「this」ポインタを保持する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。