25

以下では、Javascriptでオブジェクトを作成しています。コンストラクター内で、イベントリスナーを設定しています。問題は、イベントが発生すると、this.propが見つからず、undefinedが出力されることです。どうすればこれを解決できますか？

   var someObj = function someObj(){
       this.prop = 33;
        this.mouseMoving = function() { console.log(this.prop);}

        document.getElementById("someDiv").addEventListener('mousemove', this.mouseMoving, true);

 }
4

6 に答える 6

25

イベントハンドラーが呼び出されると、「this」は「someObj」オブジェクトを参照しなくなります。「this」を、mouseMoving関数がキャプチャするローカル変数にキャプチャする必要があります。

var someObj = function someObj(){
    this.prop = 33;
    var self = this;
    this.mouseMoving = function() { console.log(self.prop);}

    document.getElementById("someDiv").addEventListener('mousemove', this.mouseMoving, true);
}

「someObjはコンストラクターです。つまり、として呼び出されることを意図していますnew someObj()。そうでない場合、「this」はグローバルスコープになります。

「this」キーワードは、他の言語と同じようには機能しないため、JavaScriptでは混乱を招く可能性があります。覚えておくべき重要なことは、関数が作成されたときではなく、関数が呼び出されたときに呼び出し元のオブジェクトにバインドされることです。

于 2009-07-04T04:44:22.803 に答える
12

javascriptの組み込みFunction.prototype.bind（）は、この目的を目的としています。
例えば：

var someObj = function someObj(){
       this.prop = 33;
        this.mouseMoving = function() { console.log(this.prop);}

        document.getElementById("someDiv").addEventListener('mousemove', this.mouseMoving.bind(this),true);

 }

バインドメソッドの詳細については、https ：//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bindをご覧ください。

それ以外の場合は、オブジェクトsomeObjの参照を要素に渡し、その参照を次の行で使用する必要があります。

console.log(this.referenceToObject.prop); //this references the DOM element in an event.
于 2009-07-04T04:44:39.883 に答える
6

JavaScriptのセクション4.3から：ダグラス・クロックフォードによる良い部分：

関数を呼び出すと、現在の関数の実行が一時停止され、制御とパラメーターが新しい関数に渡されます。宣言されたパラメーターに加えて、すべての関数は、thisとargumentsの2つの追加パラメーターを受け取ります。このパラメーターはオブジェクト指向プログラミングで非常に重要であり、その値は呼び出しパターンによって決定されます。JavaScriptの呼び出しには、メソッド呼び出しパターン、関数呼び出しパターン、コンストラクター呼び出しパターン、および適用呼び出しパターンの4つのパターンがあります。パターンは、これが初期化されるボーナスパラメータの方法が異なります。

Crockfordは、次のように、これらの各パターンでの「this」のバインドについて引き続き説明します。

メソッド呼び出しパターン： 関数がオブジェクトのプロパティとして格納されている場合、それをメソッドと呼びます。メソッドが呼び出されると、これはそのオブジェクトにバインドされます。

関数呼び出しパターン： このパターンで関数が呼び出されると、これはグローバルオブジェクトにバインドされます。これは言語の設計の間違いでした。

コンストラクター呼び出しパターン： 関数が新しいプレフィックスで呼び出されると、関数のプロトタイプメンバーの値への非表示のリンクを使用して新しいオブジェクトが作成され、これがその新しいオブジェクトにバインドされます。

Apply呼び出しパターン： applyメソッドを使用すると、関数を呼び出すために使用する引数の配列を作成できます。また、これの値を選択することもできます。applyメソッドは2つのパラメーターを取ります。1つ目は、これにバインドする必要がある値です。2つ目は、パラメーターの配列です。

于 2009-07-04T06:02:59.700 に答える
3

まず、JavaScriptで「これ」がどのように機能するかを理解する必要があります。'this'キーワードは、C＃やJAVAなどの他の言語での動作とは異なります。詳細については、次の投稿をお読みください。

JavaScriptでの「this」キーワードの動作の理論的根拠は何ですか？

マシューが彼のコードで概説したように、それを理解したら、「this」への参照を保存し、mouseMoving関数内でその参照を使用できます。

全体として、これらの問題を処理するJavaScriptフレームワーク（jQuery、YUI、MooToolsなど）を使用することをお勧めします。たとえば、Internet Explorerでは、addEventListenrではなくaddEventを使用してイベントを添付します。

于 2009-07-04T05:03:27.903 に答える
3

'me'という名前の変数を使用して、グローバルJavaScript変数'self'との競合を回避できます。

function someObj() {
  var me = this;
  this.prop = 33;

  this.mouseMoving = function() {
    alert(me.prop);
  }

  document.getElementById("someDiv").addEventListener('mousemove', this.mouseMoving, true);
}
于 2014-07-01T15:16:59.907 に答える
0

関数宣言にいくつかのタイプミスがあります。

あなたのprop変数は（this.propを使用して）「public」または「visible」メンバーとしても定義されます。そうすることで、外部関数からのこれの参照（実際にはオブジェクトインスタンスへの参照）を強制的に保存します。関数の「プライベート」メンバーとして（varを使用）、作成されたオブジェクトのインスタンスにアクセスし、「パブリック」プロップメンバーを読み取ります。

このコードを書き直すためのいくつかの選択肢があります。

function someObj (){
    var self = this;
    this.prop = 33;
    this.mouseMoving = function() { alert(self.prop);} // You access the current
                                                       // instance, stored in *self*
                                                       // since *this*, inside the 
                                                       // function, is in another 
                                                       // context.
    //...
}

var mySomeObj = new someObj(); // Object instantiation

または、次のことができます。

function someObj (){
    var prop = 33;
    this.mouseMoving = function() { alert(prop);} 

    //...
}
var mySomeObj = new someObj(); // Object instantiation

varで宣言された変数は、主要なコンストラクター関数内で宣言された関数にアクセスできます。この機能はクロージャと呼ばれます。

于 2009-07-04T05:03:10.150 に答える