Javascript中的继承,我在这里做错了什么

Inheritance in Javascript, What am I doing wrong here?

本文关键字:在这里 错了 什么 继承 Javascript      更新时间:2023-09-26

嗨,我对javascript很陌生。 我的任务是创建一个JavaScript框架来加载多个电子学习模块,并使它们通过XML相互交互。

我正在使用如下所示的继承方法。

基类事件调度程序:

(function (window) {
    var EventDispatcher = function () {
            this._listeners = [];
        }
    var p = EventDispatcher.prototype;
    p._listeners = [];
    p.addListener = function (type, listener, scope) {
        scope = (typeof scope !== "undefined") ? scope : this;
        if (typeof this._listeners[type] == "undefined") {
            this._listeners[type] = [];
        }
        this._listeners[type].push({
            listener: listener,
            scope: scope
        });
    }
    p.removeListener = function (type, listener) {
        if (this._listeners[type] instanceof Array) {
            var listeners = this._listeners[type];
            for (var i = 0, len = listeners.length; i < len; i++) {
                if (listeners[i].listener === listener) {
                    listeners.splice(i, 1);
                    break;
                }
            }
        }
    }
    p.dispatchEvent = function (event) {
        if (typeof event == "string") {
            event = {
                type: event
            };
        }
        if (!event.target) {
            event.target = this;
        }
        if (!event.type) {
            throw new Error("Event object missing 'type' property.");
        }
        if (this._listeners[event.type] instanceof Array) {
            var listeners = this._listeners[event.type];
            for (var i = 0, len = listeners.length; i < len; i++) {
                listeners[i].listener.call(listeners[i].scope, event);
            }
        }
    }
    window.EventDispatcher = EventDispatcher;
}(window));

继承 EventDispatcher 的 Sub XMLLoader 类:

(function (window) {
    var XMLLoader = function () {}
    var p = XMLLoader.prototype = new EventDispatcher();
    p.xmlhttp = null;
    p.loadXML = function (url) {
        if (this.xmlhttp == null) {
            this.initXMLHttpRequest();
        }
        this.xmlhttp.open("GET", url, true);
        this.xmlhttp.send();
    }
    p.initXMLHttpRequest = function () {
        var currObj = this;
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            this.xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        this.xmlhttp.onreadystatechange = function () {
            var xmlLoaderEvent = null;
            if (currObj.xmlhttp.readyState == 4 && currObj.xmlhttp.status == 200) {
                xmlLoaderEvent = new XMLLoaderEvents();
                xmlLoaderEvent.type = XMLLoaderEvents.XML_DOC_SUCCESS;
                xmlLoaderEvent.data = {
                    xmlDoc: currObj.xmlhttp.responseXML,
                    xmlString: currObj.xmlhttp.responseText
                };
            } else if (currObj.xmlhttp.status == 404) {
                xmlLoaderEvent = new XMLLoaderEvents();
                xmlLoaderEvent.type = XMLLoaderEvents.XML_DOC_ERROR;
            }
            if (xmlLoaderEvent != null) {
                currObj.dispatchEvent(xmlLoaderEvent);
            }
        };
    }
    /*p.onReadyStateChange = function()
    {
        var xmlLoaderEvent = null;
        if(this.xmlhttp.readyState == 4 && this.xmlhttp.status == 200)
        {
            xmlLoaderEvent = new XMLLoaderEvents();
            xmlLoaderEvent.type = XMLLoaderEvents.XML_DOC_SUCCESS;
            xmlLoaderEvent.data = this.xmlhttp.responseXML;
        }
        else if(this.xmlhttp.status == 404)
        {
            xmlLoaderEvent = new XMLLoaderEvents();
            xmlLoaderEvent.type = XMLLoaderEvents.XML_DOC_ERROR;
        }
        if (xmlLoaderEvent != null)
        {
            this.dispatchEvent(xmlLoaderEvent);
        }
    }*/
    window.XMLLoader = XMLLoader;
}(window));

现在我在另一个类中多次调用 xmlLoader。在每次调用它之前,我使用 new XMLLoader(); 创建新实例。我的理解是,这应该创建一个新实例,基类中的this._listeners应该[]为空。但这并没有发生。请帮助我,告诉我哪里出错了。

在javascript中模拟时,类继承不会像往常一样工作。例如,没有隐式超类构造函数调用。

您不会在"子类构造函数"中调用"母类"构造器。这就是"母类"字段未初始化的原因。

而不是

var XMLLoader = function () {}

你应该写的是

var XMLLoader = function () {
    EventDispatcher.apply(this, arguments); /* this is a common way to execute
       the code of the "mother class" "constructor" with the same "this" */
}