前言

在理解vue底層響應(yīng)式原理時，了解到，原來對象中的屬性，不單單從表面看起來那么簡單是key:value形式，而是還有隱藏的內(nèi)部特性

其中對象內(nèi)的屬性 分為兩種類型的屬性：數(shù)據(jù)屬性 和 訪問器屬性

ECMAScript 規(guī)范中定義：對象是一種無序?qū)傩缘募希總€屬性都是一個鍵值對，其中鍵是字符串或 Symbol 類型，值可以是數(shù)據(jù)值或訪問器函數(shù)

其中對象是 有序 還是 無序 的問題，可以移步我的其他的文章參考

這里主要講到 數(shù)據(jù)屬性 和 訪問器屬性 是什么，有什么作用

數(shù)據(jù)屬性

數(shù)據(jù)屬性是日常默認(rèn)使用的類型，就是我們常見的方式

使用 對象字面量 或者 new Object 方式創(chuàng)建

// 對象字面量
const obj = {
  name: '小濤' // 這個name就是數(shù)據(jù)屬性
}
// new Object
const obj2 = new Object({
  name: '小濤'  // 這個name就是數(shù)據(jù)屬性
})

而這個數(shù)據(jù)屬性有以下4個描述其行為的特性。分別是：

[[Configurable]]：是否可配置，該屬性是否可以被刪除或修改特性，當(dāng)修改這個特性為false時，不能通過delete刪除屬性，同時也不能再次修改其他的特性，包括不能改為訪問器屬性

注意：一旦將屬性的 configurable 特性定義為 false ，即不可配置的，該屬性就不能再改回可配置的了。此后，再調(diào)用 Object.defineProperty() 方法修改除了 writable 特性的特性都會導(dǎo)致錯誤。（JavaScript 高級程序設(shè)計）

[[Enumerable]]：是否可枚舉，如果為不可枚舉，則不能通過 for-in 循環(huán)或者 Object.keys() 返回該屬性

[[Writable]]：是否可修改，是否可以修改屬性的值

[[Value]]：這個屬性的屬性值，寫入屬性值的時候，把值保存在這個位置；讀取屬性值的時候，從這個位置讀。默認(rèn)值為 undefined

當(dāng)我們通過 對象字面量 或者 new Object 方式創(chuàng)建的對象時，它們屬性的特性默認(rèn)都為true

當(dāng)我們通過 Object.defineProperty() 來定義新的屬性時，對于沒有明確定義的特性，默認(rèn)為false

下面我通過 Object.defineProperty() 分別演示一下這些特性

[[Configurable]] 是否可配置

const obj = {}

Object.defineProperty(obj, 'name', {
    configurable: false, // 不可配置
    value: '小濤'
})

delete obj.name // 刪除無效
console.log(obj, obj.name) // {name: '小濤'} '小濤'

// 除了writable，無法重新配置
Object.defineProperty(obj, 'name', { // 報錯： Cannot redefine property: name atFunction.defineProperty
    enumerable: true
})

[[Enumerable]] 是否可枚舉

const obj = {}
Object.defineProperty(obj, 'name', {
    enumerable: false, // 不可枚舉
    value: '小濤'
})

console.log(obj.name, Object.keys(obj)) // 小濤 []

訪問器屬性

訪問器屬性是對象屬性中，另外一種類型，在對象中使用 get/set 創(chuàng)建

它也有一下4個描述其行為的特性。分別是：

[[Configurable]]：是否可配置，該屬性是否可以被刪除或修改特性，當(dāng)修改這個特性為false時，不能通過delete刪除屬性，同時也不能再次修改其他的特性，包括不能改為訪問器屬性

[[Enumerable]]：是否可枚舉，如果為不可枚舉，則不能通過 for-in 循環(huán)或者 Object.keys() 返回該屬性

[[Get]]：用于讀取屬性值的函數(shù)。如果該屬性沒有 getter 函數(shù)，則該特性值為 undefined

[[Set]]：用于設(shè)置屬性值的函數(shù)。如果該屬性沒有 setter 函數(shù)，則該特性值為 undefined

在vue2中，正是利用 訪問器屬性，通過 Object.defineProperty 把對象中的屬性 全部轉(zhuǎn)化為訪問器屬性中的 getter/setter，來實現(xiàn)響應(yīng)式

可以直接在 對象中使用get/set 或者通過 Object.defineProperty定義get/set 兩種方式來使用

對象中使用

const obj = {
  _value: '',
  get value() {
      return this._value
  },
  set value(newVal) {
      this._value = newVal
  }
}

console.log(obj.value)

obj.value即為響應(yīng)式屬性

Object.defineProperty 中使用

const obj = {}
Object.defineProperty(obj, 'value', {
    get() {
        return '小濤測試'
    },
    set(newValue) {
        console.log('獲取更新', newValue)
    }
})
obj.value = '1111'

怎么獲取屬性描述符/特性

如果想要判斷對象內(nèi)屬性的特性可以使用**Object.getOwnPropertyDescriptor()或Object.getOwnPropertyDescriptors()**獲取單個屬性或全部屬性的 屬性描述符/特性

const obj = {}
Object.defineProperty(obj, 'name', {
    enumerable: false, // 不可枚舉
    writable: true, // 可修改
    value: '小濤'
})

console.log(Object.getOwnPropertyDescriptor(obj, 'name'))

以上就是詳解js對象中屬性的兩種類型之?dāng)?shù)據(jù)屬性喝訪問器屬性的詳細內(nèi)容，更多關(guān)于js 數(shù)據(jù)屬性喝訪問器屬性的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論