Question

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

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

这是我的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将上下文绑定到该函数，您需要SHIM才能实现浏览器兼容性：

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

Updated JSFiddle

Answer 2

将名称变量设为私有？

Javascript（arPerson）

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

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

2 个答案: