首頁 > 軟體

深入淺出JS的Object.defineProperty()

2022-06-28 14:01:20

前言

講解大致會根據下圖展開:

物件的定義與賦值

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

Object.defineProperty()語法說明

Object.defineProperty()的作用就是直接在一個物件上定義一個新屬性,或者修改一個已經存在的屬性

Object.defineProperty(obj, prop, desc)
  • obj 需要定義屬性的當前物件
  • prop 當前需要定義的屬性名
  • desc 屬性描述符

一般通過為物件的屬性賦值的情況下,物件的屬性可以修改也可以刪除,但是通過Object.defineProperty()定義屬性,通過描述符的設定可以進行更精準的控制物件屬性。

屬性的特性以及內部屬性

javacript 有三種型別的屬性:

  • 命名資料屬性:擁有一個確定的值的屬性。這也是最常見的屬性
  • 命名存取器屬性:通過gettersetter進行讀取和賦值的屬性
  • 內部屬性:由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
  }
})

資料描述符和存取描述均具有以下描述符

  • configrable 描述屬性是否設定,以及可否刪除
  • enumerable 描述屬性是否會出現在for in 或者 Object.keys()的遍歷中

configrable 程式碼片段分析

configurable:false不能刪除屬性:

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

等價上一張圖的程式碼:

與上一張圖的程式碼進行對比:

configurable:true能刪除屬性:

configurable:true能夠定義屬性:

configurable:false與上圖做對照:

從以上程式碼執行結果分析總結可知:

configurable: false 時,不能刪除當前屬性,且不能重新設定當前屬性的描述符(有一個小小的意外:可以把writable的狀態由true改為false,但是無法由false改為true),但是在writable: true的情況下,可以改變value的值

configurable: true時,可以刪除當前屬性,可以設定當前屬性所有描述符。

enumerable 程式碼片段分析

注意:以下二種區別

不變性

物件常數

結合writable: false 和 configurable: false 就可以建立一個真正的常數屬性(不可修改,不可重新定義或者刪除)

物件常數

禁止擴充套件:

如果你想禁止一個物件新增新屬性並且保留已有屬性,就可以使用Object.preventExtensions(...)

禁止擴充套件片段1

禁止擴充套件片段2

在非嚴格模式下,建立屬性gender會靜默失敗,在嚴格模式下,將會丟擲異常。

密封

Object.seal()會建立一個密封的物件,這個方法實際上會在一個現有物件上呼叫object.preventExtensions(...)並把所有現有屬性標記為configurable:false。

密封:所以, 密封之後不僅不能新增新屬性,也不能重新設定或者刪除任何現有屬性(雖然可以改屬性的值)

凍結:Object.freeze()會建立一個凍結物件,這個方法實際上會在一個現有物件上呼叫Object.seal(),並把所有現有屬性標記為writable: false,這樣就無法修改它們的值。

凍結:

這個方法是你可以應用在物件上級別最高的不可變性,它會禁止對於物件本身及其任意直接屬性的修改(但是這個物件參照的其他物件是不受影響的)
你可以深度凍結一個物件,具體方法為,首先這個物件上呼叫Object.freeze()然後遍歷它參照的所有物件,並在這些物件上呼叫Object.freeze()。但是一定要小心,因為這麼做有可能會無意中凍結其他共用物件。

屬性定義和屬性賦值

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

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

  • 如果Obj沒有名為Prop的自身屬性的話:如果Obj是可延伸的話,則建立Prop這個自身屬性,否則拒絕
  • 如果Obj已經有了名為Prop的自身屬性:則按照下面的步驟重新設定這個屬性
  • 如果這個已有的屬性是不可設定的,則進行下面的操作會被拒絕
    • 1: 將一個資料屬性轉換成存取器屬性,反之變然
    • 2: 改變`[[Configurable]]`或`[[Enumerable]]`
    • 3: 改變[[Writable]]由false變為true
    • 4: 在`[[Writable]]`為`false`時改變`[[Value]]`
    • 5: 改變[[Get]]或[[Set]]
  • 否則這個已有的屬性可以被重新設定

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

  • 如果在原型鏈上存在一個名為P的唯讀屬性(唯讀的資料屬性或者沒有setter的存取器屬性),則拒絕
  • 如果在原型鏈上存在一個名為P的且擁有setter的存取器屬性,則呼叫這個setter
  • 如果沒有名為P的自身屬性,則如果這個物件是可延伸的,就建立一個新屬性,否則,如果這個物件是不可延伸的,則拒絕
  • 如果已經存在一個可寫的名為P的自身屬性,則呼叫Object.defineProperty(),該操作只會更改P屬性的值,其他的特性(比如可列舉性)都不會改變

作用以及影響

屬性的定義操作和賦值操作各自有自己的作用和影響。
賦值可能會呼叫原型上的setter,定義會建立一個自身屬性
原型鏈中的同名唯讀屬性可能會阻止賦值操作,但不會阻止定義操作。如果原型鏈中存在一個同名的唯讀屬性,則無法通過賦值的方式在原物件上新增這個自身屬性,必須使用定義操作才可以。這項限制是在ECMAScript 5.1中引入的

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

物件字面量中的屬性是通過定義操作新增的。

再次囉嗦一次,記住以下兩種形式的區別:

上面的程式碼等同於:

另一方面:

上面的程式碼等同於:

到此這篇關於深入淺出JS的Object.defineProperty()的文章就介紹到這了,更多相關JS的Object.defineProperty()內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com!


IT145.com E-mail:sddin#qq.com