zoukankan      html  css  js  c++  java
  • 属性描述对象

    原文地址: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()参数里面的属性描述对象,writableconfigurableenumerable这三个属性的默认值都为false

    Object.prototype.propertyIsEnumerable()

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

    元属性

    属性描述对象的各个属性称为元属性,因为它们可以看作是控制属性的属性。

    value

    writable

    正常模式下,对writablefalse的属性赋值不会报错,只会默默失败。但是,严格模式下会报错。
    如果原型对象的某个属性的writablefalse,那么子对象将无法自定义这个属性。

    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的属性才会被遍历。
    具体来说,如果一个属性的enumerablefalse,下面三个操作不会取到该属性。

    • for...in循环
    • Object.keys方法
    • JSON.stringify方法
      注意,for...in循环包括继承的属性,Object.keys方法不包括继承的属性。如果需要获取对象自身的所有属性,不管是否可遍历,可以使用Object.getOwnPropertyNames方法。

    configurable

    configurable决定了是否可以修改属性描述对象。也就是说configurablefalse时,valuewritableenumerableconfigurable都不能被修改了。
    注意,writable只有在false改为true会报错,true改为false是允许的。

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

    至于value,只要writableconfigurable有一个为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"]
    
  • 相关阅读:
    Alpha冲刺总结
    测试随笔
    项目Alpha冲刺Day11
    项目Alpha冲刺Day12
    项目Alpha冲刺Day10
    项目Alpha冲刺Day9
    项目Alpha冲刺Day6
    beta冲刺1
    Beta准备博客
    基于微信小程序的实验室管理的postmortem
  • 原文地址:https://www.cnblogs.com/chris-jichen/p/10057489.html
Copyright © 2011-2022 走看看