Блог

У меня есть следующий фрагмент кода, который выполняется не так, как я ожидал:

 var person = new Class({
    initialize: function(name)
    {
        this.personName = name;
        alert(this.personName)        //WORKS :-)

        this.testFunc();              //WORKS :-)
        this.createShape();           //PAINTS SHAPE BUT CANNOT ACCESS 'personName'
    },
    testFunc() : function()
    {
        alert(this.personName);
    }, 
    createShape() : function()
    {
        this.personShape = paper.rect(40,40,40,40).attr({"fill":"blue"});
        $(this.personShape.node).click(function()
        {

            alert(this.personName);
        });
    }
});
  

Предупреждение не работает для события click, и я понимаю его, потому что оно не может получить доступ к объектной переменной ‘PersonName’. Однако я хотел бы знать, возможно ли каким-либо образом получить к нему доступ?

Есть ли маленький аккуратный трюк Javascript для достижения этого?

Внутри вашей click функции в createShape контекст устанавливается равным this.personShape.node . this больше не ссылается на ваш person , поэтому его необходимо кэшировать. Попробуйте это:

 createShape: function() {
    var context = this;
    context.personShape = paper.rect(40,40,40,40).attr({"fill":"blue"});
    $(context.personShape.node).click(function() {
        alert(context.personName);
    });
}
  

Кроме того, в ваших функциях не должно быть скобок в определении вашего класса / объекта. Кроме того, было бы неплохо начать помещать фигурные скобки в ту же строку, что и ваше выражение, по нескольким причинам. Вот мой рефакторинг:

 var person = new Class({
    initialize: function(name) {
        this.personName = name;
        alert(this.personName)        //WORKS :-)

        this.testFunc();              //WORKS :-)
        this.createShape();
    },
    testFunc: function() {
        alert(this.personName);
    }, 
    createShape: function() {
        var context = this;
        context.personShape = paper.rect(40,40,40,40).attr({"fill":"blue"});
        $(context.personShape.node).click(function() {
            alert(context.personName);
        });
    }
});