对象属性描述符

124 阅读2分钟

1.属性的特性:

1-1. 数据属性的特性:

  • value:属性的值
  • writale:可写(是否可修改属性的值)
  • enumerable:可枚举(是否可以通过for/in循环和Object.keys()方法枚举属性)
  • configurable:可配置(是否可以删除属性,是否可以修改属性的特性)

1-2. 访问器属性的特性:

  • get:获取方法
  • set:设置方法
  • enumerable:可枚举(是否可以通过for/in循环和Object.keys()方法枚举属性)
  • configurable:可配置(是否可以删除属性,是否可以修改属性的特性)

2. 操作对象属性的特性:

2-1. 属性描述符(propertydescriptor):

propertydescriptor记录着一个属性的特性。

例如:

// 值属性
{
    value: '29',
    writable: true,
    enumerable: true,
    configurable: true
}
// 访问器属性
{
    get: function(){},
    set: function(){},
    enumerable: true,
    configurable: true
}

2-2. 获取属性描述符:

想要获取某个属性的属性描述符,可以调用 Object.getOwnPropertyDescriptor(obj, prop)

例子:

const obj = {
    name: 'zhangsan',
    age :20
}
const descriptorOfName = Object.getOwnPropertyDescriptor(obj, 'name')
console.log(descriptorOfName)
// {
//     value: 'zhangsan',
//     writable: true,
//     enumerable: true,
//     configurable: true
// }

2-3. 设置属性的特性:

2-3-1.defineProperty

想要设置一个对象的属性特性或者想要创建一个具有指定特性的属性,可以调用 Object.defineProperty(obj, prop, descriptor)方法。

例子:新创建属性

const obj = {}
Object.defineProperty(obj, 'name', {
    value: 'zhangsan'
})
console.log(obj)
console.log(Object.getOwnPropertyDescriptors(obj))
// {}
// {
//   name: {
//     value: 'zhangsan',
//     writable: false,
//     enumerable: false,
//     configurable: false
//   }
// }

由上例可知:Object.defineProperty(obj, prop, descriptor)descriptor参数不一定包含4个特性都包涵,如果是新创建一个属性,则没有包涵的特性将被设置成 false 或者 undefined。

例子:修改原有属性的属性描述符

const obj = { name: 'lisi' }
Object.defineProperty(obj, 'name', {
    value: 'zhangsan'
})
console.log(obj)
console.log(Object.getOwnPropertyDescriptors(obj))
// { name: 'zhangsan' }
// {
//   name: {
//     value: 'zhangsan',
//     writable: true,
//     enumerable: true,
//     configurable: true
//   }
// }

由上例可知:如果是修改已经存在的属性的特性,descriptor没有包含的特性将保持不变。

2-3-2. defineProperties

如果想要一次性创建或者修改多个属性,可以使用Object.defineProperties(obj, propObj)

例子:

const obj = { name: 'lisi' }
Object.defineProperties(obj, {
    name: { value: 'zhangsan', writable: true },
    age: { value: 20, enumerable: true }
})
console.log(obj)
console.log(Object.getOwnPropertyDescriptors(obj))
// { name: 'zhangsan', age: 20 }
// {
//   name: {
//     value: 'zhangsan',
//     writable: true,
//     enumerable: true,
//     configurable: true
//   },
//   age: { value: 20, writable: false, enumerable: true, configurable: false }
// }