JavaScript之数据属性描述符与存储属性描述符

目录

数据属性描述符

 存储属性描述符

定义多个属性描述符 

 Object的方法对对象限制

总结

---

数据属性描述符

• value该属性对应的值，默认undefined
• configurable该属性描述符是否可被改变、是否可被删除，默认为false
• enumerable该属性是否可被枚举，默认为false
• writable该属性是否可以被写入新的值，默认为false

let obj = {
  name: 'test',
  age:  18 
}

// 用了属性描述符，那么会有默认的特性
Object.defineProperty(obj, 'address', {
 // 很多配置
 value: '长沙市', // 默认值undefined
 // 该特殊不可删除，也不可以重新定义属性描述符
 configurable:false, // 默认值false
 // 该特使是配置对应的属性(譬如这里的address)是否是可以枚举
 enumerable: true, // 默认值false
 // 该特性是属性是否可以赋值(写入值)
  writable: false, // 默认值false
})

 存储属性描述符

• get当访问该属性时，会调用此函数，默认为undefined。
• set当属性值被修改时，会调用此函数，默认为undefined。

• 注意，get、set描述符与vaule、writable描述符不共存。

let obj = {
 name: 'test',
 age: 18,
 _address: '长沙市' // 变量加_ 表示这个是私有属性

}

// 1、隐藏某一个私有属性被希望直接被外界使用或赋值。
// 2、如果我们希望截获某一个属性它访问和设置值得过程时，也会使用存储属性描述符。
Object.defineProperty(obj, 'address', {
 enumerable: true,
 configurable: true,
 get: function() {
   foo()
   return this._address
 },
 set: function(value) {
  bar()
  this._address = value
 }
})
console.log(obj.address) // 输出 '长沙市'

obj.address = '上海市'
console.log(obj.address) // 输出 '上海市'

function foo() {
 console.log('获取了一次address的值')
}
// 输出 获取了一次address的值 长沙市

function bar() {
 console.log('设置了address的值')
}
// 输出 设置了address的值 上海市



// 就像是vue2中使用Object.defineProperty()截获数据一样
// 在data里定义值
data() {
 return {
  obj: {
   name: 'test',
   age: 18
  }
 }
}
// 内部拿到数据进行处理
Object.key(obj).foEach(key => {
 Object.defineProperty(obj, key, {
  get:
  set:
 })
})

定义多个属性描述符 

let obj = {
 // 以下划线开头的一般定义为私有属性 (js里没有严格意义上的私有属性，所以是可以访问的)
  _age: 18
}

Object.defineProperties(obj, {
 name: {
  configurable: true,
  enumerable: true,
  wrrtable: true,
  value: 'why'
 },
  name: {
  configurable: false,
  enumerable: false,
  get：function() {
   return this._age
  },
  set: function(value) {
   this._age = value
  }
 }
})


// 获取某一个特有属性的属性描述符
console.log(Object.getOwnPropertyDescriptor(obj, 'name'))

// 获取对象的属性描述符
console.log(Object.getOwnPropertyDescriptors(obj))

 Object的方法对对象限制

let obj = {
 name: 'why',
 age: 18
}

// 1、禁止对象继续添加新的属性
Object.preventExtensions(obj)

obj.height = 1.88

console.log(obj) // 输出 { name: 'why', age: 18}


// 2、禁止对象配置删除里面的属性
Object.seal(obj)

delete obj.name
console.log(obj) // 输出 { name: 'why', age: 18}


// 让属性不可以被修改(writable: false)
Object.freeze(obj)
obj.name = 'kobe'
console.log(obj.name) // 输出 why

---

总结

希望有帮助到你理解~