0

こんにちは私はjavascriptに非常に慣れていません。複数のeラーニングモジュールをロードし、それらをxml経由で相互作用させるためのjavascriptフレームワークを作成するタスクが与えられました。

以下に示すような継承方法を使用しています。

基本クラスEventDispatcher：

(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を継承するSubXMLLoaderクラス：

(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になるはずです。[]しかし、それは起こっていません。私を助けて、私がどこで間違っているのか教えてください。

4

1 に答える 1

1

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" */
}
于 2012-05-28T11:47:48.320 に答える