javascript - 执行顺序 - 新对象的函数未定义

Question

我创建了一个应用程序对象，其中包含一个在构造函数中定义的空模块对象。

var App = function() {
    this.modules = {};
};

模块对象包含对构成应用程序并包含其逻辑的其他对象(模块)的引用。

我像这样实例化应用程序

window.app = new App();
app.createModules();

createModules() 使用应用程序的模块填充模块对象。然后，完成后，它运行 initModules() 来调用每个模块的 init() 函数。通过这种方式我希望能够控制执行顺序，以便依赖于其他对象的对象能够正确加载。其代码如下:

App.prototype.createModules = function() {
    console.log("Creating Modules");
    this.modules = {
        radio: new Radio(),
        visualiser: new Visualiser()
    };
    this.initModules(this.modules);
}
App.prototype.initModules = function() {
    console.log("Initialising modules");
    for (var key in this.modules) {
        if (this.modules.hasOwnProperty(key)) {
            var obj = this.modules[key];
            console.log(obj);
            console.log(obj.init); //logs 'undefined'
        }
    }
}

当前 obj.init 上的控制台日志返回未定义，这意味着我无法运行该对象的初始化代码。但是当页面加载完成时如果我调用

app.modules.radio.init

它返回函数。我似乎无法弄清楚为什么会发生这种情况。

干杯!

编辑 这是应用程序的结构:

var app = function() {
   ...
}

window.app = new App();
app.createModules();

function Radio() {
    ...
}
Radio.prototype.init = function() {
    ...
}

function Visualiser() {
    ...
}
Visualiser.prototype.init = function() {
    ...
}

//Event code

代码笔:https://codepen.io/anon/pen/EvggLZ?editors=0011

Answer 1

Here is the structure of app

是的，在原型(prototype)上创建方法之前调用这些方法。移动

window.app = new App();
app.createModules();

到脚本的底部，它就会起作用。