Object.defineProperty()

JavaScript中，建立物件、為物件新增屬性或者修改屬性值是極為簡單基礎的操作。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼
let antzone = {
  webName:"螞蟻部落",
  url: "http://www.softwhy.com",
  age:4
};

上述程式碼建立一個物件，具有三個屬性，非常簡單。

現在螞蟻部落成立4年了，到明年，應該就是五年了，需要修改一下：

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

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

上述程式碼將age屬性值修改為5，從結果來看屬性值也修改成功。

一切很正常，當然也很簡單，再來看一段程式碼例項：

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

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

上面修改屬性值沒有成功，那麼可以說Math.PI是隻讀屬性。

這裡就有一個疑問，如何將antzone物件的age屬性修改為只讀。

這時Object.defineProperty方法的功能就得以體現。

此方法可以將具有指定特性的屬性新增到物件，或者修改現有屬性的特性。

返回值是修改後的新物件。

更多內容可以參閱JavaScript Object 物件一章節。

ES5新增此方法。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
Object.defineProperty(object, propertyname, descriptor)

語法結構:

（1）.object：必需，要新增屬性或者修改屬性的物件。

（2）.propertyname：必需，屬性名稱。

（3）.descriptor：必需，一個物件直接量，用來設定資料屬性或訪問器屬性的特性。

關於資料屬性或者訪問器屬性可以參閱如下兩篇文章：

（1）.資料屬性參閱configurable、enumerable和writable一章節。

（2）.訪問器屬性參閱JavaScript get與set訪問器屬性一章節。

瀏覽器支援：

（1）.IE9+瀏覽器支援此方法。

（2）.edge瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.火狐瀏覽器支援此方法。

（5）.opera瀏覽器支援此方法。

（6）.safria瀏覽器支援此方法。

程式碼例項：

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

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

可以看到上述程式碼修改age屬性值為5失敗。

通過Object.defineProperty方法修改antzone物件age屬性的writable特性為false。

writable特性負責屬性是否可寫，如果值為true，那麼屬性就是可寫，為false，就是隻讀。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let antzone = {
  webName:"螞蟻部落",
  url: "http://www.softwhy.com",
  age:4
};
Object.defineProperty(antzone,"address",{
    value:"青島市南區",
    writable:true,
    enumerable:true,
    configurable:true
});
console.log(antzone.address);

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

上面程式碼為antzone物件新增一個新屬性address。

通過Object.defineProperty方法的第三個引數可以設定address屬性的特性。

（1）.value屬性值為"青島市南區"。

（2）.address是可寫的。

（3）.address屬性是可列舉的。

（4）.最後規定屬性特性是可重新配置，並且屬性也是可以刪除的，如果configurable屬性值為false，那麼對應的屬性就是不可刪除的，程式碼例項如下：

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

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

可以看到，上述程式碼刪除address屬性失敗了。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let obj = {
  webName:"螞蟻部落",
  url:"softwhy.com"
};
  
Object.defineProperty(obj,"address",{
  set:function(x){
    this._address = x;
  },
  get:function(){
    return "螞蟻部落的地址是:"+this._address;
  },
  enumerable:true,
  configurable:true
});
obj.address="青島市南區"
console.log(obj.address);

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

Object.defineProperty方法不但可以新增資料屬性，也可以新增訪問器屬性屬性。

關於訪問器屬性可以參閱JavaScript get與set 訪問器屬性一章節。