属性描述对象

原文地址：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"]

posted @ 2018-12-03 11:26 上升的泡泡阅读(638) 评论(0) 收藏举报

刷新页面返回顶部