JS模块模式:如何初始化本地对象

JS Module Pattern: How to initialize a local object

本文关键字：初始化 对象 模块 模式 JS      更新时间：2023-09-26

我对如何在JS模块实现中初始化本地对象感到困惑。我有一个局部变量（一个对象），我尝试在我返回的对象文字中访问它;但是，当我尝试向该对象添加新属性时，它说它是未定义的。但是如果我不这样做，那么我可以轻松地将本地对象的值设置为其他任何值。

这是我的代码： 

var myModule = (function(){
    var myLocalObj = {}; // I always get a warning in the IDE that this var is never read
    return{
        setObject:function(coll){
            this.myLocalObj = coll; // this works just fine
            this.myLocalObj.newProp = coll.prop // fails because 'myLocalObj' is undefined. 
        },
        getObject:function(coll){
           return this.myLocalObj;
        }
    };
})();
myModule.setObject(obj); // this is what I call after an ajax call is complete

问题是myLocalObj不是返回对象的属性，而是属于该范围的本地变量。因此，您可以使用 

setObject:function(coll){
    myLocalObj = coll; // be aware! you're overriding the original {}
    myLocalObj.newProp = coll.prop // now it works as expected
}

因为闭包（setObject）可以访问范围变量。您还需要一个 getter 才能从外部访问数据

getObject:function(){
    return myLocalObj;
}

或者，如果您需要确保参考资料的安全

getProp:function(prop){
    return myLocalObj[prop];
}

希望你觉得有用！

我将解释为什么这些行会做你所看到的：

this.myLocalObj = coll; // this works just fine
this.myLocalObj.newProp = coll.prop // fails because 'myLocalObj' is undefined.

this.myLocalObj未定义。

所以undefined = 'some value'正在默默地失败。所以"这很好用"是不正确的。

this.myLocalObj.newProp与undefined.newProp相同。

undefined没有属性，newProp，因此错误。

当然，我还没有测试过这些，只是像每个优秀的程序员一样，对它进行翅膀测试！ :D

在代码中，this 引用返回的对象。因此，使用它会修改 api，而不是 myLocalObj。如果您希望能够为 myLocalObj 分配除已经存在的空对象以外的其他内容，则可能需要尝试这样的事情。

    var improvedModule = (function(){
    var myLocalObj = {};
    var api = {
        init: function(obj) {
            if (obj) {
                myLocalObj = obj;//if this is not an object the api may break doing this!!!
            }
        },
        get: function(prop) {
            if (myLocalObj[prop]) {
                return myLocalObj[prop];
            }
        },
        set: function(prop, val) {
            myLocalObj[prop] = val;
        }
    };
    return api;
})();
improvedModule.init({
    foo: true,
    bar: false
});
console.log(improvedModule.get('foo'));
相关文章：