javascript変数スコープの関数間での関連性jQuery関与

Question

ここで私はうまくいきません - mouseMove this.mouseXは未定義です。 mousemoveイベントからmouseXとmouseY（コード内のe.pageX）が必要です。

function myClass() { 
    var mouseX=x; 
    var mouseY=y; 
    $(document).mousemove(this.mouseMove); 
} 
myClass.prototype.mouseMove = function(e){ 
    this.mouseX=e.pageX;//not a good idea but you can alert this 
} 
var a=new myClass(); 

想定されるクラスインスタンスにそのイベントが渡されることはありますか、それを行う方法はありませんか？

ここでもグローバルスコープ変数を避けようとしています。

Answer 1

二三つのこと：

var mouseXのみMyClassの機能にローカル変数を宣言します。第二に

function myClass() { 
    this.mouseX=x; // where do x and y come from? 
    this.mouseY=y; 
    //... 
} 

、あなたはコンストラクタにパラメータとしてxとyを渡すことを確認してください：あなたは（this現在のインスタンスを参照）this.mouseXとインスタンスのプロパティを宣言しなければなりません。それ以外の場合は、エラーが発生します（高いスコープで定義されていないものの、それは私には役に立たないようです）。あなただけのイベントハンドラとしてthis.mouseMoveを渡す場合

第三に、イベントハンドラ内で、thisはwindowにではなくmyClassインスタンスを参照します。明示的にコールバックのコンテキストを設定する$.proxyを使用します。

function myClass(x, y) { 
    this.mouseX=x; 
    this.mouseY=y; 
    $(document).mousemove($.proxy(this.mouseMove, this)); 
} 

---

私はMDC - Working with objectsを読むことをお勧めします。

Answer 2

this.mouseMoveのようなメソッドをコールバック関数として渡すと、もはやインスタンスに結びついていないので、thisがグローバルオブジェクトになります。スコープを修正するには、そのように、閉鎖中のインスタンスを渡すことができます。

function myClass (x,y) { 
    var mouseX=x; 
    var mouseY=y; 
    var that = this; 
    $(document).mousemove(function() { that.mouseMove() }); 
} 

Answer 3

試してみてください。

function myClass (x,y) { 
    var mouseX=x; 
    var mouseY=y; 
    var $this = this; 

    $(document).mousemove(function(){$this.mouseMove()}); 
} 
myClass.prototype.mouseMove = function(e){ 
    this.mouseX=e.pageX;//not a good idea but you can alert this 
} 
var a=new myClass(); 

Answer 4

function myClass() { 
    this.mouseX=x; 
    this.mouseY=y; 
    $(document).mousemove(this.mouseMove); 
} 
myClass.prototype.mouseMove = function(e){ 
    this.mouseX=e.pageX;//not a good idea but you can alert this 
} 
var a=new myClass(); 

はあなたにはインスタンス化し、このキーワードではなくVARを使用する必要がありますコンストラクタ