js 中對象屬性特性的描述

如何自定義屬性的特性？

用對象.屬性的特性和自定義的屬性的特性有什麼區別？

它的四大特性 writable   enumerable   configable   有什麼區別？

先預習一個用對象.屬性定義 ，屬性的四大特性是以什麼方式呈現的。

這時個屬性的三大特性默認值都爲true。

代碼演示：

 

 1 <script>
 2     //用對象.屬性定義的屬性，它的三大特性都爲true
 3     function Foo(){}
 4     Foo.prototype.age = 22
 5     var obj = new Foo()
 6     obj.name = "ziksang"
 7     obj.addr = "上海"
 8     obj.telephone = 15921848427
 9     console.log(obj.name)//=>ziksang
10     obj.name = "博客園"   //修改了name屬性的值
11     console.log(obj.name) //=>博客園 由於此時定義的方式 writable爲true,因此能夠修改name的屬性值
12     for( var p in obj){    //由於此時定義的方式，enumerable爲true, 此時也是能夠枚舉的，
13         console.log(p)   //用for in枚舉能夠把對象原型上的屬性也枚舉出來，由於原型上的屬性也是用此定義屬性，因此他的enumerable也爲true
14     }
15     console.log(Object.keys(obj)) //用Object.keys(obj)方式枚舉只能枚舉對象自有的屬性
16     delete obj.addr         //刪除對象上addr屬性
17     console.log(obj.addr)      //=>undefined 由於用此定義時他的configurable爲true,因此是能夠刪除對象的
18     Foo.prototype.age = 33    //對於三大特性，我對原型上的屬性只作了一個修改的特性，由於原型上定義的方式若是也是對象.屬性定義的話，跟對象屬性的三大特性同樣，在此就不一一舉例了
19     console.log(Foo.prototype.age)  //=>33
20 </script>

 

 

     如何用Object.defineProperty自定義屬性的特性

 語法 ：

 Object.defineProperyty(obj,prop,descriptor)

 obj: 須要定義的對象

 prop：須要定義 或修改的屬性名

 descriptor:屬性定義或修改的屬性描述

 該方法容許精確添加或修改對象的屬性，正常屬性添加經過賦值來建立並顯示在屬性枚舉中（for in 循環或Object.keys()方法），這種 方式添加的屬性值可能被改變，也可能會被刪除。該方法容許改變這些額外細節默認設置。

configureable:當且僅當這個屬性描述符值爲true時，該屬性可能會改變，也可能會被從相應的對象刪除。默認爲false.

enumerable:true當且僅當該屬性出如今相應的對象枚舉屬性中。默認爲false.

value:與屬性有關的值。能夠是任何有效的javascript值。默認爲undefined.

writable:true當且僅當可能用賦值運算符改變與屬性相關的值。默認爲false.

第一種方式，當不設定三大屬性時？

代碼演示以下：

 1 <script>
 2     //若是用自定義Object.defineProperty方式來自定義屬性的話，沒有設置三大屬性爲true時，默認爲false,看看在默認狀況下會如何
 3     function Foo(){}
 4     Foo.prototype.age = 22
 5     var obj = new Foo()
 6     obj.name = "ziksang"
 7     Object.defineProperty(obj,"telephone",{
 8         value:15921848427    //這個語句的意思就是在obj對象上建立了一個telephone屬性，設定它的值爲15921848427，對它的三大屬性沒有任何設置，此時三大屬性爲默認false
 9     })
10     console.log(obj.telephone)   //由於上面自定義時賦值爲15921848427，因此獲取值爲159....
11     obj.telephone = 110    //此處我修改其屬性值
12     console.log(obj.telephone) //結果輸出結果仍是159....由於writable是默認值false，因此是不可修改的
13     for(var p in obj){   //此處輸出結果爲 name,age 由於用for in枚舉的是對象自身屬性和原型上的屬性，爲何沒有telephone呢？由於此時obj對象上屬性的特性enumerable也是默認false
14         console.log(p)
15     }
16     console.log(Object.keys(obj)) //此處輸出結果爲name，由於用object.keys枚舉的是對象自身的屬性
17     delete obj.telephone;  //刪除telephone屬性
18     console.log(obj.telephone) //由於自定義的屬性特性默認值爲false 因此是不能夠刪除的
19 
20 
21     //對象上的原型也能夠用此方法定義屬性
22     Object.defineProperty(Foo.prototype,"addr",{
23           value:"上海"       //對象原型上自定義一個屬性addr 三大特性都爲默認值
24     })
25     console.log(obj.addr);  //=>上海
26     for( var k in obj){     //=>name,age 由於上面addr的enumerable默認值是false，因此也是不能夠枚舉的
27         console.log(k)
28     }
29     delete Foo.prototype.addr   //=刪除對象原型屬性
30     console.log(obj.addr)     //=>上海   由於對象原型上屬性特性configurable默認爲false，因此是不可刪除的
31 </script>

第二種方式，當三大屬性都爲true時，又有什麼不一樣？

 1 <script>
 2     //若是用自定義Object.defineProperty方式來自定義屬性的話，設置三大屬性爲true時,看看如下狀況又會如何
 3     function Foo(){}
 4     Foo.prototype.age = 22
 5     var obj = new Foo()
 6     obj.name = "ziksang"
 7     Object.defineProperty(obj,"telephone",{
 8         value:15921848427,
 9         writable:true,
10         enumerable:true,
11         configurable:true//這個語句的意思就是在obj對象上建立了一個telephone屬性，設定它的值爲15921848427，對它的三大屬性都設爲true
12     })
13     console.log(obj.telephone)   //由於上面自定義時賦值爲15921848427，因此獲取值爲159....
14     obj.telephone = 110    //此處我修改其屬性值
15     console.log(obj.telephone) //結果輸出結果仍是110 由於writable是爲true ,因此是可修改的
16     for(var p in obj){   //此處輸出結果爲 name,telephone,age 由於用for in枚舉的是對象自身屬性和原型上的屬性，爲何沒有telephone呢？由於此時obj對象上屬性的特性enumerable也是默認false
17         console.log(p)
18     }
19     console.log(Object.keys(obj)) //此處輸出結果爲name，telephone由於用object.keys枚舉的是對象自身的屬性
20     delete obj.telephone;  //刪除telephone屬性
21     console.log(obj.telephone) //由於自定義的屬性特configurable爲false 因此是能夠刪除的
22 
23 
24     //對象上的原型也能夠用此方法定義屬性
25     Object.defineProperty(Foo.prototype,"addr",{
26           value:"上海",
27         writable:true,
28         enumerable:true,
29         configurable:true//對象原型上自定義一個屬性addr 三大特性都爲true
30     })
31     console.log(obj.addr);  //=>上海
32     Foo.prototype.addr = "北京"
33     console.log(obj.addr)//由於writable設爲true,因此能夠修改原型的屬性，因此輸出是北京
34     for( var k in obj){     //=>name,age，addr 由於上面addr的enumerable爲true，因此也是能夠枚舉的
35         console.log(k)
36     }
37     delete Foo.prototype.addr   //=刪除對象原型屬性
38     console.log(obj.addr)     //=>undefined   由於對象原型上屬性特性configurable爲true，因此是可刪除的
39 </script>

再來深刻了解configurable配置項.

當configurable爲flase時 對屬性從定義其特性時writable,enumerable的狀況如何？

 1 <script>
 2     //若是用自定義Object.defineProperty方式來自定義屬性的話，設置三大屬性爲true時,看看如下狀況又會如何
 3     function Foo(){}
 4     Foo.prototype.age = 22
 5     var obj = new Foo()
 6     obj.name = "ziksang"
 7     Object.defineProperty(obj,"telephone",{
 8         value:15921848427,
 9         writable:false,//若是把三大特性都設爲false
10         enumerable:false,
11         configurable:false
12     })
13     Object.defineProperty(obj,"telephone",{
14         writable:true,     //再把writable 和enumerable再從新定義
15         enumerable:true
16     })                    //結果如下都報錯，返回空數組，緣由是configurable是一個配置項，當配置項爲false時，其它兩個特性則不能被從新定義
17     for(var p in obj){
18         console.log(p)
19     }
20     console.log(Object.keys(obj))
21     obj.name = "博客園"
22     console.log(obj.name) 
23 </script>

 

當configurable爲true時 對屬性從定義其特性時writable,enumerable的狀況如何？

 1 <script>
 2     //若是用自定義Object.defineProperty方式來自定義屬性的話，設置三大屬性爲true時,看看如下狀況又會如何
 3     function Foo(){}
 4     Foo.prototype.age = 22
 5     var obj = new Foo()
 6     obj.name = "ziksang"
 7     Object.defineProperty(obj,"telephone",{
 8         value:15921848427,
 9         writable:false,//若是把configurable設爲true,其它設爲false時
10         enumerable:false,
11         configurable:true
12     })    
13     Object.defineProperty(obj,"telephone",{
14         writable:true,     //再把writable 和enumerable再從新定義
15         enumerable:true
16     })                 //如下都會返回結果，因可配置的特性configurable設爲true，因此其它兩個物性均可以重新定義爲true    
17     for(var p in obj){    //=>name,age ,telephone
18         console.log(p)
19     }
20     console.log(Object.keys(obj)) //=>name,telephone
21     obj.name = "博客園"
22     console.log(obj.name)   //=>博客園
23 </script>