Javascript设置对象属性为"只读"
<p>有时为了保护某些属性，让其无法被更改，我们会把他们设置为<strong><em>常量。</em></strong></p><p>在某些语言里面，也许会用const来实现这样的功能。本文讲述如何在Javascript中实现这样的功能。</p>
<p> </p>
<p><strong>方法一:</strong></p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif"></span></div>
<pre>var myObject = {
get readOnlyProperty() { return 1024; }
};
alert(myObject.readOnlyProperty); // 1024
myObject.readOnlyProperty = 5; // 可以设置，但不管用
alert(myObject.readOnlyProperty); // 1024</pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif"></span></div>
</div>
<p>如果你已经定义好了一个Object，那么你可以这么做</p>
<div class="cnblogs_code">
<pre>var myObject = {};
myObject.__defineGetter__("readOnlyProperty", function() { return 1024; });</pre>
</div>
<p>上面的这两段代码兼容Firefox,Opera 9.5+, Safari 3+和Chrom，不过杯具的是，这些代码是不兼容IE的。</p>
<p> </p>
<p><strong>方法二:</strong></p>
<p>对于支持ECMAScript 5的Javascript解释器，你可以使用Object.defineProperty方法来实现这样的功能。</p>
<p>在松散模式，Javascript解释器会直接忽略掉属性的写入。在严格模式(strict mode)下，解释器会抛出一个错误。</p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif"></span></div>
<pre>var obj = {};
Object.defineProperty( obj, "<属性名>", {
value: "<属性值>",
writable: false,
enumerable: true,
configurable: true
});</pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif"></span></div>
</div>
<p>不过很明显，这代码是无法在那些不支持ECMAScript 5的浏览器（当然包括IE）上执行的。</p>
<p> </p>
<p><strong>方法三:</strong></p>
<p>使用模块模式去模拟出这样的功能，不废话，直接看代码</p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif"></span></div>
<pre>var CONFIG = (function() {
var private = {
'MY_CONST': '1',
'ANOTHER_CONST': '2'
};<br>
return {
get: function(name) { return private; } //函数返回一个对象，有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</pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif"></span></div>
</div>
<p>这个方法兼容目前全部浏览器(包括IE)，只是读属性的时候需要使用get。</p>
<p> </p>
<p><strong>方法四:</strong></p>
<p>在大部分情况下，你并不需要完全控制变量不可写。在业内有个约定，就是使用全大写的字母来表示常量（只读变量）。这是最简单，最好的方法。</p>
<div class="cnblogs_code">
<pre>var MY_CONSTANT = "some-value";</pre>
</div>
<p>这样写，来告诉自己，这个变量不可以改变!!!</p>
<p> <strong>方法五: </strong>“冻结”对象</p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif"></span></div>
<pre>1 var obj = {a:1};
2
3 Object.freeze(obj);
4
5 obj.pro1 = 2;
6
7 console.log(obj.pro1);//显示1</pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif"></span></div>
</div>
<p> 这里更厉害了，属性特性什么的完全不管，直接将整个对象“冻结”。Object.freeze()函数在标准中的描述是“Prevents the modification of existing property attributes and values, and prevents the addition of new properties.”。即：阻止修改对象中现有属性的值和特性，并阻止添加新属性。这样，整个对象都成了只读的了，对象里面无论有多少属性，统统都变成只读的了。</p>
<p><strong>方法六:</strong>. 闭包</p>
<p> 前面用了一些看上去很炫酷的方法，提升一下B格，其实要说实现只读，用的最多的当属我大闭包了。</p>
<p> </p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif"></span></div>
<pre> 1 var cache = (function(){
2 var a = 1;
3
4 return function(){
5 return a;
6 }
7
8 })();
9
10 console.log(cache());</pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif"></span></div>
</div>
<p> 这里用了闭包的缓存功能，将匿名函数中的a变量缓存起来，间接实现了只读的功能。</p><br><br>
来源：https://www.cnblogs.com/meek/p/13398559.html
頁:
[1]