Object.defineProperty()和Object.defineProperties()

课后整理 2020-12-20

Object.defineProperty方法允许通过定义属性描述对象,来定义或修改一个属性,然后返回修改后的对象。它的格式如下。

Object.defineProperty(object, propertyName, attributesObject)

在上面代码中,Object.defineProperty方法接受三个参数,第一个是属性所在的对象,第二个是属性名(它应该是一个字符串),第三个是属性的描述对象。

【示例1】新建一个o对象,并定义它的p属性,写法如下。

var o = Object.defineProperty({}, 'p', {
  value: 123,
  writable: false,
  enumerable: true,
  configurable: false
});
o.p
// 123
o.p = 246;
o.p
// 123
// 因为writable为false,所以无法改变该属性的值

如果属性已经存在,Object.defineProperty方法相当于更新该属性的属性描述对象。

注意,Object.defineProperty方法和后面的Object.defineProperties方法,都有性能损耗,会拖慢执行速度,不宜大量使用。

【示例2】如果一次性定义或修改多个属性,可以使用Object.defineProperties方法。

var o = Object.defineProperties({}, {
  p1: { value: 123, enumerable:  true },
  p2: { value: 'abc', enumerable:  true },
  p3: { get: function () { return  this.p1 + this.p2 },
    enumerable:true,
    configurable:true
  }
});
o.p1 // 123
o.p2 // "abc"
o.p3 // "123abc"

上面代码中的p3属性,定义了取值函数get。这时注意,一旦定义了取值函数get(或存值函数set),就不能将writable设为true,或者同时定义value属性,会报错。例如:

var o = {};
Object.defineProperty(o, 'p', {
  value: 123,
  get: function() { return 456; }
});
// TypeError: Invalid property.
// A property cannot both have accessors and be writable or have a value,

上面代码同时定义了get属性和value属性,结果就报错。

Object.defineProperty()和Object.defineProperties()的第三个参数,是一个属性对象。它的writable、configurable、enumerable这三个属性的默认值都为false。例如:

var obj = {};
Object.defineProperty(obj, 'foo', { configurable: true });
Object.getOwnPropertyDescriptor(obj, 'foo')
// {
//   value: undefined,
//   writable: false,
//   enumerable: false,
//   configurable: true
// }

在上面代码中,定义obj对象的foo属性时,只定义了可配置性configurable为true。结果,其他元属性都是默认值。

writable属性为false,表示对应的属性的值将不得改写。例如:

var o = {};
Object.defineProperty(o, 'p', {
  value: "bar"
});
o.p // bar
o.p = 'foobar';
o.p // bar
Object.defineProperty(o, 'p', {
  value: 'foobar'
});
// TypeError: Cannot redefine property: p

上面代码由于writable属性默认为false,导致无法对p属性重新赋值,但是不会报错(严格模式下会报错)。不过,如果再一次使用Object.defineProperty方法对value属性赋值,就会报错。

configurable属性为false,将无法删除该属性,也无法修改attributes对象(value属性除外)。例如:

var o = {};
Object.defineProperty(o, 'p', {
  value: 'bar'
});
delete o.p
o.p // "bar"

在上面代码中,由于configurable属性默认为false,导致无法删除某个属性。

enumerable属性为false,表示对应的属性不会出现在for/in循环和Object.keys方法中。例如:

var o = {
  p1: 10,
  p2: 13
};
Object.defineProperty(o, 'p3', {
  value: 3
});
for (var i in o) {
  console.log(i, o[i]);
}
// p1 10
// p2 13

在上面代码中,p3属性是用Object.defineProperty方法定义的,由于enumerable属性默认为false,所以不出现在for/in循环中。