Object.defineProperty和Object.defineProperties()

概述

JavaScript提供了一个内部数据结构,用来描述一个对象的属性的行为,控制它的行为。这被称为“属性描述对象”(attributes object)。每个属性都有自己对应的属性描述对象,保存该属性的一些元信息。

下面是属性描述对象的一个实例。

{
  value: 123,
  writable: false,
  enumerable: true,
  configurable: false,
  get: undefined,
  set: undefined
}

属性描述对象提供6个元属性。

  • (1)value

value存放该属性的属性值,默认为undefined。

  • (2)writable

writable存放一个布尔值,表示属性值(value)是否可改变,默认为true。

  • (3)enumerable

enumerable存放一个布尔值,表示该属性是否可枚举,默认为true。如果设为false,会使得某些操作(比如for...in循环、Object.keys())跳过该属性。

  • (4)configurable

configurable存放一个布尔值,表示“可配置性”,默认为true。如果设为false,将阻止某些操作改写该属性,比如,无法删除该属性,也不得改变该属性的属性描述对象(value属性除外)。也就是说,configurable属性控制了属性描述对象的可写性。

  • (5)get

get存放一个函数,表示该属性的取值函数(getter),默认为undefined。

  • (6)set

set存放一个函数,表示该属性的存值函数(setter),默认为undefined。


Object.getOwnPropertyDescriptor()

Object.getOwnPropertyDescriptor()方法可以读出对象自身属性的属性描述对象。

var o = { p: 'a' };

Object.getOwnPropertyDescriptor(o, 'p')
// Object { value: "a",
//   writable: true,            默认都是true
//   enumerable: true,
//   configurable: true
// }

上面代码表示,使用Object.getOwnPropertyDescriptor()方法,读取o对象的p属性的属性描述对象。


Object.defineProperty(),Object.defineProperties()

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

Object.defineProperty(object, propertyName, attributesObject)

上面代码中,Object.defineProperty()方法接受三个参数:

  • 第一个是属性所在的对象,
  • 第二个是属性名(它应该是一个字符串),
  • 第三个是属性的描述对象。比如,新建一个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方法,都有性能损耗,会拖慢执行速度,不宜大量使用。
如果一次性定义或修改多个属性,可以使用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; }
});
//上面代码同时定义了get属性和value属性,结果就报错。
// TypeError: Invalid property.  无效的属性
// A property cannot both have accessors and be writable or have a value,  一个属性不能同时有访问器和可写值或者value值
Object.defineProperty()Object.defineProperties()的第三个参数,是一个属性对象。它的writable、configurable、enumerable这三个属性的默认值都为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 不能重新定义P属性;

上面代码由于writable属性默认为false,导致无法对p属性重新赋值;

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循环中。

可枚举性(enumerable)用来控制所描述的属性,是否将被包括在for...in循环之中。具体来说,如果一个属性的enumerable为false,下面三个操作不会取到该属性。

  • for..in循环
  • Object.keys方法
  • JSON.stringify方法
    因此,enumerable可以用来设置“秘密”属性。
var o = {a: 1, b: 2};

o.c = 3;
Object.defineProperty(o, 'd', {
  value: 4,
  enumerable: false
});

o.d // 4

for (var key in o) {
  console.log(o[key]);
}
// 1
// 2
// 3

Object.keys(o)  // ["a", "b", "c"]

JSON.stringify(o) // "{a:1, b:2, c:3}"

上面代码中,d属性的enumerablefalse,所以一般的遍历操作都无法获取该属性,使得它有点像“秘密”属性,但不是真正的私有属性,还是可以直接获取它的值。

基本上,JavaScript原生提供的属性都是不可枚举的,用户自定义的属性都是可枚举的。

可配置性(configurable)
可配置性(configurable)决定了是否可以修改属性描述对象。也就是说,当configurable为false的时候,value、writable、enumerable和configurable都不能被修改了。

var o = Object.defineProperty({}, 'p', {
  value: 1,
  writable: false,
  enumerable: false,
  configurable: false
});

Object.defineProperty(o,'p', {value: 2})
// TypeError: Cannot redefine property: p

Object.defineProperty(o,'p', {writable: true})
// TypeError: Cannot redefine property: p

Object.defineProperty(o,'p', {enumerable: true})
// TypeError: Cannot redefine property: p

Object.defineProperties(o,'p',{configurable: true})
// TypeError: Cannot redefine property: p

上面代码首先定义对象o,并且定义o的属性p的configurable为false。然后,逐一改动value、writable、enumerable、configurable,结果都报错。

存取器(accessor)
除了直接定义以外,属性还可以用存取器(accessor)定义。

其中:
存值函数称为setter,使用set命令;
取值函数称为getter,使用get命令。

存取器提供的是虚拟属性,即该属性的值不是实际存在的,而是每次读取时计算生成的。利用这个功能,可以实现许多高级特性,比如每个属性禁止赋值。

var o = {
  get p() {
    return 'getter';
  },
  set p(value) {
    console.log('setter: ' + value);
  }
};
o.p // "getter"
o.p = 123 // "setter: 123"

注意,取值函数Getter不能接受参数,存值函数Setter只能接受一个参数(即属性的值)。另外,对象也不能有与取值函数同名的属性。比如,上面的对象o设置了取值函数p以后,就不能再另外定义一个p属性。

利用存取器,可以实现数据对象与DOM对象的双向绑定。

Object.defineProperty(user, 'name', {
  get: function () {
    return document.getElementById('foo').value;
  },
  set: function (newValue) {
    document.getElementById('foo').value = newValue;
  },
  configurable: true
});

上面代码使用存取函数,将DOM对象foo与数据对象user的name属性,实现了绑定。两者之中只要有一个对象发生变化,就能在另一个对象上实时反映出来。

你可能感兴趣的:(Object.defineProperty和Object.defineProperties())