Question

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

我没有发现这个直观，因为我认为命名回调会调用函数，其值为this，指向包含对象的文字。

我理解事件处理程序需要绑定b.c.通常，回调会指向触发事件的元素。

但是第二个绑定，（我验证是必需的），我不明白机制/概念。

有// *表示焦点区域。

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的人建议，请参阅How to Implement DOM Data Binding in JavaScript的接受答案。

Answer 2

在JavaScript中，当函数调用另一个函数时，'this'关键字会更改上下文。上下文是函数的直接调用者。

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

2 个答案: