Javascript設置對象屬性為"只讀"

有時為了保護某些屬性，讓其無法被更改，我們會把他們設置為常量。

在某些語言里面，也許會用const來實現這樣的功能。本文講述如何在Javascript中實現這樣的功能。

 

方法一:

var myObject = {
    get readOnlyProperty() { return 1024; }
};

alert(myObject.readOnlyProperty); // 1024
myObject.readOnlyProperty = 5;    // 可以設置，但不管用
alert(myObject.readOnlyProperty); // 1024

如果你已經定義好了一個Object，那么你可以這么做

var myObject = {};
myObject.__defineGetter__("readOnlyProperty", function() { return 1024; });

上面的這兩段代碼兼容Firefox,Opera 9.5+, Safari 3+和Chrom，不過杯具的是，這些代碼是不兼容IE的。

 

方法二:

對於支持ECMAScript 5的Javascript解釋器，你可以使用Object.defineProperty方法來實現這樣的功能。

在松散模式，Javascript解釋器會直接忽略掉屬性的寫入。在嚴格模式(strict mode)下，解釋器會拋出一個錯誤。

var obj = {};
Object.defineProperty( obj, "<屬性名>", {
  value: "<屬性值>",
  writable: false,
  enumerable: true,
  configurable: true
});

不過很明顯，這代碼是無法在那些不支持ECMAScript 5的瀏覽器（當然包括IE）上執行的。

 

方法三:

使用模塊模式去模擬出這樣的功能，不廢話，直接看代碼

var CONFIG = (function() {
     var private = {
         'MY_CONST': '1',
         'ANOTHER_CONST': '2'
     };
　　
    return {
        get: function(name) { return private[name]; } //函數返回一個對象，有get方法，接收name參數，返回內部私有變量的值
    }; 
})();

alert(CONFIG.get('MY_CONST'));  // 1

CONFIG.MY_CONST = '2';
alert(CONFIG.get('MY_CONST'));  // 1

CONFIG.private.MY_CONST = '2';                 // 錯誤，沒有private屬性
alert(CONFIG.get('MY_CONST'));  // 1

這個方法兼容目前全部瀏覽器(包括IE)，只是讀屬性的時候需要使用get。

 

方法四:

在大部分情況下，你並不需要完全控制變量不可寫。在業內有個約定，就是使用全大寫的字母來表示常量（只讀變量）。這是最簡單，最好的方法。

var MY_CONSTANT = "some-value";

這樣寫，來告訴自己，這個變量不可以改變!!!

 

總結:

我個人比較推薦最后一種做法。簡單明了，約定 也是解決很多問題的最好方法。

其次是方法三，模塊模式是比較好的模式，而且這種方法兼容性良好，因為我想大部分人用Javascript都是需要在IE上運行的。

第二種方法是標准方法，如果以后Javascript解釋器都支持ECMAScript 5的話。

 

本文參考:stackoverflow.com