溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JS的Object.defineProperty()怎么使用

發布時間:2022-06-28 14:00:45 來源:億速云 閱讀:242 作者:iii 欄目:開發技術

本篇內容介紹了“JS的Object.defineProperty()怎么使用”的有關知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠學有所成!

    對象的定義與賦值

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

    JS的Object.defineProperty()怎么使用

    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 // 是否可以改變
    })

    JS的Object.defineProperty()怎么使用

    JS的Object.defineProperty()怎么使用

    注意,如果描述符中的某些屬性被省略,會使用以下默認規則:

    JS的Object.defineProperty()怎么使用

    存取描述符 --是由一對 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
      }
    })

    JS的Object.defineProperty()怎么使用

    數據描述符和存取描述均具有以下描述符

    • configrable 描述屬性是否配置,以及可否刪除

    • enumerable 描述屬性是否會出現在for in 或者 Object.keys()的遍歷中

    configrable 代碼片段分析

    configurable:false不能刪除屬性:

    JS的Object.defineProperty()怎么使用

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

    JS的Object.defineProperty()怎么使用

    等價上一張圖的代碼:

    JS的Object.defineProperty()怎么使用

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

    JS的Object.defineProperty()怎么使用

    configurable:true能刪除屬性:

    JS的Object.defineProperty()怎么使用

    configurable:true能夠定義屬性:

    JS的Object.defineProperty()怎么使用

    configurable:false與上圖做對照:

    JS的Object.defineProperty()怎么使用

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

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

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

    enumerable 代碼片段分析

    JS的Object.defineProperty()怎么使用

    注意:以下二種區別

    JS的Object.defineProperty()怎么使用

    JS的Object.defineProperty()怎么使用

    不變性

    對象常量

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

    JS的Object.defineProperty()怎么使用

    對象常量

    禁止擴展:

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

    JS的Object.defineProperty()怎么使用

    禁止擴展片段1

    JS的Object.defineProperty()怎么使用

    禁止擴展片段2

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

    密封

    Object.seal()會創建一個密封的對象,這個方法實際上會在一個現有對象上調用object.preventExtensions(...)并把所有現有屬性標記為configurable:false。

    JS的Object.defineProperty()怎么使用

    密封:所以, 密封之后不僅不能添加新屬性,也不能重新配置或者刪除任何現有屬性(雖然可以改屬性的值)

    凍結:Object.freeze()會創建一個凍結對象,這個方法實際上會在一個現有對象上調用Object.seal(),并把所有現有屬性標記為writable: false,這樣就無法修改它們的值。

    JS的Object.defineProperty()怎么使用

    凍結:

    這個方法是你可以應用在對象上級別最高的不可變性,它會禁止對于對象本身及其任意直接屬性的修改(但是這個對象引用的其他對象是不受影響的)
    你可以深度凍結一個對象,具體方法為,首先這個對象上調用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中引入的

    JS的Object.defineProperty()怎么使用

    JS的Object.defineProperty()怎么使用

    JS的Object.defineProperty()怎么使用

    JS的Object.defineProperty()怎么使用

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

    JS的Object.defineProperty()怎么使用

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

    JS的Object.defineProperty()怎么使用

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

    JS的Object.defineProperty()怎么使用

    上面的代碼等同于:

    JS的Object.defineProperty()怎么使用

    另一方面:

    JS的Object.defineProperty()怎么使用

    上面的代碼等同于:

    JS的Object.defineProperty()怎么使用

    “JS的Object.defineProperty()怎么使用”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站,小編將為大家輸出更多高質量的實用文章!

    向AI問一下細節

    免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

    AI

    亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女