概述
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属性的enumerable
为false
,所以一般的遍历操作都无法获取该属性,使得它有点像“秘密”属性,但不是真正的私有属性,还是可以直接获取它的值。
基本上,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属性,实现了绑定。两者之中只要有一个对象发生变化,就能在另一个对象上实时反映出来。