javascript - ExtJS - 如何在自定义类的自定义函数中引用 "self"？

Question

如何在类中定义的自定义函数内引用自定义类的实例？

我通过 ExtJS4 的类扩展“机制”扩展了一个类，并且我有一个自定义事件处理程序，当触发某些内容时将调用该处理程序，并且我想在触发某些内容时折叠面板。

但是，在下面的 Reactor 类的事件处理程序中，“this”引用了 EventTriggerer(事件的触发者)而不是 Reactor 的实例。如何在自定义函数中引用 EventReactor 的实例？

谢谢!达世币

Ext.define('EventReactor', {
    extend: 'Ext.panel.Panel',
    onSomething: function(data) {
        // ERROR
        // this.collapse is undefined. "this" actually references EventTriggerer
        this.collapse();
    }
});

Ext.define('EventTriggerer', {
    extend: 'Ext.util.Observable',
    singleton: true,
    constructor: function() {
        this.addEvents({
        "changedView" : true
    });
},
doSomething: function() {
    // Do some stuff
    this.fireEvent("doneSomething", data);
    }
});

...

// Here's how the listeners are added
var er = Ext.create('EventReactor');
EventTriggerer.addListener("doneSomething", er.onSomething);

// Here's how the event is triggered.
er.doSomething();

Answer 1

您应该创建一个嵌套范围来在构造函数执行期间存储“this”:

Ext.define('EventReactor', function() {
    var self;  // This is a variable to store "this"

    return {
        extend: 'Ext.panel.Panel',

        constructor: function() {
            self = this;  // Here you store "this" in the closure
            self.callParent(arguments);
        },

        onSomething: function(data) {
            // ERROR
            // this.collapse is undefined. "this" actually references EventTriggerer
            // this.collapse();

            // Using "self" instead of "this" => No error
            self.collapse();
        }
    };
});

详细信息(参见定义方法):http://docs.sencha.com/ext-js/4-1/#!/api/Ext