1. 程式人生 > >解析Object.defineProperty的作用

解析Object.defineProperty的作用

物件是由多個名/值對組成的無序的集合。物件中每個屬性對應任意型別的值。

定義物件可以使用建構函式或字面量的形式:

除了以上新增屬性的方式,還可以使用Object.defineProperty定義新屬性或修改原有的屬性。

 

Object.defineProperty()

語法:

引數說明

obj:必需。目標物件 

prop:必需。需定義或修改的屬性的名字

descriptor:必需。目標屬性所擁有的特性

返回值

傳入函式的物件。即第一個引數obj。

針對屬性,我們可以給這個屬性設定一些特性,比如是否只讀不可以寫;是否可以被for..in或Object.keys()遍歷。

給物件的屬性新增特性描述,目前提供兩種形式:資料描述和存取器描述。

 

資料描述

當修改或定義物件的某個屬性的時候,給這個屬性新增一些特性:

               

資料描述中的屬性都是可選的,來看一下設定每一個屬性的作用。

value

屬性對應的值,可以使任意型別的值,預設為undefined

              

 

writable

屬性的值是否可以被重寫。設定為true可以被重寫;設定為false,不能被重寫。預設為false。

            

 

enumerable

此屬性是否可以被列舉(使用for...in或Object.keys())。設定為true可以被列舉;設定為false,不能被列舉。預設為false。

              

configurable

是否可以刪除目標屬性或是否可以再次修改屬性的特性(writable, configurable, enumerable)。設定為true可以被刪除或可以重新設定特性;設定為false,不能被可以被刪除或不可以重新設定特性。預設為false。

這個屬性起到兩個作用:

1、目標屬性是否可以使用delete刪除

                  

2、目標屬性是否可以再次設定特

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

               

                            

提示:一旦使用Object.defineProperty給物件新增屬性,那麼如果不設定屬性的特性,那麼configurable、enumerable、writable這些值都為預設的false

                        

設定的特性總結:

value: 設定屬性的值
writable: 值是否可以重寫。true | false
enumerable: 目標屬性是否可以被列舉。true | false
configurable: 目標屬性是否可以被刪除或是否可以再次修改特性 true | false

 

存取器描述

當使用存取器描述屬性的特性的時候,允許設定以下特性屬性:

              

注意:當使用了getter或setter方法,不允許使用writable和value這兩個屬性

 

getter/setter

當設定或獲取物件的某個屬性的值的時候,可以提供getter/setter方法。

  ·getter 是一種獲得屬性值的方法

  ·setter是一種設定屬性值的方法

在特性中使用get/set屬性來定義對應的方法

             

 

注意:get或set不是必須成對出現,任寫其一就可以。如果不設定方法,則get和set的預設值為undefined

configurable和enumerable同上面的用法。

 

相容性

在ie8下只能在DOM物件上使用,嘗試在原生的物件使用 Object.defineProperty()會報錯。

Vue 不支援 IE8 及以下版本,因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。但它支援所有相容 ECMAScript 5 的瀏覽器