javascript - 需要一些帮助来理解 JS 模块模式的基础知识

Question

我正在尝试使用揭示模块模式来组织我的代码。 我有一个关于如何设置 setter 方法的非常基本的问题。

$(document).ready(function() {  
    var designs = (function() {  
        var curRow,  
            setCurRow = function(val) {  
                curRow = val;  
            },
            initTable = function() {  
                setCurRow(0);
            };
        return {
            curRow : curRow,
            setCurRow : setCurRow,
            initTable : initTable
        }
    }) ();  
    designs.initTable();  
    designs.setCurRow(someNewVal);
    console.log(designs.curRow);
});

问题是我在控制台输出中没有得到 someNewVal，而是得到了 undefined !我有一种感觉，我在这里做了一些很愚蠢的事情。

Answer 1

您还可以通过了解所涉及的变量和函数的范围来以另一种方式解决此问题。

当您返回对象构造函数 { curRow: curRow ... } 时，只会将名为 curRow 的对象成员初始化为值匿名函数作用域内变量 curRow 的值；它不会在它们之间创建任何持久连接。

一旦匿名函数返回，调用designs.setCurRow将完​​全按照您的预期更新该范围内的curRow变量，但该变量现在完全无法从外部访问world —— 它和 designs 的 curRow 成员之间没有任何联系。

您可以通过使 setCurRow 方法对 this.curRow 进行操作来解决此问题，就像其他解决方案一样。在这种情况下，您不需要将 curRow 设置为原始作用域中的变量，因为它完全未使用。另一种解决方案是向当前方法添加“getter”方法:

var designs = (function() {  
    var curRow,  
    setCurRow = function(val) {  
        curRow = val;  
    },
    getCurRow = function() {
        return curRow;
    },
    initTable = function() {  
        setCurRow(0);
    };
    return {
        getCurRow : getCurRow,
        setCurRow : setCurRow,
        initTable : initTable
    };
}) ();  
designs.initTable();  
designs.setCurRow(someNewVal);
console.log(designs.getCurRow());

因为 getCurRow 和 setCurRow 是在包含变量 varRow 的作用域中关闭的函数，因此它们可以返回该范围并访问和更改只能在该范围内访问的变量。

在这种情况下，使 curRow 成为您返回的对象的成员可能更简单，但另一种方法也很有用，因为您可以使用它来有效地创建 private members and methods .