JS的可枚舉性

    在學習ES6的過程當中，涉及到遍歷方法時，提到過可枚舉性，且多種遍歷方法都與可枚舉性相關。本章節，將總結這些遍歷方法的可枚舉性，並在必要的部分，給出對比實例。

1、設置屬性的可枚舉性

　　在上一文章「 Object的原型克隆」中，簡單介紹了Object.defineProperty()方法。經過該方法的屬性描述符 enumerable，就能夠設置該屬性是否能夠枚舉，當設置爲false時，不可枚舉；不然，可枚舉。如示例：

            Object.defineProperty(obj1, 'test', {
                configurable: false,
                enumerable: false,
                value: 'not enumerable'
            });

　　將obj1的test屬性，設置成不可枚舉類型。其中的obj1爲原型繼承實例對象，相關源碼可查看上一章 「 Object的原型克隆」。

　　其屬性結構以下圖：

　　　　  

        以上爲chrome下控制檯obj1的輸出截圖，能夠看到屬性test顯示爲帶灰度的色值，爲不可枚舉屬性。

 

2、如何驗證可枚舉性

       可經過 Object.getOwnPropertyDescriptor() 實現驗證，如實例：

        Object.getOwnPropertyDescriptor(obj1, 'test').enumerable，爲false則爲不可枚舉。

　　 tips：僅驗證自身屬性的可枚舉性，繼承屬性沒法驗證哦～～

 

3、與可枚舉性相關的操做和方法

　　3.一、總覽

　　　　a、for…in：遍歷自身和繼承的可枚舉屬性；

　　　　b、Object.keys()：返回對象自身的可枚舉屬性鍵名；

　　　　c、JSON.stringify()：串行化對象自身的可枚舉屬性；

　　　　d、Object.assign()：複製自身可枚舉的屬性；

　　　　e、Reflect.enumerate():返回全部for...in循環會遍歷的屬性；

　　　　f、全部Class的原型的方法都不可枚舉。

　　　　經過第一節中obj1的屬性結構截圖可分析其屬性的組成：

　　　　　　自身屬性：age、colors、name、test（不可枚舉）；

　　　　　　原型(繼承)屬性：sayAge、sayName。

　　

　　3.二、實驗數據驗證

　　　　a、for…in

       　　　 

　　　　符合預期，除test屬性不可枚舉外，其餘屬性均可遍歷到；

 

　　　　b、Object.keys()

     　　   

　　　　符合預期，僅遍歷到自身可枚舉屬性；

    

　　　　c、JSON.stringify()

       　　 

　　　　符合預期，僅解析自身可枚舉屬性；

    

　　　　d、Object.assign()

　　　　 

　　　　符合預期，僅複製自身可枚舉屬性；

 

　　　　e、Reflect.enumerate() 在chrome中還未實現，暫沒法驗證。

    

　　　　f、驗證Class的原型方法都不可枚舉

            class Points {
                constructor(name, age) {
                    this.name = name;
                    this.age = age;
                }
            }
 
            Object.assign(Points.prototype, SubType.prototype);
            let point = new Points('puppy', 1);

　　　　　　point實例的屬性結構以下：

          　　  

　　　　　　經過chrome的控制檯，能夠看出繼承的原型屬性中，sayAge與sayName均爲可枚舉屬性，看似與預期不符合？

 　　　　　　　

　　　　　　下面對Class進行擴展，進一步驗證：

           class Points {
                constructor(name, age) {
                    this.name = name;
                    this.age = age;
                }
 
                sayName() {
                    console.log(this.name)
                }
                sayColor() {
                    console.log(this.color)
                }
            }

　　　　chrome控制檯輸出：

 　　  

　　　　其中的sayColor和sayName均不可枚舉，符合預期。所以得出結論：

　　　　經過Class定義的原型方法，不可枚舉，且若是這些方法覆蓋了原有的方法，這些方法也將不可枚舉。

　　　　 tips：直接寫入Class裏的屬性，爲原型屬性，全部實例共有；寫在constructor內的爲實例對象自身屬性～～