从事件处理程序回调调用的函数中'this'的值？

Question

我已就有关守则作出评论。我通过反复试验发现，我必须在事件处理程序和命名回调中都使用bind，才能使事情正常工作。

NS.parsel({
    Name: 'MSimMenu',
    E: {
        hold_name:         '#hold_name',
        wrap_bottom:       '#wrap_bottom'
    },
    A: {
        time_out_id:        null,
        TIME_DELAY:         1000
    },
    init: function () {
        var self = this;
        self.E.hold_name.addEventListener(   "mouseover",   self.mouseOverTop.bind(self),    false);
        self.E.wrap_bottom.addEventListener( "mouseover",   self.mouseOverBottom.bind(self), false);
        self.E.wrap_bottom.addEventListener( "mouseout",    self.mouseOut.bind(self),        false);
        self.E.hold_name.addEventListener(   "mouseout",    self.mouseOut.bind(self),        false);
    },

    // callbacks

    mouseOverTop: function () {
        NS.clearTimeout(this.A.time_out_id);
        this.showBottom();
    },
    mouseOverBottom: function () {
        NS.clearTimeout(this.A.time_out_id);
    },        
    mouseOut: function () {

        // * this regards the question
        // bind is required here for hideBottom to have correct value of this

        this.A.time_out_id = NS.setTimeout(this.hideBottom.bind(this), this.A.TIME_DELAY);
    },

    // called from callbacks

    showBottom: function () {
        this.E.wrap_bottom.style.visibility = 'visible';
    },
    hideBottom: function () {
        this.E.wrap_bottom.style.visibility = 'hidden';
    }
});

Answer 1

这是因为this是根据函数的调用方式确定的。对于settimeout回调，它不是在NS对象的上下文中调用的，而是作为一个独立的函数调用的。在本例中，this是未定义的，返回到全局对象。

关于绑定事件处理程序，您可能对另一种方法感兴趣，该方法使您的对象实现EventHandler接口。stackoverflower的一位同事最近建议，看看如何在JavaScript中实现DOM数据绑定的公认答案。