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 的范围 = 在内部调用返回对象的“公共(public)”方法。

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 中的词法作用域这个相当 NumPy 的主题的文章……但没有得出任何结论。

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

Answer 1

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

如果您知道该函数将始终使用正确的 this 值调用(例如，原型(prototype)上的方法)，则使用 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 属性而不是全局对象本身？