前言

講解大致會根據(jù)下圖展開：

對象的定義與賦值

經(jīng)常使用的定義與賦值方法obj.prop =value或者obj['prop']=value

Object.defineProperty()語法說明

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

Object.defineProperty(obj, prop, desc)

• obj 需要定義屬性的當(dāng)前對象
• prop 當(dāng)前需要定義的屬性名
• desc 屬性描述符

一般通過為對象的屬性賦值的情況下，對象的屬性可以修改也可以刪除，但是通過Object.defineProperty()定義屬性，通過描述符的設(shè)置可以進(jìn)行更精準(zhǔn)的控制對象屬性。

屬性的特性以及內(nèi)部屬性

javacript 有三種類型的屬性：

• 命名數(shù)據(jù)屬性：擁有一個(gè)確定的值的屬性。這也是最常見的屬性
• 命名訪問器屬性：通過getter和setter進(jìn)行讀取和賦值的屬性
• 內(nèi)部屬性：由JavaScript引擎內(nèi)部使用的屬性，不能通過JavaScript代碼直接訪問到，不過可以通過一些方法間接的讀取和設(shè)置。比如，每個(gè)對象都有一個(gè)內(nèi)部屬性[[Prototype]]，你不能直接訪問這個(gè)屬性，但可以通過Object.getPrototypeOf()方法間接的讀取到它的值。雖然內(nèi)部屬性通常用一個(gè)雙呂括號包圍的名稱來表示，但實(shí)際上這并不是它們的名字，它們是一種抽象操作，是不可見的，根本沒有上面兩種屬性有的那種字符串類型的屬性

屬性描述符

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

數(shù)據(jù)描述符 --特有的兩個(gè)屬性（value,writable）

let Person = {}
Object.defineProperty(Person, 'name', {
   value: 'jack',
   writable: true // 是否可以改變
})

注意，如果描述符中的某些屬性被省略，會使用以下默認(rèn)規(guī)則：

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

get：一個(gè)給屬性提供getter的方法，如果沒有getter則為undefined。該方法返回值被用作屬性值。默認(rèn)為undefined。
set：一個(gè)給屬性提供setter的方法，如果沒有setter則為undefined。該方法將接受唯一參數(shù)，并將該參數(shù)的新值分配給該屬性。默認(rèn)值為undefined。

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

數(shù)據(jù)描述符和存取描述均具有以下描述符

• configrable 描述屬性是否配置，以及可否刪除
• enumerable 描述屬性是否會出現(xiàn)在for in 或者 Object.keys()的遍歷中

configrable 代碼片段分析

configurable:false不能刪除屬性:

configurable:false不能重新定義屬性：

等價(jià)上一張圖的代碼：

與上一張圖的代碼進(jìn)行對比：

configurable:true能刪除屬性：

configurable:true能夠定義屬性：

configurable:false與上圖做對照:

從以上代碼運(yùn)行結(jié)果分析總結(jié)可知：

configurable: false 時(shí)，不能刪除當(dāng)前屬性，且不能重新配置當(dāng)前屬性的描述符(有一個(gè)小小的意外：可以把writable的狀態(tài)由true改為false,但是無法由false改為true),但是在writable: true的情況下，可以改變value的值

configurable: true時(shí)，可以刪除當(dāng)前屬性，可以配置當(dāng)前屬性所有描述符。

enumerable 代碼片段分析

注意：以下二種區(qū)別

不變性

對象常量

結(jié)合writable: false 和 configurable: false 就可以創(chuàng)建一個(gè)真正的常量屬性（不可修改，不可重新定義或者刪除）

對象常量

禁止擴(kuò)展：

如果你想禁止一個(gè)對象添加新屬性并且保留已有屬性，就可以使用Object.preventExtensions(...)

禁止擴(kuò)展片段1

禁止擴(kuò)展片段2

在非嚴(yán)格模式下，創(chuàng)建屬性gender會靜默失敗，在嚴(yán)格模式下，將會拋出異常。

密封

Object.seal()會創(chuàng)建一個(gè)密封的對象，這個(gè)方法實(shí)際上會在一個(gè)現(xiàn)有對象上調(diào)用object.preventExtensions(...)并把所有現(xiàn)有屬性標(biāo)記為configurable:false。

密封：所以， 密封之后不僅不能添加新屬性，也不能重新配置或者刪除任何現(xiàn)有屬性（雖然可以改屬性的值）

凍結(jié)：Object.freeze()會創(chuàng)建一個(gè)凍結(jié)對象，這個(gè)方法實(shí)際上會在一個(gè)現(xiàn)有對象上調(diào)用Object.seal(),并把所有現(xiàn)有屬性標(biāo)記為writable: false,這樣就無法修改它們的值。

凍結(jié):

這個(gè)方法是你可以應(yīng)用在對象上級別最高的不可變性，它會禁止對于對象本身及其任意直接屬性的修改（但是這個(gè)對象引用的其他對象是不受影響的）
你可以深度凍結(jié)一個(gè)對象，具體方法為，首先這個(gè)對象上調(diào)用Object.freeze()然后遍歷它引用的所有對象，并在這些對象上調(diào)用Object.freeze()。但是一定要小心，因?yàn)檫@么做有可能會無意中凍結(jié)其他共享對象。

屬性定義和屬性賦值

最后一小節(jié)，總結(jié)一下上述內(nèi)容

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

• 如果Obj沒有名為Prop的自身屬性的話：如果Obj是可擴(kuò)展的話，則創(chuàng)建Prop這個(gè)自身屬性，否則拒絕
• 如果Obj已經(jīng)有了名為Prop的自身屬性：則按照下面的步驟重新配置這個(gè)屬性
• 如果這個(gè)已有的屬性是不可配置的，則進(jìn)行下面的操作會被拒絕
  • 1: 將一個(gè)數(shù)據(jù)屬性轉(zhuǎn)換成訪問器屬性，反之變?nèi)?/li>
  • 2: 改變`[[Configurable]]`或`[[Enumerable]]`
  • 3: 改變[[Writable]]由false變?yōu)閠rue
  • 4: 在`[[Writable]]`為`false`時(shí)改變`[[Value]]`
  • 5: 改變[[Get]]或[[Set]]
• 否則這個(gè)已有的屬性可以被重新配置

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

• 如果在原型鏈上存在一個(gè)名為P的只讀屬性（只讀的數(shù)據(jù)屬性或者沒有setter的訪問器屬性），則拒絕
• 如果在原型鏈上存在一個(gè)名為P的且擁有setter的訪問器屬性，則調(diào)用這個(gè)setter
• 如果沒有名為P的自身屬性，則如果這個(gè)對象是可擴(kuò)展的，就創(chuàng)建一個(gè)新屬性，否則，如果這個(gè)對象是不可擴(kuò)展的，則拒絕
• 如果已經(jīng)存在一個(gè)可寫的名為P的自身屬性，則調(diào)用Object.defineProperty(),該操作只會更改P屬性的值，其他的特性（比如可枚舉性）都不會改變

作用以及影響

屬性的定義操作和賦值操作各自有自己的作用和影響。
賦值可能會調(diào)用原型上的setter，定義會創(chuàng)建一個(gè)自身屬性。
原型鏈中的同名只讀屬性可能會阻止賦值操作，但不會阻止定義操作。如果原型鏈中存在一個(gè)同名的只讀屬性，則無法通過賦值的方式在原對象上添加這個(gè)自身屬性，必須使用定義操作才可以。這項(xiàng)限制是在ECMAScript 5.1中引入的

賦值運(yùn)算符不會改變原型鏈上的屬性
不能通過為obj.foo賦值來改變proto.foo的值。這種操作只會在obj上新建一個(gè)自身屬性

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

再次啰嗦一次，記住以下兩種形式的區(qū)別：

上面的代碼等同于：

另一方面：

上面的代碼等同于：

到此這篇關(guān)于深入淺出JS的Object.defineProperty()的文章就介紹到這了,更多相關(guān)JS的Object.defineProperty()內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論