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

Question

我已经注释了相关代码。通过反复试验，我发现我必须在事件处理程序和命名回调中都使用绑定(bind)才能使事情正常工作。

我觉得这不直观，因为我认为命名的回调会调用函数，并将 this 的值指向包含的对象文字。

我知道事件处理程序需要绑定(bind) b.c。通常回调会指向触发事件的元素。

但是第二个绑定(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 是未定义的，回落到全局对象。

关于绑定(bind)的事件处理程序，您可能对另一种方法感兴趣，它使您的对象实现 EventHandler 接口(interface)。 stackoverflower 的一位同事最近一直在建议，请参阅 How to Implement DOM Data Binding in JavaScript 的已接受答案。 .