來源:https://www.jianshu.com/p/5cad911a3630

javascript中，對象定義屬性有多種方式：

var personObj = {}; personObj.name = "蓋聶"; personObj["sex"] = "男"; 

除了通過“obj.propertyName”和"obj[propertyName]"定義，修改外，還可以通過ES5原生API "obj.defineProperty"來定義和修改對象屬性。

 Object.defineProperty(personObj, "name", { value: "劍圣蓋聶" }) 

image.png

Object.defineProperty()

語法

Object.defineProperty(obj, prop, descriptor)

參數說明

obj: 必須。要在其上定義或者修改屬性的對象
prop: 必須。對象屬性的名稱
descriptor: 必須。目標屬性擁有的特性

返回值

傳入函數的對象。即第一個參數obj。

重點關注傳入的第三個參數值的屬性

descriptor參數值的類型是object對象，主要包括value,writable,enumberable,configurable等字段名。簡單分析理解下這些字段的作用和用法。

value: 需要操作的屬性值，默認值為undefined

image.png

writable: 屬性值是否可重寫，為true時表示可重寫，反之表示不能重寫，默認為false

值為false時：

image.png

值為true時：

image.png

enumberable: 屬性是否可被枚舉，為true時表示可被枚舉，反之表示不能被枚舉，默認為false

值為false時：

image.png

值為true時：

image.png

configurable: 是否可以刪除目標屬性或者是否可以重新修改屬性的特性，為true時表示可以刪除或者修改，false時相反，默認為false。

該參數具有兩個作用

• 目標屬性是否可以使用delete刪除
• 目標屬性是否可以再次設置特性

值為false時：

image.png

值為true時：

image.png

除了可以給新定義的屬性設置特性，也可以給已有的屬性設置特性。

image.png

存取器描述

當使用存取器描述屬性的特性的時候，descriptor參數允許使用getter和setter方法，用于設置或獲取對象的某個屬性的值。當使用了getter或setter方法，不允許使用writable和value這兩個屬性。在特性中使用get/set屬性來定義對應的方法。

var mockData = { name: "劍圣-衛莊", title: "淵虹" }; var personObj = {}; Object.defineProperty(personObj,"name", { get: function(){ //在獲取該屬性值得時候觸發該函數 debugger; return mockData.name }, set: function(value){ //當設置該屬性值的時候觸發該函數,設置的新值通過參數value拿到 debugger; mockData.name = value; } }) 

image.png