添加事件监听器后的原型继承问题

Question

如何访问Test 对象的events 属性内的根this：

"use strict";

var Test = function (element, options) {


};

Test.prototype = {

    constructor: Test,

    events: {

        handleEvent: function (event) {

            // this.setup() should point to the Test.prototype.setup property
        },

        start: function (event) {


        }
    },

    setup: function () {


    }
};

在我使用以下语法将事件侦听器添加到元素之后：

document.getElementById.addEventListener("touchmove", this.events, false);

其中this.events 指的是Test 对象。在我测试之后，我注意到this 在这种情况下将是events 对象。如何以这种方式调整代码以使根对象在 events 对象的属性中可用？

Answer 1

您必须将 events、handleEvent 或两者的定义移到构造函数中，这样您才能获得正确的范围来捕获 this。
这是一个例子..

function EO() {
    this.ev = {      // copy over `handleEvent` and then capture the `this`
        handleEvent: EO.prototype.ev.handleEvent.bind(this) // with bind
    };
};
EO.prototype = {
    ev: {
         handleEvent: function (e) {
             console.log(
                 e,                    // event
                 this,                 // check `this`
                 this.prototype.ev.bar // how to access other properties
             );},
         bar: 'hello!'
    }
}
// construct
var foo = new EO();
// listen
document.body.addEventListener('click', foo.ev);

现在引发一些事件，您将看到正确的this。 如果您想避免通过this.prototype 访问所有内容，我建议您为其中一个对象 使用不同的名称，或者直接将handleEvent 直接放入您的原型中，而不是另一个对象。