javascript - 事件管理器 - this 在回调函数中未定义

Question

我正在尝试创建一个自定义的 javascript EventManager 类并添加一些回调函数。但是当调用回调函数时，函数中的“this”对象是未定义的。我看了Custom Javascript EventManager - please help me complete ，但这并不能完全回答我的问题。

为什么 this 和 this.name 在 this.onEvent 中未定义？请帮忙，谢谢。

这是我的jsfiddle:http://jsfiddle.net/Charissima/fswfv/3/

function arEventManager()   {

    this.callbacks = {};            

    this.addCallback = function(eventCategory, fn) {
        if (!this.callbacks[eventCategory]) {
            this.callbacks[eventCategory] = [];
        }
        if (fn instanceof Function) {
            this.callbacks[eventCategory].push(fn);
        }
        return this;
    }, // addCallback

    this.dispatchEvent = function(eventCategory, params) {
        // Callback-Funktion(en) ausloesen
        for (var iC = 0, lC = this.callbacks[eventCategory].length; iC < lC; iC++) {
            console.log( this.callbacks[eventCategory][iC] );
            this.callbacks[eventCategory][iC](params);
        }
    } // dispatchEvent              
};

function arPerson() {
    this.name;
    this.setName = function(name) {
        this.name = name;
    },
    this.getName = function() {
        return (this.name);
    },
    this.onEvent = function(p2) {
        alert('this.name = ' + this.name + ' / ' + 'p2.name = ' + p2.name);

    }
};


var eventManager = new arEventManager;

var Thomas = new arPerson();    
Thomas.setName('Thomas');

var Mike = new arPerson();  
Mike.setName('Mike');   

eventManager.addCallback("myEvent", Mike.onEvent);

function test() {
    eventManager.dispatchEvent('myEvent', Thomas);
}

Answer 1

这是因为您在调用函数时没有使用call或apply，并且在没有上下文的情况下调用它。例如:

• x.func() 调用 x.func，以便在函数内 this 引用 x.

• var func = x.func; func(); 调用 x.func，但没有为 this 指定值。

• x.func.call(y); 调用 x.func，以便在函数内 this 引用 y。

您可以使用 bind 将上下文绑定(bind)到函数，您需要 SHIM 来实现浏览器兼容性:

eventManager.addCallback("myEvent", Mike.onEvent.bind(Mike));

Updated JSFiddle