属性类型
ECMA5弄了一个新东西, 就是用户可以通过Object.defineProperty配置属性的可写,可配置,可枚举, 让我们开发者可以定义一些属性。
ECMA有两种属性:数据属性,访问属性。
1. 数据属性
数据属性有4个可描述其行为特征得特性,分别是configurable(可配置),enumerable(可枚举),writable(可写入),value(值)
以往我们创建一个对象,并添加一个属性的方式:
var obj = {};
obj.name = '李白';
console.log(obj.name);
// 李白
obj.name = '李小白';
console.log(obj.name);
// 李小白
现在也可以用Object.defineProperty这种方式:
Object.defineProperty(对象, 属性名, 描述符对象);
var obj = {};
Object.defineProperty(obj, 'name', {
value: '李白'
});
console.log(obj.name);
// 李白
obj.name = '李小白';
console.log(obj.name);
// 李白
咦,我明明修改了obj.name为什么再次输出的还是李白?
数据属性有四种特性,分别是configurable(可配置),enumerable(可枚举),writable(可写入),value(值)。如果通过以上方法创建一个属性,默认的可配置,可枚举,可写入得属性的值为false。所以不生效。
看到这几个属性,我们立刻想到,那修改可写入这一项为true可以吧,我们来试试writable属性。
var obj = {};
Object.defineProperty(obj, 'name', {
value: '李白'
});
Object.defineProperty(obj, 'name', {
writable: true,
value: '杜甫'
});
// demo.js:6 Uncaught TypeError
代码执行到第6行直接报错,不再继续执行。为什么,因为默认的configurable属性为false,所以不可配置。也就是说,在第一次通过Object.defineProperty这个方法创建的时候未开启可配置属性,以后都无法更改其他特性,也包括可配置这个特性。所以只有两种方法可以解决这个问题,在创建这个属性的同时就给可配置为true,或者在第一次配置的时候就给可写为true。
Object.defineProperty(obj, 'name', {
configurable: true,
value: '李白'
});
Object.defineProperty(obj, 'name', {
writable: true,
value: '李白'
});
那现在剩下了enumerable属性,这个属性有什么作用呢?
var obj = {a: 1, b: 2, c: 3};
Object.defineProperty(obj, 'd', {
value: 4
});
for(var k in obj) {
console.log(k);
}
// a b c
enumerable默认为false得情况下,for in 循环只遍历到了abc这三个属性。
Object.defineProperty(obj, 'd', {
enumerable: true,
value: 4
});
for(var k in obj) {
console.log(k);
}
// a b c d
属性改为true的情况下,可以遍历到了,这也就是可枚举。
Object.defineProperties
可以一次定义多个属性, 方便快捷
var obj = {};
Object.defineProperties(obj, {
a: {value: 1},
b: {value: 2},
c: {value: 3}
});
console.log(obj);
// {a: 1, b: 2, c: 3}
Object.getOwnPropertyDescriptor
这个属性可以罗列出属性的上述四种特性,接上代码在控制台:
2. 访问器属性
访问器属性不包含数据值,它们包含一对getter和setter函数(非必须),在读取访问器属性时,调用了getter函数,这个函数负责返回有效的值。在写入访问器属性的时候,回调用setter属性,这个函数负责决定如何处理数据。访问器有四个特性,分别是configurable(可配置),enumerable(可枚举),get(读取属性调用的函数),set(设置属性调用的函数)
set和get
var obj = {
_year: 2019,
edition: 1
};
Object.defineProperty(obj, 'year', {
get: function () {
return this._year;
},
set: function (newValue) {
if (newValue > 2019) {
this._year = newValue;
this.edition += newValue - 2019;
}
}
});
obj.year = 2020;
console.log(obj.edition);