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

我不知道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();

编辑：通过添加第3个参数使addEventListener更兼容，正如@Felix Kling正确建议的那样。

Answer 2

注意：不能直接回答问题。

对于Javascript中的OOP，我强烈建议使用John Resig自己的以下Class类：http://ejohn.org/blog/simple-javascript-inheritance/

它使继承变得更好......

Answer 3

如果你真的想做OOP，你必须使用绑定功能。当您想要附加绑定到对象而不是全局对象的事件处理程序时，它非常有用。

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

然后你这样做 -

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：作为惯例，构造函数（或'Classes'）以大写字母开头。

Javascript类实例问题

3 个答案: