javascript-無法在兩個類實例之間傳遞值

Question

我為我的其余類定義了一個根對象，希望將其用作“命名空間”。 在這個根對象中，我有兩個類-工具和演示。 在PRESENTATION類中，我需要從TOOLS調用公共方法之一。 正如我在執行此代碼的每個步驟中使用console.log之后所知道的那樣， return xhr.responseText不會將任何內容傳遞回tools.getData(configPath)而我最終會在console.log(pres.config)使用undefined結束console.log(pres.config) 。

碼：

// Create Namespace
var AppSpace = AppSpace || {}; 

// Class and Constructor
AppSpace.Tools = function() {

        //public methodts
        this.test = function(arg) {
            return arg                      
        }

        this.getData = function(path) {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', path, false);
            xhr.onreadystatechange = function() {
                if (xhr.readyState !== 4) return;
                if (xhr.status !== 0 && xhr.status !== 200) {
                    if (xhr.status === 400) {
                        console.log("Could not locate " + path);
                    } else {
                        console.error("app.getData " + path + " HTTP error: " + xhr.status);
                    }
                    return;
                }
                return xhr.responseText;
              };
              xhr.send();
        } 

}


// Class and Constructor
AppSpace.Presentation = function(initName, initfPath){

        //private properties
        var configPath = initfPath || 'config.json';
        var configData = null;
        var name = initName || 'Unnamed Presentation';  

        //private methods
        var getConfigContent = function() {
            return tools.getData(configPath);
        }

        var getConfigData = function() {
            return JSON.parse(getConfigContent);
        }


        //public methodts


        //public properties
        this.name = null;
        this.config = null;
        this.debug = null;

        //logic
        this.name = name;
        this.config = getConfigContent();


}

//execution
var tools = new AppSpace.Tools();               
var pres = new AppSpace.Presentation('Some Name');

pres.debug = tools.test('value passed')
console.log(pres.debug);
console.log(pres.config);
console.log(pres.name);

瀏覽器控制台中的輸出為：

value passed js-oop.dev:99
**undefined js-oop.dev:100**
Some Name js-oop.dev:101

誰能對此提供一點建議？ TIA。

Answer 1

我的意思是，如果您希望ajax控件直接從函數中返回一些數據，則必須使用同步方法。 沒有它，數據將從onreadystatechange事件發送。

這是一個如何為ajax創建同步調用的示例

// Create Namespace
        var AppSpace = AppSpace || {}; 

        // Class and Constructor
        AppSpace.Tools = function() {

                //public methodts
                this.test = function(arg) {
                    return arg                      
                }

                this.getData = function(path) {
                    var xhr_object= new XMLHttpRequest();
                    // Start synchronous ajax
                    xhr_object.open("GET", path, false);
                    xhr_object.send(null);
                    // Return data
                    return xhr_object.responseText;
                } 

        }


        // Class and Constructor
        AppSpace.Presentation = function(initName, initfPath){

                //private properties
                var configPath = initfPath || 'config.json';
                var configData = null;
                var name = initName || 'Unnamed Presentation';  

                //private methods
                var getConfigContent = function() {
                    return tools.getData(configPath);
                }

                var getConfigData = function() {
                    return JSON.parse(getConfigContent);
                }


                //public methodts


                //public properties
                this.name = null;
                this.config = null;
                this.debug = null;

                //logic
                this.name = name;
                this.config = getConfigContent();


        }

        //execution
        var tools = new AppSpace.Tools();               
        var pres = new AppSpace.Presentation('Some Name');

        pres.debug = tools.test('value passed')
        console.log(pres.debug);
        console.log(pres.config);
        console.log(pres.name);​

Answer 2

首先，在此代碼中：

this.getData = function(path) {
                    var xhr = new XMLHttpRequest();
                    xhr.open('GET', path, false);
                    xhr.onreadystatechange = function() {
                        if (xhr.readyState !== 4) return;
                        if (xhr.status !== 0 && xhr.status !== 200) {
                            if (xhr.status === 400) {
                                console.log("Could not locate " + path);
                            } else {
                                console.error("app.getData " + path + " HTTP error: " + xhr.status);
                            }
                            return;
                        }
                        return xhr.responseText;
                      };
                      xhr.send();
                } 

return xhr.responseText; 不管用。 它位於處理程序函數內部，值將從xhr.onreadystatechange返回，但不會從getData ，因此您可以執行以下操作：

this.getData = function(path) {
                        var res;
                        var xhr = new XMLHttpRequest();
                        xhr.open('GET', path, false);
                        xhr.onreadystatechange = function() {
                            if (xhr.readyState !== 4) return;
                            if (xhr.status !== 0 && xhr.status !== 200) {
                                if (xhr.status === 400) {
                                    console.log("Could not locate " + path);
                                } else {
                                    console.error("app.getData " + path + " HTTP error: " + xhr.status);
                                }
                                return;
                            }
                            res = xhr.responseText;
                          };
                          xhr.send();
                          return res;
                    } 

同樣，這應該類似於下一個（您正在嘗試解析一個函數，而不是它返回的內容）

 var getConfigData = function() {
     return JSON.parse(getConfigContent());
 }

Answer 3

如果您想使其保持異步，則可以執行以下操作。 根據您的需要，我要么刪除dest和prop參數，要么刪除回調。

    this.getData = function(path, dest, prop, callback) {
        callback = callback || null;
        var xhr = new XMLHttpRequest();
        xhr.open('GET', path, false);
        xhr.onreadystatechange = function() {
            if (xhr.readyState !== 4) return;
            if (xhr.status !== 0 && xhr.status !== 200) {
                /* ... */
            }
            dest[prop] = xhr.responseText;
            if (Callback) callback(xhr.responseText);
          };
          xhr.send();
    } 

    //private methods
    var getConfigContent = function() {
        return tools.getData(configPath, this, 'config', );
    }