jqueryで「this」のコンテキストを保持するにはどうすればよいですか

StackOverflow https://stackoverflow.com/questions/1043556

  •  20-08-2019
  •  | 
  •  

質問

次のようなものがあります：

var Something = function(){
  this.render = function(){};
  $(window).resize(function(){
    this.render();
  });
}

問題は、匿名関数内で「this」がウィンドウオブジェクトを参照していることです。私は次のようなことができることを知っています：

var Something = function(){
  this.render = function(){};
  var tempThis = this;
  $(window).resize(function(){
    tempThis.render();
  });
}

しかし、もっと良い方法はありますか？これはあまりエレガントではありません。

役に立ちましたか？

解決

あなたが見つけた解決策は、ほとんどの人が使用するものです。一般的な規則は、tempThis変数<！> quot; that。<！> quot;

を呼び出すことです。 
var Something = function(){
  this.render = function(){};
  var that = this;
  $(window).resize(function(){
    that.render();
  });
};

他のヒント

それはあなたの最良の選択肢のように見えますが、もっと良い方法はないと思います。 （間違っている場合は誰かが修正します）。

FYIこれを制御する機能は、次のバージョンのJQuery

私は、多くの厳しい状況でこのようにしてきました。エレガントに見えませんが、決して失敗することはありません。実際には、JavaScriptクロージャーが動作しています。

jrh

それがまさに私がしていることです。 jQueryに固有のものでもありません。

var Construct = function() {
    var self = this; //preserve scope

    this.materials = 2000;

    this.build = function(){
        self.materials -= 100;
    };
};

新しいスコープ変数の前でvarキーワードを使用することを忘れないでください。それ以外の場合は、新しいグローバル変数を作成しています。ローカル変数として、クロージャーを介して内部関数内でアクセスできます。

変数を最小限に抑える最良の解決策は、Function.prototype.bind（）メソッドを使用することです。

var Something = function(){
  this.render = function(){};
  $(window).resize( this.render.bind( this ) );
}

将来の合併症を引き起こす可能性のあるこのメソッドの問題は、それを控えめに使用することを選択する必要があることを意味し、$(this)を呼び出して要素を取得する必要がある場合です。したがって、サイズ変更メソッドでFunction.prototype.bind()を使用する価値があるとお勧めしますが、クリックされた要素を直接ターゲットとする必要があるクリック関数で使用するのは良い解決策ではありません。

実際の例については、 JSFiddle をご覧ください。

Function.prototypeのMozillaドキュメントを参照してください。詳細については、.bind（）

他の方法も使用できますが、このコンテキストを維持する変数を作成することは、あなたの質問によると望ましくない効果です。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top