ECMA5弄了一個新東西, 就是用戶可以通過Object.defineProperty配置屬性的可寫,可配置,可枚舉, 讓我們開發者可以定義一些屬性,這些屬性有點像native的趕腳
比如,我們平常定義一個對象這樣子就可以了;
var obj0 = { name : "nono" };
我們也可以用新的方式,Object的屬性設置方法defineProperty設置屬性, 如果用戶沒有傳enumberable, configurable, writable的值, 默認是false, 也就是說默認是無法枚舉,無法配置, 無法可寫的:
var obj1 = {}; Object.defineProperty(obj1, "name",{ writable : false, configurable : false, enumerable : false, value : "nono" });
writable
這個配置是不可寫的,所以把對象obj1的name重新定義無效,(在ecma的嚴格模式報錯);
<html> <body> <script> var obj1 = {}; Object.defineProperty(obj1, "name",{ writable : false, value : "nono" }); console.log("我的名字是: "+ obj1.name); //重新定義名字; obj1.name = "qihao"; //刪除名字 delete obj1.name; console.log("我的新名字是: "+ obj1.name); </script> </body> </html>
這個是打印出來的結果:,聲明我們刪除和重新定義名字的代碼沒生效, 因為writable是false;
我們把元素的writable的配置從true改到false,再改到true,會報錯
<html> <head> <meta charset="utf-8" /> </head> <body> <script> var obj1 = {}; Object.defineProperty(obj1, "favor",{ writable : true, value : "poppin" }); Object.defineProperty(obj1, "favor",{ writable : false, value : "readBook" }); try{ //如果重新定義可寫屬性從false到true會報錯; Object.defineProperty(obj1, "favor",{ writable : true, value : "poppin" }); }catch(e) { console.log( "definedProperty error" + e ); } </script> </body> </html>
,因為默認的configurable是false, 所以重新配置writable報錯了;
configurable
現在的cofigurable派上用場了:
<html> <head> <meta charset="utf-8" /> </head> <body> <script> var obj1 = {}; Object.defineProperty(obj1, "favor",{ writable : true, configurable : true, value : "poppin" }); console.log( obj1.favor ); Object.defineProperty(obj1, "favor",{ writable : false, configurable : true, value : "readBook" }); console.log( obj1.favor ); try{ //因為configurable為true了,所以重新定義favor的writable不會報錯; Object.defineProperty(obj1, "favor",{ writable : true, value : "poppin" }); }catch(e) { console.log( "definedProperty error" + e ); }; console.log( obj1.favor ); </script> </body> </html>
結果是:
也就是我們通過配置configurable為true, 那么隨時要更改enumerable,value, writable的配置為false或者true都沒有問題;
enumerable
<html> <head> <meta charset="utf-8" /> </head> <body> <script> var obj1 = {}; Object.defineProperty(obj1, "favor",{ enumerable : false, value : "poppin" }); Object.defineProperty(obj1, "age", { value : 27 }); Object.defineProperty(obj1, "weight",{ "value" : 64, enumerable : true }); for(var p in obj1)console.log( p ); </script> </body> </html>
就輸出了weight這個屬性, favor和age這兩個屬性沒有枚舉到;
Object.getOwnPropertyDescriptor
Object.getOwnPropertyDescriptor可以獲取詳細的描述, 不過還是沒有native的牛逼....;
Object.defineProperties
<html> <head> <meta charset="utf-8" /> </head> <body> <script> var obj1 = {}; Object.defineProperties(obj1,{ x : {value : "x"}, y : {enumerable : true}, z : {writable : true} }); for(var p in obj1)console.log( p ); </script> </body> </html>
通過defineProperties可以一次定義多個屬性, 方便快捷
訪問器屬性,get, set
<html> <head> <meta charset="utf-8" /> </head> <body> <script> var obj = {}; Object.defineProperty(obj, "name", { set : function(name) { this._name = name+" afterfix"; }, get : function() { return "prefix " + this._name; } }); obj.name = "nnnn"; console.log( obj.name ); </script> </body> </html>
old get,set ,非標準的Getter,Setter方法
在ecma5標準未被采納之前,大多數js解釋引擎實現了非標準的get,set方法, chrome下現在還有這些方法:
<html> <head> <meta charset="utf-8" /> </head> <body> <script> var obj = {}; obj.__defineGetter__("g", function() { return this._g+"__"; }); obj.__defineSetter__("g", function(arg) { this._g = arg; }); </script> </body> </html>
輸出結果:
文章列表