屬性類型：數據類型，訪問器類型的坑

時間 2019-12-02

標籤屬性類型數據訪問简体版

原文原文鏈接

　　ECMA5弄了一個新東西，就是用戶能夠經過Object.defineProperty配置屬性的可寫，可配置，可枚舉, 讓咱們開發者能夠定義一些屬性，這些屬性有點像native的趕腳html

　　好比，咱們日常定義一個對象這樣子就能夠了；chrome

var obj0 = {
    name : "nono"
};

　　咱們也能夠用新的方式，Object的屬性設置方法defineProperty設置屬性, 若是用戶沒有傳enumberable, configurable, writable的值，默認是false, 也就是說默認是沒法枚舉，沒法配置，沒法可寫的：this

var obj1 = {};
Object.defineProperty(obj1, "name",{
    writable : false,
    configurable : false,
    enumerable : false,
    value : "nono"
});

　　writable

　　這個配置是不可寫的，因此把對象obj1的name從新定義無效，（在ecma的嚴格模式報錯）;spa

<html>
    <body>
        <script>
        var obj1 = {};
        Object.defineProperty(obj1, "name",{
        writable : false,
        value : "nono"
        });
        console.log("個人名字是: "+ obj1.name);
        //從新定義名字;
        obj1.name = "qihao";
        //刪除名字
        delete obj1.name;
        console.log("個人新名字是: "+ obj1.name);
        </script>
    </body>
</html>

這個是打印出來的結果：，聲明咱們刪除和從新定義名字的代碼沒生效，由於writable是false；3d

　　咱們把元素的writable的配置從true改到false，再改到true，會報錯code

<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <script>
        var obj1 = {};
        Object.defineProperty(obj1, "favor",{
            writable : true,
            value  : "poppin"
        });
        Object.defineProperty(obj1, "favor",{
            writable : false,
            value  : "readBook"
        });
        try{
        //若是從新定義可寫屬性從false到true會報錯;
            Object.defineProperty(obj1, "favor",{
            writable : true,
            value  : "poppin"
            });
        }catch(e) {
            console.log( "definedProperty error" + e );
        }
        </script>
    </body>
</html>

　　,由於默認的configurable是false，因此從新配置writable報錯了；htm

　　configurable

　　如今的cofigurable派上用場了：對象

<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <script>
        var obj1 = {};
        Object.defineProperty(obj1, "favor",{
            writable : true,
            configurable : true,
            value  : "poppin"
        });
        console.log( obj1.favor );

        Object.defineProperty(obj1, "favor",{
            writable : false,
            configurable : true,
            value  : "readBook"
        });
        console.log( obj1.favor );

        try{
        //由於configurable爲true了，因此從新定義favor的writable不會報錯;
            Object.defineProperty(obj1, "favor",{
                writable : true,
                value  : "poppin"
            });
        }catch(e) {
            console.log( "definedProperty error" + e );
        };
        console.log( obj1.favor );
        </script>
    </body>
</html>

結果是：blog

　　也就是咱們經過配置configurable爲true，那麼隨時要更改enumerable，value， writable的配置爲false或者true都沒有問題;ip

　　enumerable

<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <script>
        var obj1 = {};
        Object.defineProperty(obj1, "favor",{
            enumerable : false,
            value  : "poppin"
        });

        Object.defineProperty(obj1, "age", {
            value : 27
        });

        Object.defineProperty(obj1, "weight",{
            "value" : 64,
            enumerable : true
        });
        for(var p in obj1)console.log( p );
        </script>
    </body>
</html>

　　就輸出了weight這個屬性， favor和age這兩個屬性沒有枚舉到；

　　Object.getOwnPropertyDescriptor

　　Object.getOwnPropertyDescriptor能夠獲取詳細的描述, 不過仍是沒有native的牛逼....;

　　Object.defineProperties

<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <script>
        var obj1 = {};
        Object.defineProperties(obj1,{
            x : {value : "x"},
            y : {enumerable : true},
            z : {writable : true}
        });
        for(var p in obj1)console.log( p );
        </script>
    </body>
</html>

　　經過defineProperties能夠一次定義多個屬性， 方便快捷

　　訪問器屬性,get, set

<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <script>
        var obj = {};
        Object.defineProperty(obj, "name", {
            set : function(name) {
                this._name = name+" afterfix";
            },
            get : function() {
                return "prefix " + this._name;
            }
        });
        obj.name = "nnnn";
        console.log( obj.name );
        </script>
    </body>
</html>

　　old get,set ,非標準的Getter，Setter方法

　　在ecma5標準未被採納以前，大多數js解釋引擎實現了非標準的get，set方法， chrome下如今還有這些方法:

<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <script>
        var obj = {};
        obj.__defineGetter__("g", function() {
            return this._g+"__";
        });
        obj.__defineSetter__("g", function(arg) {
            this._g = arg;
        });
        </script>
    </body>
</html>

　　輸出結果：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。