前言

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

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

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

其中對(duì)象是 有序 還是 無(wú)序 的問(wèn)題，可以移步我的其他的文章參考

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

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

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

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

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

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

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

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

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

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

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

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

當(dāng)我們通過(guò) Object.defineProperty() 來(lái)定義新的屬性時(shí)，對(duì)于沒(méi)有明確定義的特性，默認(rèn)為false

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

[[Configurable]] 是否可配置

const obj = {}

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

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

// 除了writable，無(wú)法重新配置
Object.defineProperty(obj, 'name', { // 報(bào)錯(cuò)： 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)) // 小濤 []

訪問(wèn)器屬性

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

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

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

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

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

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

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

可以直接在 對(duì)象中使用get/set 或者通過(guò) Object.defineProperty定義get/set 兩種方式來(lái)使用

對(duì)象中使用

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 '小濤測(cè)試'
    },
    set(newValue) {
        console.log('獲取更新', newValue)
    }
})
obj.value = '1111'

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

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

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

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

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

最新評(píng)論