【JavaScript 18】属性描述对象 获取 自身全部属性名 定义or修改属性 判断可遍历性 元属性 存取器

JavaScript 提供了**属性描述对象（attributes object）**这个内部数据结构用来描述对象的属性，控制行为如该属性是否可写、可遍历等等

每个属性都有自己对应的属性描述对象用于保存该属性的元信息

{
  value: 123,
  writable: false,
  enumerable: true,
  configurable: false,
  get: undefined,
  set: undefined
}
1
2
3
4
5
6
7
8

attributes object提供6个元属性

1. value(默认是undefined
2. writable(表示value是否可写，默认是true
3. enumerable(表示属性是否可遍历，默认是true，false会使for…in循环、Object.keys()等操作跳过此属性
4. configurable(表示属性是否可配置，默认是true
5. get(取值函数getter
6. set(存值函数setter

Object.getOwnPropertyDescriptor()

Object.getOwnPropertyDescriptor()方法可以获取属性描述对象
第一个参数是目标对象，第二个参数是对应目标对象的某个属性名de字符串

var obj = { p: '1' };

Object.getOwnPropertyDescripter(obj, 'p')
// Object { value: "a",
//   writable: true,
//   enumerable: true,
//   configurable: true
// }
1
2
3
4
5
6
7
8

上面代码中Object.getOwnPropertyDescriptor()方法获取obj.p的属性描述对象
注意Object.getOwnPropertyDescriptor()方法只能用于对象自身的属性，不能用于继承的属性

Object.getOwnPropertyNames()

Object.getOwnPropertyNames方法返回一个数组，成员是参数对象自身的全部属性的属性名，不管该属性是否可遍历

var obj = Object.defineProperties({}, {
  p1: { value: 1, enumerable: true },
  p2: { value: 2, enumerable: false }
});

Object.getOwnPropertyNames(obj)
// ["p1", "p2"]
1
2
3
4
5
6
7

Object.keys只返回对象自身的可遍历属性的全部属性名

Object.keys([]) // []
Object.getOwnPropertyNames([]) // [ 'length' ]

Object.keys(Object.prototype) // []
Object.getOwnPropertyNames(Object.prototype)
// ['hasOwnProperty',
//  'valueOf',
//  'constructor',
//  'toLocaleString',
//  'isPrototypeOf',
//  'propertyIsEnumerable',
//  'toString']
1
2
3
4
5
6
7
8
9
10
11
12

上面代码中，数组自身的length属性是不可遍历的，Object.keys不会返回该属性
第二个例子的Object.prototype也是一个对象，所有实例对象都会继承它，它自身的属性都是不可遍历的

Object.defineProperty(), Object.defineProperties()

Object.defineProperty()方法允许通过属性描述对象定义或修改一个属性，然后返回修改后的对象

Object.defineProperty(object, propertyName, attributesObject)
1

该函数接受三个参数，分别是：

• 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
1
2
3
4
5
6
7
8
9
10
11

如果一次性定义或修改多个属性，可以使用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"
1
2
3
4
5
6
7
8
9
10
11
12

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
// }
1
2
3
4
5
6
7
8
9

上面代码中定义obj.foo时用了一个空的属性描述对象，就可以看到各个元属性的默认值

Object.prototype.propertyIsEnumerable()

实例对象的propertyIsEnumerable()方法返回一个布尔值，用来判断某个属性是否可遍历
注意这个方法只能用于判断对象自身的属性，对于继承的属性一律返回false

var obj = {};
obj.p = 678;

obj.propertyIsEnumerable('p') // true
obj.propertyIsEnumerable('toString') // false
1
2
3
4
5

上面代码中，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
1
2
3
4
5
6
7
8

上面代码是通过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
1
2
3
4
5
6
7
8
9
10

上面代码中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
1
2
3
4
5
6
7
8
9
10

如果原型对象的某个属性的writable为false，那么子对象将无法自定义这个属性

var proto = Object.defineProperty({}, 'foo', {
	value: 'a',
	writable: false
});

var obj = Object.create(proto);

obj.foo = 'c';
obj.foo // 'a'
1
2
3
4
5
6
7
8
9

上面代码中，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"
1
2
3
4
5
6
7
8
9
10
11

3 enumerable
enumerable（可遍历性）返回一个布尔值，表示目标属性是否可遍历
JavaScript 的早期版本，for…in循环是基于in运算符的
in运算符不管某个属性是对象自身的还是继承的，都会返回true

var obj = {};
'toString' in obj // true
1
2

上面代码中，toString不是obj对象自身的属性，但是in运算符也返回true
这导致了toString属性也会被for…in循环遍历

这显然不太合理，后来就引入了可遍历性enumerable的概念
只有可遍历的属性才会被for…in循环遍历，同时还规定toString这一类实例对象继承的原生属性都是不可遍历的，这样就保证了for…in循环的可用性

具体来说，如果一个属性的enumerable为false，下面三个操作不会取到该属性

• for…in循环
• Object.keys方法
• JSON.stringify方法

因此，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) // "{}"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

上面代码中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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

注意writable属性只有在false改为true时会报错，true改为false是允许的

var obj = Object.defineProperty({}, 'p', {
	writable: true,
	configurable: false
});

Object.defineProperty(obj, 'p', {writable: false})
// 修改成功
1
2
3
4
5
6
7

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
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

另外writable为false时，直接对目标属性赋值不报错但不会成功

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

obj.p = 2;
obj.p // 1
1
2
3
4
5
6
7
8

上面代码中，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
1
2
3
4
5
6
7
8
9
10

上面代码中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"
1
2
3
4
5
6
7
8
9
10
11

上面代码中obj.p定义了get和set属性
obj.p取值时就会调用get
赋值时，就会调用set

JavaScript 还提供了存取器的另一种写法

// 写法二
var obj = {
	get p() {
		return 'getter';
	},
	set p(value) {
		console.log('setter: ' + value);
	}
};
。。。
1
2
3
4
5
6
7
8
9
10