Javascript 模块模式 - 失去这个范围

Question

一段时间以来一直在研究 js 模块模式，以满足“某些网站”不断升级的需求。本质上，我只需要一种对脚本进行分组/封装的好方法，以及有时对 OO 模式的需求。

我的结构可以正常工作，但我对它的某些部分不满意......所以我正在重构它。这是更新的模式：

(function (global) {
    var M = {
        VERSION : 1.0
    };

    global.M = M;

    //jQ document.ready()
    global.onload = function(){
        console.log('M VERSION: %s', M.VERSION);
        var main = new M.Main();
    };

    M.Main = function(){
        var _class1;
        var _class2;
        var _class3;

        function _init(){
            _class1 = new M.Class('foo','baz');
            console.log('_class1.param2 : %s', _class1.getParam() ); //works

            _class2 = new M.OtherClass('faz','boo');
            _class2.setParam('Boozaz');
            console.log('_class2.param2 : %s', _class2.getParam() ); //works

            _class3 = new M.Class('fuz','boz')
            console.log('_class3.param2 : %s', _class3.getParam() ); //works

            _class3.prototype = new M.Super();
            console.log('_class3.__param : %s', _class3.prototype.getProtected() ) //works
        }

        _init();
        return true;
    };

    M.Super = function(){
        var __param = 'jQ';
        M.Super.API = {
            getProtected : function(){ return __param }
        }
        return M.Super.API;
    }

    M.Class = function( p1, p2){
        var _param1;
        var _param2;

        function _init(){
            _param1 = p1;
            _param2 = p2;
        }

        function _getParam(){
            return _param2;
        }

        function _setParam(e){
            _param2 = e;
        }

        M.Class.API = {
            getParam : function(){ return _getParam(); },
            setParam : function(e){ _setParam(e) },
            publicMethod : function(){  ...  }
        }

        publicMethod() //fails
        this.publicMethod() //fails, this scopes to DOM window
        M.Class.API.publicMethod() // works, but is kludgy

        _init();
        return M.Class.API;
    };

})(typeof window === 'undefined' ? this : window);

这会产生令人满意的 DOM 结构（通过 firebug 进行检查） - 但我在一个特定区域中失去了 this 的范围 = 在内部调用返回对象的“公共”方法。

publicMethod() //fails
this.publicMethod() //fails, this scopes to DOM window
M.Class.API.publicMethod() // works, but kludgy syntax

在该模式的前一次迭代中，“类”对象是自执行的，并且对this 的引用保持不变：

    M.Class = function( p1, p2){
        var _param1;
        var _param2;
        var _root; 

        function _init(){
            _root   = this; //this gets referenced for later usage
            _param1 = p1;
            _param2 = p2;
        }

        function _getParam(){
            return _param2;
        }

        function _setParam(e){
            _param2 = e;
        }

        M.Class.API = {
            init     : function(){ _init();    },
            getParam : function(){ return _getParam(); },
            setParam : function(e){ _setParam(e) },
        }

        console.log('getParam, internal :%s', _root.getParam() ) //success
        return M.Class.API;
    }();

  M.Class.init();

然而，在重构模式中，我希望通过new 实例化这些“类”，以获得对执行顺序的更多控制。

我已经阅读了很多很多关于 js 中的词法范围这个相当令人麻木的主题的文章......但没有得出任何结论。

我应该如何在更新的模块模式中维护this 的范围？

Answer 1

这是每个人在编写库或模块时都会问的哲学问题之一：函数应该使用 this 还是变量名来引用容器对象？答案是：视情况而定。

如果您知道函数将始终使用正确的 this 值调用（例如，原型上的方法），请使用 this。但是，如果函数可能以任何其他方式调用，则使用变量名。如果您在稍后阶段决定更改名称，这是一个非常简单的搜索和替换练习。并且调用 myLib.utils.someFn 比调用 this.someFn 更清晰。如果您觉得输入太多，您可以随时回复到 var sF = myLib.utils.someFn 并从那里开始。

编辑

回答您的问题：

publicMethod() //fails

当前作用域内没有publicMethod标识符，会失败。

     this.publicMethod() //fails, this scopes to DOM window

如果调用是 M.Class()，则 this 是对 M 的引用。如果你得到 window，那么你是在以其他方式调用函数。

     M.Class.API.publicMethod() // works, but is kludgy  

因为您就是这样设置的。如果您不喜欢它，请以其他方式进行设置。

最后：

)(typeof window === 'undefined' ? this : window);

似乎是那些似乎在网络上扩散的神秘咒语之一。什么目的？如果意图是将全局对象的引用传递给函数，那么：

)(this);

在任何地方都足够了。上面的目的是确保函数具有对全局对象的引用，因为引用 window 可能会解析为其他对象。包括可能会或可能不会在全局对象中传递的逻辑似乎是一个倒退。在什么情况下最好引用全局对象的（可能重新分配的）window 属性而不是全局对象本身？

Answer 2

如果除了您通过M.Class.API 手动公开的方法之外，您的所有方法都是“私有的”怎么办？

function _getParam(){
  return _param2;
}

function _setParam(e){
  _param2 = e;
}

function publicMethod(){
  console.log("public method");
}

M.Class.API = {
  getParam : _getParam,
  setParam : _setParam,
  publicMethod : publicMethod
}

publicMethod();              // succeeds
this.publicMethod();         // still fails
M.Class.API.publicMethod();  // still works, still is kludgy

您还应该注意，使用 new 关键字调用该函数时，从函数返回匿名对象可能会产生意想不到的后果。见this Stack Overflow question。