深刻淺出Object.defineProperty()

轉載：https://www.jianshu.com/p/8fe1382ba135

講解大體會根據下圖展開

本文部分參考了書籍《你不知道的javascript》上卷

對象的定義與賦值

常用的定義與賦值方法obj.prop =value或者obj['prop']=value

Object.defineProperty()語法說明

Object.defineProperty()的做用就是直接在一個對象上定義一個新屬性，或者修改一個已經存在的屬性

Object.defineProperty(obj, prop, desc)
複製代碼

1. obj 須要定義屬性的當前對象
2. prop 當前須要定義的屬性名
3. desc 屬性描述符

通常經過爲對象的屬性賦值的狀況下，對象的屬性能夠修改也能夠刪除，可是經過Object.defineProperty()定義屬性，經過描述符的設置能夠進行更精準的控制對象屬性。

屬性的特性以及內部屬性

javacript 有三種類型的屬性

1. 命名數據屬性：擁有一個肯定的值的屬性。這也是最多見的屬性
2. 命名訪問器屬性：經過getter和setter進行讀取和賦值的屬性
3. 內部屬性：由JavaScript引擎內部使用的屬性，不能經過JavaScript代碼直接訪問到，不過能夠經過一些方法間接的讀取和設置。好比，每一個對象都有一個內部屬性[[Prototype]]，你不能直接訪問這個屬性，但能夠經過Object.getPrototypeOf()方法間接的讀取到它的值。雖然內部屬性一般用一個雙呂括號包圍的名稱來表示，但實際上這並非它們的名字，它們是一種抽象操做，是不可見的，根本沒有上面兩種屬性有的那種字符串類型的屬性

屬性描述符

經過Object.defineProperty()爲對象定義屬性，有兩種形式，且不能混合使用，分別爲數據描述符，存取描述符，下面分別描述下二者的區別：

數據描述符 --特有的兩個屬性（value,writable）

let Person = {}
Object.defineProperty(Person, 'name', {
   value: 'jack',
   writable: true // 是否能夠改變
})
複製代碼

注意，若是描述符中的某些屬性被省略，會使用如下默認規則：

存取描述符 --是由一對 getter、setter 函數功能來描述的屬性

get：一個給屬性提供getter的方法，若是沒有getter則爲undefined。該方法返回值被用做屬性值。默認爲undefined。
set：一個給屬性提供setter的方法，若是沒有setter則爲undefined。該方法將接受惟一參數，並將該參數的新值分配給該屬性。默認值爲undefined。

let Person = {}
let temp = null
Object.defineProperty(Person, 'name', {
  get: function () {
    return temp
  },
  set: function (val) {
    temp = val
  }
})
複製代碼

數據描述符和存取描述均具備如下描述符

1. configrable 描述屬性是否配置，以及能否刪除
2. enumerable 描述屬性是否會出如今for in 或者 Object.keys()的遍歷中

configrable 代碼片斷分析

configurable:false不能刪除屬性

configurable:false不能從新定義屬性

等價上一張圖的代碼

與上一張圖的代碼進行對比

configurable:true能刪除屬性

configurable:true可以定義屬性

configurable:false與上圖作對照

從以上代碼運行結果分析總結可知：

1. configurable: false 時，不能刪除當前屬性，且不能從新配置當前屬性的描述符(有一個小小的意外：能夠把writable的狀態由true改成false,可是沒法由false改成true),可是在writable: true的狀況下，能夠改變value的值
2. configurable: true時，能夠刪除當前屬性，能夠配置當前屬性全部描述符。

enumerable 代碼片斷分析

注意：如下二種區別

不變性

1. 對象常量
   結合writable: false 和 configurable: false 就能夠建立一個真正的常量屬性（不可修改，不可從新定義或者刪除）

對象常量

1. 禁止擴展
   若是你想禁止一個對象添加新屬性而且保留已有屬性，就可使用Object.preventExtensions(...)

禁止擴展片斷1

禁止擴展片斷2

在非嚴格模式下，建立屬性gender會靜默失敗，在嚴格模式下，將會拋出異常。

1. 密封
   Object.seal()會建立一個密封的對象，這個方法實際上會在一個現有對象上調用object.preventExtensions(...)並把全部現有屬性標記爲configurable:false。

密封

因此， 密封以後不只不能添加新屬性，也不能從新配置或者刪除任何現有屬性（雖然能夠改屬性的值）

1. 凍結
   Object.freeze()會建立一個凍結對象，這個方法實際上會在一個現有對象上調用Object.seal(),並把全部現有屬性標記爲writable: false,這樣就沒法修改它們的值。

   
   
   

   凍結

這個方法是你能夠應用在對象上級別最高的不可變性，它會禁止對於對象自己及其任意直接屬性的修改（可是這個對象引用的其餘對象是不受影響的）
你能夠深度凍結一個對象，具體方法爲，首先這個對象上調用Object.freeze()而後遍歷它引用的全部對象，並在這些對象上調用Object.freeze()。可是必定要當心，由於這麼作有可能會無心中凍結其餘共享對象。

屬性定義和屬性賦值

最後一小節，總結一下上述內容

屬性定義,經過Object.defineProperty()形式

1. 若是Obj沒有名爲Prop的自身屬性的話：若是Obj是可擴展的話，則建立Prop這個自身屬性，不然拒絕
2. 若是Obj已經有了名爲Prop的自身屬性：則按照下面的步驟從新配置這個屬性
3. 若是這個已有的屬性是不可配置的，則進行下面的操做會被拒絕

1: 將一個數據屬性轉換成訪問器屬性，反之變然
2: 改變`[[Configurable]]`或`[[Enumerable]]`
3: 改變[[Writable]]由false變爲true
4: 在`[[Writable]]`爲`false`時改變`[[Value]]`
5: 改變[[Get]]或[[Set]]
複製代碼

1. 不然這個已有的屬性能夠被從新配置

屬性賦值,經過obj.prop = ''prop"形式

1. 若是在原型鏈上存在一個名爲P的只讀屬性（只讀的數據屬性或者沒有setter的訪問器屬性），則拒絕
2. 若是在原型鏈上存在一個名爲P的且擁有setter的訪問器屬性，則調用這個setter
3. 若是沒有名爲P的自身屬性，則若是這個對象是可擴展的，就建立一個新屬性，不然，若是這個對象是不可擴展的，則拒絕
4. 若是已經存在一個可寫的名爲P的自身屬性，則調用Object.defineProperty(),該操做只會更改P屬性的值，其餘的特性（好比可枚舉性）都不會改變

做用以及影響

屬性的定義操做和賦值操做各自有本身的做用和影響。
賦值可能會調用原型上的setter，定義會建立一個自身屬性。
原型鏈中的同名只讀屬性可能會阻止賦值操做，但不會阻止定義操做。若是原型鏈中存在一個同名的只讀屬性，則沒法經過賦值的方式在原對象上添加這個自身屬性，必須使用定義操做才能夠。這項限制是在ECMAScript 5.1中引入的

賦值運算符不會改變原型鏈上的屬性
不能經過爲obj.foo賦值來改變proto.foo的值。這種操做只會在obj上新建一個自身屬性

對象字面量中的屬性是經過定義操做添加的。

再次囉嗦一次，記住如下兩種形式的區別：

上面的代碼等同於：

另外一方面：

上面的代碼等同於：

轉載自：https://www.jianshu.com/p/8fe1382ba135，用於之後學習使用！