es6 屬性描述符 學習總結

property Descriptor 屬性描述符， 用於描述一個屬性的相關信息
        通過 Object.getOwnPropertyDescriptor(obj, name)
        例如：
            const obj = {
            'a': 123,
            'b': 234
            }
            const desc =  Object.getOwnPropertyDescriptor(a, 'a')
           結果：
            value: 屬性值
            configurable： 該屬性描述屬性是否可以被修改
            enumerable： 該屬性是否可以被枚舉
            writeable： 該屬性是否可以被重新賦值

         Object.getOwnPropertyDescriptor(OBJ)， 傳入一個對象，獲取到所有對象的屬性描述
         
         如果需要爲某個對象添加屬性時 或 修改屬性時， 配置其他屬性描述符，使用如下代碼：
           Object.defineProperty(obj, propertyName, 描述符)
           例如：
            const obj = {
                'a': 123,
                'b': 234
            }
            Object.defineProperty(obj, 'a',{
                configurable: false,
                value: 12
            })
            const desc =  Object.getOwnPropertyDescriptor(a, 'a')

            // 可以修改一個對象裏面的多個屬性描述
            Object.defineProperty(對象，多個屬性描述)

         存取器屬性： 屬性描述符中，如果配置了get 和 set 中的任何一個，則該屬性，不在是一個普通屬性， 而變成了存取器
          
          get 和 set 配置均爲函數，如果一個屬性是存取器屬性，則讀取該屬性時，會運行get 方法，
          將get 方法得到的返回值作爲屬性值；如果給該屬性賦值，則會運行set 方法 

          例如：
            const obj = {
                b: 2
            }
            Object.defineProperty(obj, "a", {
                get() {
                    console.log('運行get 方法')
                    // 這裏千萬不能使用 obj.a會無限循環
                    return obj._a;
                },
                set(val) {
                    // 這裏可以對屬性賦值進行控制
                    obj._a = value;
                    console.log('運行set 方法', val)
                }
            })


		// vue2中使用的是defineProperties 來手寫數據渲染頁面
        <p>
            性名： <span id="name"></span>
        </p>
        <p>
            年齡：
            <span id="age"></span>
        </p>
        const nameDom = document.getElementById("name");
        const ageDom = document.getElementById("age");
        const user = {};
        Object.defineProperties(user, {
            name: {
                get() {
                    return nameDom.innerText;
                },
                set(value) {
                    nameDom.innerText = value;
                }
            },
            age: {
                get() {
                    return ageDom.innerText;
                },
                set(value) {
                    ageDom.innerText = value;
                }
            }
        })