javascript - 在模块之间传递对象引用

Question

我对javascript相当陌生，并试图学习一些最佳实践。我不清楚为什么我无法访问以下代码中的 ctx 引用。日志从 myApp.init() 输出 context2d 引用。我不能在 myApp 模块的 return 语句中公开私有对象变量吗？我以为我开始了解这种语言的基础知识，但对这个看似简单的概念感到沮丧。谢谢你的帮助。

window.onload = function () {
    myApp.init();
    console.log(myApp.ctx);        // logs undefined
};

var myApp = (function () {    

    var canvas,
        ctx,
        init = function () {
            canvas = document.getElementById("canvas");
            ctx = canvas.getContext('2d');
            console.log(ctx);        // logs valid context2d object
        };

    return {
        init : init,
        ctx  : ctx
    };

}());

myApp.board = (function () {

    var ctx = myApp.ctx;

    return {
        ctx : function () { console.log(ctx); }   // logs undefined
    };

}());

Answer 1

你需要调用init()被ctx定义。然而，到那时，为时已晚，因为 myApp 包含 ctx 的原始值。

你有完全相同的问题var ctx = myApp.ctx;。在定义时获取 ctx 的值board。如果改变它不会改变myApp.ctx。

---

这应该有效：

var myApp = new function () {
    var canvas;

    this.init = function () {
        canvas = document.getElementById("canvas");
        this.ctx = canvas.getContext('2d');
        console.log(this.ctx);        // logs valid context2d object
    };
};

myApp.board = new function () {
    this.ctx = function () { console.log(myApp.ctx); }
};

By using the new keyword, the functions become constructors (and are invoked immediately) - this refers to the object being created.