4

このトピックに関する他の投稿がいくつかあることは知っていますが、それでも私は混乱します。

私はjQueryとすべてを含めました、そして、私はこの例のような単純なjavascriptクラスを持っています：

function CarConstructor(){
  this.speed=19; // in mph
  this.make="Ford";
  this.fillKph=fillKph;
}

function fillKph(){
  $("#kphdiv").html(this.speed*1.61);
}

car1 = new CarConstructor();
car1.fillKph();

これで、そのコードスニペットが機能せず、適切に構成されていないことがわかりました。

そこにある「this」キーワードは、「kphdiv」のIDで私のdom要素を参照しています。

私が持っている質問は、これを処理するための最良の方法は何ですか。

これに等しい変数を設定（バインド）してから、その変数を使用してオブジェクトを参照する1つのメソッドを見てきました。例えば：

function CarConstructor(){
  this.speed=19; // in mph
  this.make="Ford";
  this.fillKph=fillKph;
}

function fillKph(){
  var me=this;
  $("#kphdiv").html(me.speed*1.61);
}

car1 = new CarConstructor();
car1.fillKph();

私をグローバル変数にすることもできます...わかりません。

別の/より良い方法があるかどうか私はただ興味がありました。

4

4 に答える 4

10

おやおや、あなたはかなり多くのことを混乱させています。

function CarConstructor(){
  this.speed=19; // in mph
  this.make="Ford";
  this.fillKph; // <-> This particular statement has no meaning. 
  //When you write this.fillKph without any assignment, it will be 'undefined'. 
  //Just because you have a function named 'fillKph' somewhere else, 
  //it doesn't mean it will get attached to this property.
}

試す、

var toyota = new Car();
alert(typeof toyota.fillKph); //will alert undefined.

fillKph関数は、グローバルスコープで、つまり「Window」オブジェクトのプロパティとして作成されます。

function fillKph(){
  var me=this;
  $("#kphdiv").html(me.speed*1.61);
}

それを修正するために、あなたはrezzifが提案したものをすることができます。最終的なコードは次のようになります

function Car()
{
  this.speed=19; // in mph
  this.make="Ford";
  this.fillKph = function (){
      $("#kphdiv").html(this.speed*1.61);
  };
}

car1 = new Car();
car1.fillKph();

お気づきの方もいらっしゃると思いますが、ローカル変数内に「this」への参照を格納していません。なんで？このシナリオでは必要ありません。詳細については、こちらの詳細な回答をご覧ください。

多数のCarオブジェクトを作成する場合は、プロトタイプでfillKphメソッドを定義できます。

function Car()
{
  this.speed=19; // in mph
  this.make="Ford";
}

Car.prototype.fillKph = function fillKph() { $("#kphdiv").html(this.speed*1.61); };

car1 = new Car();
car1.fillKph();

編集：

あなたが次のようなことをするなら、

function CarConstructor(){
  this.speed=19; // in mph
  this.make="Ford";
  this.fillKph = fillKph;
}

function fillKph(){
  $("#kphdiv").html(me.speed*1.61);
}

car1 = new Car();
car1.fillKph(); //This will work as expected.

ただし、問題は、fillKphが「Window」スコープで定義されているため、次のように直接呼び出すことができることです。

fillKph(); //Calling it this way will break it as it won't get correct 'this'.

ポイントは、

alert(typeof fillKph); // alerts 'function' if you do it your way,
alert(typeof fillKph); // alerts 'undefined', if you do it the way I suggested, which is preferred in my opinion.
于 2009-07-29T02:58:08.070 に答える
3 

function CarConstructor(){
  var _this = this;  
  this.speed=19; // in mph
  this.make="Ford";
  this.fillKph = function (){
      $("#kphdiv").html(_this.speed*1.61);
  };
}

car1 = new CarConstructor();
car1.fillKph();
于 2009-07-29T02:48:02.687 に答える
1

後者の方法にはまったく問題はありません。これは完全に問題なく、おそらく最も洗練された方法です。参照が別のオブジェクトを指している別の実行コンテキストで使用するために、その時点での実行コンテキストへの参照を保存するだけです。 。

于 2009-07-29T02:49:29.520 に答える
-1

thisjavascriptで紛らわしいのは、new演算子との関係です。スコープチェーンを上っていくと、this常にの最後の占有を参照しnewます。必要に応じて、オブジェクトに戻ることを意味しwindowます。したがって、このようなものがある場合：

function MyObject() 
{ 
    this.baz = "some value"; 
    this.bar = function() { return this.baz; }
}
var foo = new MyObject();
alert(foo.bar());

thisfoo変数はキーワードの新しいオブジェクト/スコープで作成されたため、期待どおりに機能します。したがって、への参照this.bazは適切な場所を指します。

しかし、これを行うと：

var foo = new MyObject();
var bar = foo.bar;
alert(bar());

foofooのbar関数を呼び出すことを期待して、新しい演算子によって作成された「スコープ」の外でそれを呼び出しています。バー関数内での使用はthis、の定義がないウィンドウオブジェクトを参照するようになりましたbaz。

これはエッジケースのように見えるかもしれませんが、newを使用して多くの暗黙的なオブジェクトを作成する、または変数のような関数を渡すことを期待するjQueryのようなフレームワークを操作する場合は重要です。あなたは非常に注意しなければなりません。

于 2009-07-29T03:34:28.953 に答える