Javascriptクラスのインスタンスの問題

Question

私はJavaScriptのOOPを解明しようとしていますが、私は以下のことを試しましたが、特定のインスタンスのクラス変数を変更する必要があるときに失敗します。

私はデフォルト値で "myname"を持っていますが、それを特定のインスタンスに変更し、イベントハンドラで値を出力します。私は既定値を取得し、更新された値は取得しません。

これをサポートするコードを変更するにはどうすればよいですか？

おかげ

function myClass() {} 

myClass.prototype = 
{ 

    myname : "test", 

    test : function (filename) 
    { 
     var img = createSomething(); 
     img.container = this; 

     img.addEventListener('click', this.onClick);      
    }, 


    onClick : function (e) 
    { 
     trace ("click: " + e.source.container.myname); // this will print "test" and not "dave" 
    } 

}; 



var instance = new myClass(); 

instance.myname = "dave"; 

instance.test(); 

Answer 1

あなたが本当にOOPをしたい場合は、次の操作が必要バインド関数を使用します。これは、グローバルオブジェクトではなくオブジェクトにバインドされているイベントハンドラをアタッチする場合に非常に便利です。

function bind(func, context) { 
    return function() { 
      return func.apply(context, Array.prototype.slice.call(arguments)); 
    } 
} 

次にあなたがthis-

function MyClass() {} 

MyClass.prototype = { 

    myname: "test", 

    test: function(filename) { 
     var img = new Image(); 
     img.src = "http://dummyimage.com/120x90/f00/fff.png&text=my+image" 

     img.addEventListener('click', bind(this.onClick, this), false); 
     document.body.appendChild(img); 
    }, 
    onClick: function(e) { 
     //this here refers to the instance of MyClass 
     console.log("click: " + this.myname); 
    } 
}; 
var instance = new MyClass(); 
instance.myname = "dave"; 
instance.test(); 

PSの操作を行います。慣例として、コンストラクタ関数（または 'クラス'）は大文字で始まります。

Answer 2

私が何であるかをtrace()とe.source知りませんが、私はあなたの例を取ると、console.log()とe.target.container.mynameを使用する場合、それは完璧に動作します。

例：http://jsfiddle.net/L2UMC/2/

（例のみにaddEventListenerをサポートするブラウザで動作するように意図されていることに注意してください）

function myClass() {} 

myClass.prototype = { 

    myname: "test", 

    test: function(filename) { 
     var img = new Image(); 
     img.src = "http://dummyimage.com/120x90/f00/fff.png&text=my+image" 
     img.container = this; 

     img.addEventListener('click', this.onClick, false); 
     document.body.appendChild(img); 
    }, 
    onClick: function(e) { 
     console.log("click: " + e.target.container.myname); 
    } 
}; 
var instance = new myClass(); 
instance.myname = "dave"; 
instance.test(); 

---

EDIT：はaddEventListenerより互換性を作りました第3引数を追加すると、正しくは@Felix Kling。

Answer 3

注：質問への直接の回答ではありません。 JavaScriptでOOPについては

私は強くジョンResig氏自身によって以下のクラスクラスを使用することをお勧めします：http://ejohn.org/blog/simple-javascript-inheritance/

それは継承はそんなに立派になります...