javascript - 添加事件监听器后的原型(prototype)继承问题

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 或两者的定义移至构造函数中，以便能够获得正确的范围来捕获 这个。
这是一个例子..

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 直接在您的原型(prototype)中，而不是在另一个对象中。