JS模塊模式：如何初始化本地對象

我很困惑如何初始化JS模塊實現中的本地對象。我有一個局部變量（一個對象），我嘗試訪問我返回的對象字面值;但是，當我嘗試向該對象添加新屬性時，它說它是未定義的。但如果我不這樣做，我可以輕鬆地將本地對象的值設置爲其他任何值。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

來源

2016-02-25 fumeng

您的IDE是正確的。請不要混淆變量和屬性。 – Bergi

看來，這正是我正在做的。所以如果我想設置一個本地屬性，然後再獲取它，那麼最好的方法是什麼？ – fumeng

你可以使用'return {myPropObj：{}，setObject：function（）{... this.myPropObj ...}};'。當然，屬性永遠不是真正的「本地」屬性，任何可以訪問該對象的人都可以訪問它們。 – Bergi

問題是myLocalObj不是返回的對象的屬性，它是一個屬於範圍的本地var。因此，您可以直接使用

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]; 
}

希望你覺得它有用！

來源

2016-02-25 19:46:33 sminutoli

非常有用，謝謝。 – fumeng

我會解釋爲什麼這些線都在做，你看到的：

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

來源

2016-02-25 19:43:40

我相信第一條語句工作得很好，因爲它感覺就像是在創建一個新對象並指定一個初始值。但是第二條語句失敗了，因爲它不能在創建新對象的同時創建新屬性。 – fumeng

在你的代碼中，這個引用了返回的對象。因此使用這個修改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'));

來源

2016-02-25 19:56:06

我認爲「this」引用上面提到的「api」對象，而不是引用的函數。 – fumeng

你是對的，我錯了，我會編輯我的答案，無論如何，它讓你直接訪問myLocalObj，因爲它在範圍內。 –

JS模塊模式：如何初始化本地對象

回答

相關問題