Проблема экземпляра класса Javascript

Question

Я пытаюсь выяснить, ООП JavaScript, я попробовал следующее, которое работает, но не удается, когда мне нужно внести изменения в переменную класса в конкретном экземпляре.

У меня есть «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();

---

РЕДАКТИРОВАТЬ: Сделано addEventListener более совместимым, добавив 3-й аргумент, как правильно предложил @ Феликс Клинг .

Answer 2

Если вы действительно хотите сделать ООП, вы должны использовать функцию связывания.Это чрезвычайно полезно, когда вы хотите присоединить обработчики событий, которые привязаны к вашему объекту, а не к глобальному объекту.

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: Какусловно, функции конструктора (или «классы») начинаются с заглавной буквы.

Answer 3

Примечание: не прямой ответ на вопрос.

Для ООП в Javascript я настоятельно рекомендую использовать следующий класс Class от самого Джона Ресига: http://ejohn.org/blog/simple-javascript-inheritance/

Это делает наследство намного приятнее ...