其实关于属性描述对象,阮大大有篇文章已经写得很详细了,不过作为必学知识点,也避免阮大大的网站再被攻击后看不到,自己还是做下笔记,印象更深刻些,想了解更多的可以戳原文查看。
一、属性描述对象
1. 属性描述对象
属性描述对象,是 JavaScript 里用来描述对象属性的一种数据结构,每个属性都有对应的一个属性描述对象。它具有6个元属性,结构如下:
{
value: 'hello world',
writable: true,
enumerable: true,
configurable: true,
get: undefined,
set: undefined
}
2. 属性描述对象的获取
(1) Object.getOwnPropertyDescriptor(obj, propName)
可以获取对象目标属性的属性描述对象,第一个参数是目标对象,第二个参数是目标对象的目标属性。
var obj = {};
obj.content = 'hello world';
Object.getOwnPropertyDescriptor(obj, 'content');
/* {
value: 'hello world',
writable: true,
enumerable: true,
configurable: true
} */
(2)Object.getOwnPropertyDescriptors(obj)
可以获取对象所有属性的属性描述对象的对象集合。可以获取自身所有无论是否可以遍历,不会获取继承的属性。
var obj = {};
obj.content = 'hello world';
obj.name = 'example';
Object.getOwnPropertyDescriptors(obj);
/* {
content: {
value: 'hello world',
writable: true,
enumerable: true,
configurable: true
},
name: {
value: 'example',
writable: true,
enumerable: true,
configurable: true
}
} */
3. 属性描述对象的定义
(1)Object.defineProperty(obj, propName, descriptorObj)
可以定义对象的目标属性的属性描述对象。第一个参数目标对象,第二个参数是属性名(字符串),第三个参数是属性描述对象,最终返回修改后的对象。
var obj = Object.defineProperty({}, 'content', {
value: 'hello world',
writable: true,
enumerable: true,
configurable: true
});
obj.content // "hello world"
(2)Object.defineProperties(obj, descriptorsObj)
可以定义对象多个属性的属性描述对象,然后返回修改后的对象。用法如下:
var obj = Object.defineProperties({}, {
content: {
value: 'hello world',
writable: true,
enumerable: true,
configurable: true
},
name: {
value: 'example',
writable: true,
enumerable: true,
configurable: true
}
});
obj.content // "hello world"
obj.name // "example"
二、元属性
属性描述对象里的属性,即为元属性,有6个:value、writable、enumerable、configurable、get、set
,下面一一讲解。
1. value
value
是属性的值,可以为任意类型。下面的写法是等价的:
var obj = {};
obj.content = 'hello world';
obj.content; // "hello world"
// 相当于
Object.defineProperty(obj, 'content', {value: 'hello'});
Object.getOwnPropertyDescriptor(obj, 'content').value; // "hello"
只要 configurable
和 writable
其中一个为 true
则 value
可以被改写。
var o1 = Object.defineProperty({}, 'content', {
value: 'hello',
writable: true,
configurable: false
});
o1.content = 'hello world'; // 成功
var o2 = Object.defineProperty({}, 'content', {
value: 'world',
writable: false,
configurable: true
});
o2.content = 'hello world'; // 成功
2. writable
writable
表示该属性是否可以被改写,是一个布尔值。为 true
表示可以被改写,false
反之。注意,正常模式下,对 writable
为 false
的属性赋值不会报错,只会静默失败。但是,严格模式下会报错,即使是对该属性重新赋予一个同样的值。
var obj = {};
Object.defineProperty(obj, 'content', {
value: 'hello',
writable: false // 如果增加一个 configurable 为 true 则仍可以被改写
});
obj.content // "hello"
obj.content = 'hello world';
obj.content // "hello"
3. enumerable
enumerable
表示该属性是否可枚举,是一个布尔值。当属性不可枚举即 enumerable
为 false
时,该属性不会被 for-in、Object.keys()、JSON.stringify()
遍历。该元属性的诞生是因为的 in
不仅可以遍历自身属性还可以遍历继承的属性,为了不让其遍历继承属性,所以增加了 enumerable
并规定了 in
只可遍历可枚举属性,且继承的属性都是不可枚举的。
// 可利用 enumerable 设置不想被遍历的属性
var obj = Object.defineProperties({}, {
content: {
value: 'hello',
enumerable: true
},
phone: {
value: '13512345678',
enumerable: false
}
});
JSON.stringify(obj); // "{"content":"hello"}"
4. configurable
configurable
表示改属性的元属性是否可配置,是一个布尔值。当其为 false
时,value、enumerable、configurable
不可被更改,writable
只能从 true
改为 false
;且此时该属性无法被删除。
var obj = Object.defineProperty({}, 'content', {
value: 'hello',
writable: true,
configurable: false
});
obj.content = 'hello world'; // 成功
// 由于设置了 configurable 为false,所以再次更改配置会报错
Object.defineProperty(obj, 'content', {
value: 'world',
writable: false,
configurable: true
}); // Uncaught TypeError: Cannot redefine property: content
// 改动一下 configurable 就可以设置成功了,因为上面说的:
// 1.value 只要 writable 或 configurable 之一为 true 则可改;
// 2.writable 在不可配置情况下能 true 改 false
Object.defineProperty(obj, 'content', {
value: 'world',
writable: false,
configurable: false
}); // 成功
5. 存取器 get 和 set
set
和 get
属性的值是一个函数,分别对应存取函数 setter
和 getter
。一旦定义了存取函数,那么存取该属性的时候都会先执行对应的存取函数,所以可以用该属性做一些存取限制。
var obj = Object.defineProperty({}, 'content', {
get: function () { // 不接受参数
return 'getter';
},
set: function (value) { // 只接受一个参数,即要赋值的value
console.log('setter: ' + value);
}
});
obj.content // "getter"
obj.content = 'hello' // "setter: hello"
存取器还有另一种写法可以直接定义在对象里,类似于 function
的声明方式。而且一般会搭配一个内在变量(非必要,只是用来存值放对象内外没差别)一起使用,该变量一般以 _
或 $
开头以区分对象的其他属性。
var obj = {
$age: 18, // 用来存操作age的临时变量,可以随意命名,但建议与属性名相同方便对应
get age() {
return ++this.$age;
},
set age(val) {
if (val < this.$age) {
alert('新值必须大于旧值');
} else {
this.$age = age;
}
}
}
obj.age; // 19
obj.age; // 20
obj.age = 18; // 赋值失败,提示新值必须大于旧值,age还是20
将对象的属性赋值给另一个对象属性时,不会复制存取函数,而是直接复制函数的返回值。比如将上面例子中的 age
赋值给另一个对象的属性时,只会复制21,所以下次调用的话不会返回22。
var obj2 = {};
obj2.age = obj.age; // 调用obj.age在之前的20之上加1变成21
obj2.age; // 再次调用还是21,因为getter函数没被复制过来
// 可利用下面的函数解决上述问题,注意如果只复制 age 的描述对象没用,因为 $age 没被复制过来,对 age 读取会返回 NaN
var copy = function (to, from) {
for (var property in from) {
if (!from.hasOwnProperty(property)) continue;
Object.defineProperty(
to,
property,
Object.getOwnPropertyDescriptor(from, property)
);
}
return to;
}
copy(obj2, obj);
obj2.age;
注意,一旦定义了存取函数 setter
和 getter
,则不能将 writable
属性设置为 true
,或者再同时定义 value
属性。