Object.defineProperty 与 属性描述符

Posted 2020-12-03 jrliu

为javascript对象新增或者修改属性，有两种不同方式：直接使用=赋值或者使用Object.defineProperty 定义，使用后者的话还可以设置属性的描述符。

Object.defineProperty

Object.defineProperty(obj, prop, descriptor) 接受三个参数：

1. obj：要在其上定义属性的对象。
2. prop：要定义或修改的属性的名称。
3. descriptor：将被定义或修改的属性描述符。

属性描述符

属性描述符是一个对象，作用就是定义一个属性的属性 (-，-)。他有两种主要形式：数据描述符和存取描述符。

数据描述符是一个具有值的属性，该值可能是可写的，也可能不是可写的，特有属性：value、writable。存取描述符是由getter-setter函数对描述的属性，特有属性：get、set。描述符必须是这两种形式之一；不能同时是两者。

Object.getOwnPropertyDescriptor() 可以获取指定对象上一个自有属性对应的属性描述符。

数据描述符和存取描述符均具有以下可选键值：

1. configurable

表示对象的该属性是否可以被删除，以及其他特性是否可以被修改（除了可以单向改变 writable 为 false）。默认为 false。

let Tom = {}
Object.defineProperty(Tom, 'height', {
  value: 174
})
delete Tom.height
console.log(Tom)   //  {height: 174}

let Tom = {}
Object.defineProperty(Tom, 'height', {
  value: 174,
  configurable: true
})
delete Tom.height
console.log(Tom)   // {} 

2. enumerable

当定义了对象的属性是否可以在 for...in 循环和 Object.keys() 中被枚举。默认为 false。

let Tom = {}
Object.defineProperty(Tom, 'height', {
  value: 174
})
Object.keys(Tom)   // []

let Tom = {}
Object.defineProperty(Tom, 'height', {
  value: 174,
  enumerable: true
})
Object.keys(Tom)   // ["height"]

数据描述符具有以下可选键值：

1. value

该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。

2. writable

当且仅当该属性的writable为true时，value才能被赋值运算符 “=” 改变。默认为 false。

let Tom = {}
Object.defineProperty(Tom, 'height', {
  value: 174
})
Tom.height = 180 
console.log(Tom)   // {height: 174}

Object.getOwnPropertyDescriptor(Tom,'height')
//  {value: 174, writable: false, enumerable: false, configurable: false}

let Tom = {}
Object.defineProperty(Tom, 'height', {
  value: 174,
  writable: true
})
Tom.height = 180 
console.log(Tom)   // {height: 180}

使用“=”定义属性时，writable/enumerable/configurable 都为true:

let Tom = {}
Tom.height = 174

Object.getOwnPropertyDescriptor(Tom,'height')
// {value: 180, writable: true, enumerable: true, configurable: true}

存取描述符同时具有以下可选键值：

1. get

一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象（由于继承关系，这里的this并不一定是定义该属性的对象）。

2. set

一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。

let Tom = {
  realHeight: 173
}

Object.defineProperty(Tom, 'height', {
  get: function() {
    console.log('报高一点')
    return this.realHeight + 5;
  },
  set: function(value) {
    console.log('现在高' + value + 'cm')
    this.realHeight = value
  }
})

Object.getOwnPropertyDescriptor(Tom,'height')
//  {get: ?, set: ?, enumerable: false, configurable: false}

Tom.height        // 178
Tom.height = 169
Tom.height        //  174