原文地址:https://wangdoc.com/javascript/
JavaScript提供了一个内部数据结构,用来描述对象的属性,控制它的行为,比如该属性是否可写、可遍历等等。这个内部数据结构称为属性描述对象。每个属性都有自己对应的属性描述对象,保存该属性的一些元信息。
{
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方法可以获取属性描述对象。它的第一个参数是目标对象,第二个参数是一个字符串,对应目标对象的某个属性名。
注意,Object.getOwnPropertyDescriptor方法只能用于对象自身的属性,不能用于继承的属性。
Object.getOwnPropertyNames()
Object.getOwnPropertyNames返回一个数组,成员是参数对象自身的全部属性的属性名,不管该属性是否可遍历。
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.defineProperties()
Object.defineProperty方法允许通过属性描述对象,定义或修改一个属性,然后返回修改后的对象。它接受三个参数,依次如下:
- object:属性所在的对象
- propertyName:字符串,表示属性名
- attributesObject:属性描述对象
举例来说,定义obj.p可以写成下面这样。
var obj = Object.defineProperty({}, "p", {
value: 123,
writable: false,
enumerable: true,
configurable: false
});
如果属性存在,相当于更新了该属性的描述对象。
如果一次性需要定义或修改多个属性,可以使用Object.defineProperties方法。
注意,一旦定义了取值函数get(或存值函数set),就不能将writable属性设为true,或者同时定义value属性,否则会报错。
Object.defineProperty()和Object.defineProperties()参数里面的属性描述对象,writable、configurable、enumerable这三个属性的默认值都为false。
Object.prototype.propertyIsEnumerable()
实例对象的propertyIsEnumerable方法返回一个布尔值,用来判断某个属性是否可遍历。注意,这个方法只判断自身的属性,对于继承的属性一律返回false。
元属性
属性描述对象的各个属性称为元属性,因为它们可以看作是控制属性的属性。
value
writable
正常模式下,对writable为false的属性赋值不会报错,只会默默失败。但是,严格模式下会报错。
如果原型对象的某个属性的writable为false,那么子对象将无法自定义这个属性。
var proto = Object.defineProperty({}, "foo", {
value: "a",
writable: false
});
var obj = Object.create(proto);
obj.foo = "b";
obj.foo // "a"
但是,有一个规避方法,就是通过覆盖属性描述对象,绕过这个限制。原因是这种情况下,原型链会被完全忽视。
var proto = Object.defineProperty({}, "foo", {
value: "a",
writable: false
});
var obj = Object.create(proto);
Object.defineProperty(obj, "foo", {
value: "b"
});
obj.foo // "b"
enumerable
enumerable(可遍历性)。
JavaScript早期版本,for...in循环是基于in运算符的。我们知道,in运算符不管某个属性是对象自身的还是继承的,都会返回true。后来引入了可遍历性的概念。只有可遍历性为true的属性才会被遍历。
具体来说,如果一个属性的enumerable为false,下面三个操作不会取到该属性。
- for...in循环
- Object.keys方法
- JSON.stringify方法
注意,for...in循环包括继承的属性,Object.keys方法不包括继承的属性。如果需要获取对象自身的所有属性,不管是否可遍历,可以使用Object.getOwnPropertyNames方法。
configurable
configurable决定了是否可以修改属性描述对象。也就是说configurable为false时,value、writable、enumerable和configurable都不能被修改了。
注意,writable只有在false改为true会报错,true改为false是允许的。
var obj = Object.defineProperty({}, "p", {
writable: true,
configurable: false
});
Object.defineProperty(obj, "p", {writable: false}) // success
至于value,只要writable和configurable有一个为true,就允许改动。
可配置决定了目标属性是否可以被删除(delete)
var obj = Object.defineProperties({}, {
p1: { value: 1, configurable: true },
p2: { value: 2, configurable: false }
});
delete obj.p1 // true
delete obj.p2 // false
存取器
存取器的两种写法:
var obj = Object.defineProperty({}, "p", {
get: function () {
return "getter";
},
set: function (value) {
console.log("setter: " + value);
}
});
var obj = {
get p() {
return "getter";
},
set p(value) {
console.log("setter: " + value);
}
};
存取器往往用于属性的值依赖于内部数据的场景。
var obj = {
$n: 5,
get next() {
return this.$n++;
},
set next(n) {
if (n >= this.$n) {
this.$n = n;
} else {
throw new Error("...");
}
}
};
对象的拷贝
var extend = function(to, from) {
for (var property in from) {
to[property] = from[property];
}
return to;
};
上面这个方法的问题在于,如果遇到存取器定义的属性,只会拷贝值。
extend({}, {
get a() { return 1 }
});
// {a: 1}
为了解决这个问题,我们可以通过Object.defineProperty方法来拷贝属性。
var extend = function(to, from) {
for (var property in from) {
if (!from.hasOwnProperty(property)) {
continue;
}
Object.defineProperty(
to,
property,
Object.getOwnPropertyDescriptor(from, property)
);
}
return to;
};
控制对象状态
有时候需要冻结对象的读写状态,防止对象被改变。JavaScript提供了三种冻结方法,最弱的一种是Object.preventExtensions,其次是Object.seal,最强的是Object.freeze。
Object.preventExtensions
Object.preventExtensions方法可以使得一个对象无法再添加新的属性。
var obj = new Object();
Object.preventExtensions(obj);
Object.defineProperty(obj, "p", {
value: "hello"
});
// TypeError: Cannot define property ...
Object.isExtensible()
Object.isExtensible方法用于检查一个对象是否使用了Object.preventExtensions方法。也就是说,检查是否可以为一个对象添加属性。
Object.seal()
Object.seal方法使得一个对象既无法添加新的属性,也无法删除旧属性。
Object.seal实质是把属性描述对象的configurable属性设为false,因此属性描述对象不在能改变。
Object.isSealed()
Object.isSealed方法用于检查一个对象是否使用了Object.seal方法。
var obj = { p: "a" };
Object.seal(obj);
Object.isSealed(obj); // true
Object.isExtensible(obj); // false
Object.freeze()
Object.freeze方法可以使得一个对象无法添加新属性、无法删除旧属性、也无法改变属性的值,使得这个对象变成了常量。
Object.isFrozen()
Object.isFrozen方法用于检查一个对象是否使用了Object.freeze方法。
使用了Object.freeze方法后,Object.isSealed将返回true,Object.isExtensible返回false。
Object.isFrozen的一个用途是,确认某个对象没有被冻结后,再对它的属性赋值。
局限性
上面三个方法锁定对象可写性有一个漏洞:可以通过改变原型对象,来为对象增加属性。
var obj = new Object();
Object.preventExtensions(obj);
var proto = Object.getPrototypeOf(obj);
proto.t = "hello";
obj.t // hello
一种解决方案是,把obj的原型也冻结住。
另外一个局限是,如果属性值是对象,上面的这些方法只能冻结属性指向的对象,而不能冻结对象本身的内容。
var obj = {
foo: 1,
bar: ["a", "b"]
};
Object.freeze(obj);
obj.bar.push("c");
obj.bar // ["a", "b", "c"]