每个属性都有自己对应的属性描述对象用于保存该属性的元信息
{
value: 123,
writable: false,
enumerable: true,
configurable: false,
get: undefined,
set: undefined
}
attributes object提供6个元属性
Object.getOwnPropertyDescriptor()方法可以获取属性描述对象
第一个参数是目标对象,第二个参数是对应目标对象的某个属性名de字符串
var obj = { p: '1' };
Object.getOwnPropertyDescripter(obj, 'p')
// Object { value: "a",
// writable: true,
// enumerable: true,
// configurable: true
// }
上面代码中Object.getOwnPropertyDescriptor()方法获取obj.p的属性描述对象
注意Object.getOwnPropertyDescriptor()方法只能用于对象自身的属性,不能用于继承的属性
Object.getOwnPropertyNames方法返回一个数组,成员是参数对象自身的全部属性的属性名,不管该属性是否可遍历
var obj = Object.defineProperties({}, {
p1: { value: 1, enumerable: true },
p2: { value: 2, enumerable: false }
});
Object.getOwnPropertyNames(obj)
// ["p1", "p2"]
Object.keys只返回对象自身的可遍历属性的全部属性名
Object.keys([]) // []
Object.getOwnPropertyNames([]) // [ 'length' ]
Object.keys(Object.prototype) // []
Object.getOwnPropertyNames(Object.prototype)
// ['hasOwnProperty',
// 'valueOf',
// 'constructor',
// 'toLocaleString',
// 'isPrototypeOf',
// 'propertyIsEnumerable',
// 'toString']
上面代码中,数组自身的length属性是不可遍历的,Object.keys不会返回该属性
第二个例子的Object.prototype也是一个对象,所有实例对象都会继承它,它自身的属性都是不可遍历的
Object.defineProperty()方法允许通过属性描述对象定义或修改一个属性,然后返回修改后的对象
Object.defineProperty(object, propertyName, attributesObject)
该函数接受三个参数,分别是:
var obj = Object.defineProperty({}, 'p', {
value: 123,
writable: false,
enumerable: true,
configurable: false
});
obj.p // 123
obj.p = 246;
obj.p // 123
如果一次性定义或修改多个属性,可以使用Object.defineProperties()方法
var obj = Object.defineProperties({}, {
p1: { value: 123, enumerable: true },
p2: { value: 'abc', enumerable: true },
p3: { get: function () { return this.p1 + this.p2 },
enumerable:true,
configurable:true
}
});
obj.p1 // 123
obj.p2 // "abc"
obj.p3 // "123abc"
p3属性定义了取值函数get,即每次读取该属性,都会调用这个取值函数
注意一旦定义了取值函数get(或存值函数set),就不能将writable属性设为true或者同时定义value属性,否则会报错
Object.defineProperty()和Object.defineProperties()参数里面的属性描述对象,writable、configurable、enumerable这三个属性的默认值都为false
var obj = {};
Object.defineProperty(obj, 'foo', {});
Object.getOwnPropertyDescriptor(obj, 'foo')
// {
// value: undefined,
// writable: false,
// enumerable: false,
// configurable: false
// }
上面代码中定义obj.foo时用了一个空的属性描述对象,就可以看到各个元属性的默认值
实例对象的propertyIsEnumerable()方法返回一个布尔值,用来判断某个属性是否可遍历
注意这个方法只能用于判断对象自身的属性,对于继承的属性一律返回false
var obj = {};
obj.p = 678;
obj.propertyIsEnumerable('p') // true
obj.propertyIsEnumerable('toString') // false
上面代码中,obj.p是可遍历的,而obj.toString是继承的属性
属性描述对象的各个属性称为“元属性”,因为它们可以看作是控制属性的属性
1 value
目标属性的值
var obj = {};
obj.p = 123;
Object.getOwnPropertyDescriptor(obj, 'p').value
// 123
Object.defineProperty(obj, 'p', { value: 246 });
obj.p // 246
上面代码是通过value属性,读取或改写obj.p的例子
2 writable
writable属性是一个布尔值,决定了目标属性的值(value)是否可以被改变
var obj = {};
Object.defineProperty(obj, 'a', {
value: 37,
writable: false
});
obj.a // 37
obj.a = 74;
obj.a // 37
上面代码中obj.a的writable属性是false
然后改变obj.a的值则不会有任何效果
注意正常模式下对writable为false的属性赋值不会报错,只会默默失败
但是严格模式下会报错,即使对a属性重新赋予一个同样的值
'use strict'
var obj = {};
Object.defineProperty(obj, 'a', {
value: 37,
writable: false
});
obj.a = 37;
// Uncaught TypeError: Cannot assign to read only property 'a' of object
如果原型对象的某个属性的writable为false,那么子对象将无法自定义这个属性
var proto = Object.defineProperty({}, 'foo', {
value: 'a',
writable: false
});
var obj = Object.create(proto);
obj.foo = 'c';
obj.foo // 'a'
上面代码中,proto是原型对象,它的foo属性不可写
obj对象继承proto,也不可以再自定义这个属性(若为严格模式还会抛出错误)
但是有一个规避方法就是通过覆盖属性描述对象从而绕过这个限制
因为这种情况下,原型链会被完全忽视
var proto = Object.defineProperty({}, 'foo', {
value: 'a',
writable: false
});
var obj = Object.create(proto);
Object.defineProperty(obj, 'foo', {
value: 'b'
});
obj.foo // "b"
3 enumerable
enumerable(可遍历性)返回一个布尔值,表示目标属性是否可遍历
JavaScript 的早期版本,for…in循环是基于in运算符的
in运算符不管某个属性是对象自身的还是继承的,都会返回true
var obj = {};
'toString' in obj // true
上面代码中,toString不是obj对象自身的属性,但是in运算符也返回true
这导致了toString属性也会被for…in循环遍历
这显然不太合理,后来就引入了可遍历性enumerable的概念
只有可遍历的属性才会被for…in循环遍历,同时还规定toString这一类实例对象继承的原生属性都是不可遍历的,这样就保证了for…in循环的可用性
具体来说,如果一个属性的enumerable为false,下面三个操作不会取到该属性
因此,enumerable可以用来设置秘密属性
var obj = {};
Object.defineProperty(obj, 'x', {
value: 123,
enumerable: false
});
obj.x // 123
for (var key in obj) {
console.log(key);
}
// undefined
Object.keys(obj) // []
JSON.stringify(obj) // "{}"
上面代码中obj.x属性的enumerable为false,所以一般的遍历操作都无法获取该属性
使得像秘密属性,但不是真正的私有属性,还是可以直接获取它的值
注意for…in循环包括继承的属性,Object.keys方法不包括继承的属性
如果需要获取对象自身的所有属性,不管是否可遍历,可以使用Object.getOwnPropertyNames方法
另外JSON.stringify方法会排除enumerable为false的属性,有时可以利用这一点
如果对象的 JSON 格式输出要排除某些属性,就可以把这些属性的enumerable设为false
4 configurable
configurable(可配置性)返回一个布尔值,决定了是否可以修改属性描述对象
也就是说configurable为false时,writable、enumerable和configurable都不能被修改了
var obj = Object.defineProperty({}, 'p', {
value: 1,
writable: false,
enumerable: false,
configurable: false
});
Object.defineProperty(obj, 'p', {writable: true})
// TypeError: Cannot redefine property: p
Object.defineProperty(obj, 'p', {enumerable: true})
// TypeError: Cannot redefine property: p
Object.defineProperty(obj, 'p', {configurable: true})
// TypeError: Cannot redefine property: p
Object.defineProperty(obj, 'p', {value: 2})
// TypeError: Cannot redefine property: p
注意writable属性只有在false改为true时会报错,true改为false是允许的
var obj = Object.defineProperty({}, 'p', {
writable: true,
configurable: false
});
Object.defineProperty(obj, 'p', {writable: false})
// 修改成功
value属性的情况比较特殊
只要writable和configurable有一个为true,就允许改动value
var o1 = Object.defineProperty({}, 'p', {
value: 1,
writable: true,
configurable: false
});
Object.defineProperty(o1, 'p', {value: 2})
// 修改成功
var o2 = Object.defineProperty({}, 'p', {
value: 1,
writable: false,
configurable: true
});
另外writable为false时,直接对目标属性赋值不报错但不会成功
var obj = Object.defineProperty({}, 'p', {
value: 1,
writable: false,
configurable: true
});
obj.p = 2;
obj.p // 1
上面代码中,obj.p的writable为false,对obj.p直接赋值不会生效
如果是严格模式,还会报错
可配置性决定了目标属性是否可以被删除(delete)
var obj = Object.defineProperties({}, {
p1: { value: 1, configurable: true },
p2: { value: 2, configurable: false }
});
delete obj.p1 // true
delete obj.p2 // false
obj.p1 // undefined
obj.p2 // 2
上面代码中obj.p1的configurable是true,所以可以被删除,obj.p2就无法删除
除了直接定义以外,属性还可以用存取器(accessor)定义
其中存值函数称为setter,使用属性描述对象的set属性
取值函数称为getter,使用属性描述对象的get属性
一旦对目标属性定义了存取器,那么存取的时候都将执行对应的函数
利用这个功能可以实现许多高级特性,比如定制属性的读取和赋值行为
var obj = Object.defineProperty({}, 'p', {
get: function () {
return 'getter';
},
set: function (value) {
console.log('setter: ' + value);
}
});
obj.p // "getter"
obj.p = 123 // "setter: 123"
上面代码中obj.p定义了get和set属性
obj.p取值时就会调用get
赋值时,就会调用set
JavaScript 还提供了存取器的另一种写法
// 写法二
var obj = {
get p() {
return 'getter';
},
set p(value) {
console.log('setter: ' + value);
}
};
。。。