configurable、enumerable和writable

物件是JavaScript中最為常見的語法結構。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼
let antzone={
  webName:"螞蟻部落",
  show:function(){
    console.log(this.webName);
  }
}

上面是一個物件直接量，具有兩個屬性（show也是一個屬性，只不過它的屬性值是一個函式）。

可見屬性是由屬性名和屬性值構成，再來看一段程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let antzone={
  webName:"螞蟻部落",
  show:function(){
    console.log(this.webName);
  }
}
antzone.webName="百度";
console.log(antzone.webName);

程式碼執行效果截圖如下：

將webName屬性值修改為"百度"，很自然列印結果是"百度"。

上面的操作看起來有點幼稚，實在過於基礎，再來看一段程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
Math.PI=88;
console.log(Math.PI);

程式碼執行效果截圖如下：

上述程式碼修改Math.PI屬性值，但並未成功。

由此可見，物件屬性並不只有屬性名和屬性值這麼簡單。

一.屬性分類：

當前JavaScript中屬性大致可以分為兩類：

（1）.資料屬性。

（2）.訪問器屬性。

本文只介紹資料屬性，關於訪問器屬性可以參閱JavaScript get set訪問器一章節。

二.資料屬性特性：

資料屬性具有四個描述其行為的特性，分別如下：

（1）.[[Configurable]]：描述屬性是否可以被刪除，特性是否可以被改變，或是否可以被修改為訪問器屬性。

（2）.[[Enumerable]]：描述屬性是否可以被遍歷。

（3）.[[Writable]]：描述屬性是否是可寫的。

（4）.[[Value]]：屬性值就儲存在此位置，讀取或者寫入屬性均操作此處。

特別說明：把名稱放入兩個中括號中表示是內部屬性，不能直接訪問它們。

看到這裡可能讀者還不太明白，不用擔心，後面會通過程式碼例項對它們進行詳細介紹。

三.設定屬性特性：

大多數情況下，建立一個物件不需要顯式設定屬性特性。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let antzone={
    webName:"螞蟻部落",
    address:"青島市南區"
}  
console.log(Object.getOwnPropertyDescriptor(antzone,"webName"));

程式碼執行效果截圖如下：

分析如下：

（1）.預設狀態下，configurable、enumerable和writable特性值為true。

（2）.屬性值儲存在Value特性處。

再來看一段程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let antzone = {}; 
Object.defineProperty(antzone,"webName",{
  value: "螞蟻部落"
});
console.log(Object.getOwnPropertyDescriptor(antzone,"webName"));

程式碼執行效果截圖如下：

分析如下：

（1）.通過Object.defineProperty方法建立的屬性，configurable、enumerable和writable特性值預設為false。

（2）.屬性值儲存在Value特性處。

四.各個特性介紹：

（1）.configurable特性：

規定屬性是否可以被delete，特性是否可以被更改，或者是否可以將資料屬性修改成訪問器屬性。

如果值為true，那麼上述操作都是允許的，否則被禁止。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let antzone = {
  url:"http://www.softwhy.com"
}; 
Object.defineProperty(antzone,"webName",{
  configurable: false,
  value: "螞蟻部落",
});
console.log(delete antzone.url);
console.log(delete antzone.webName);

程式碼執行效果截圖如下：

如果屬性configurable特性值為false，那麼它是無法被delete刪除。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
"use strict";
let antzone = {
  url:"http://www.softwhy.com"
}; 
Object.defineProperty(antzone,"webName",{
  configurable: false,
  value: "螞蟻部落",
});
Object.defineProperty(antzone,"webName",{
  configurable: true,
});

程式碼執行效果截圖如下：

在嚴格模式下，如果屬性的configurable特性值為false，configurable特性自身之也無法改變。

如果修改將會報錯，非嚴格模式下，雖然不會報錯，但是修改不會成功。

總結一句話，configurable特性值為false，value、writable、enumerable與configurable特性值都不能修改。

但是有一個例外，writable特性值可以由true改為false，由false改為true不允許。

（2）.writable特性：

如果特性值為false，那麼屬性是隻讀的。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
"use strict";
let antzone = {
  url:"http://www.softwhy.com"
}; 
Object.defineProperty(antzone,"url",{
  writable:false
});
antzone.url="baid.com"

程式碼執行效果截圖如下：

嚴格模式下，給只讀屬性賦值會報錯，非嚴格模式下雖然不會報錯，但是賦值不會成功。

（3）.enumerable特性：

此特性用來規定屬性的可列舉性，如果為false則是不可列舉。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
"use strict";
let antzone = {
  url:"http://www.softwhy.com",
  webName:"螞蟻部落"
}; 
Object.defineProperty(antzone,"url",{
  enumerable:false
});
for(let prop in antzone){
  console.log(prop);
}

程式碼執行效果截圖如下：

enumerable特性值為false，那麼此屬性就是不可列舉的。

（3）.value特性：

這個很簡單，就是用來儲存屬性值的，不多介紹。