屬性描述符

什麼是屬性描述符?

屬性描述符就是一個屬性除了屬性名與屬性值之外的其他相關信息

通過Object.getOwnPropertyDescriptor(對象, 屬性名)可以得到一個對象的某個屬性的屬性描述符

let obj = {
    a: 1
}
console.log(Object.getOwnPropertyDescriptor(obj, 'a'));
// {
//     value: 1,
//     writable: true,
//     enumerable: true,
//     configurable: true
// }

通過Object.getOwnPropertyDescriptors(對象)可以得到某個對象的所有屬性描述符

let obj = {
    a: 1,
    b: 2
}
console.log(Object.getOwnPropertyDescriptors(obj));
// {
//     a: {
//         value: 1, 
//         writable: true,
//         enumerable: true,
//         configurable: true
//     }
//     b: {
//         value: 2, 
//         writable: true, 
//         enumerable: true, 
//         configurable: true
//     }
// }

接下來,說一說每一個屬性描述符的作用

value-屬性值

不多逼逼

configurable-屬性描述符是否可被修改

當我們設置configurable爲false以後,再去修改屬性描述符的話,會報錯

let obj = {
    a: 1,
    b: 2
}
Object.defineProperty(obj, 'a', {
    value: 'a',
    configurable: false
})
Object.defineProperty(obj, 'a', {
    value: 'a',
    configurable: true
})
// Uncaught TypeError: Cannot redefine property: a
//    at Function.defineProperty (<anonymous>)

enumerable-該屬性是否可被枚舉

當設置一個屬性的enumerable爲false時,該屬性不可被forin循環
但是不影響forof循環,因爲forof循環看有沒有Symbol(Symbol.iterator)
forin循環的是屬性名,forof循環的是屬性值

let obj = {
    a: 1,
    b: 2
}

Object.defineProperty(obj, 'a', {
    value: 'a',
    enumerable: false
})
for (const key in obj) {
    console.log(key)
}
// 只輸出b

數組也一樣

let arr = [1, 2, 3]
Object.defineProperty(arr, 1, {
    value: 22,
    enumerable: false
})
for (const key in arr) {
    console.log(key)
}
// 輸出0和2

writable-該屬性是否可被重新賦值

當一個屬性的writable爲false時,該屬性值不可修改

let obj = {
    a: 1,
    b: 2
}

Object.defineProperty(obj, 'a', {
    value: 'a',
    writable: false
})
obj.a = 'a_'
console.log(obj)
// {a: "a", b: 2}

同時修改多個屬性的描述符

通過Object.defineProperties(對象, 配置)可以同時修改多個屬性的屬性描述符

let obj = {
    a: 1,
    b: 2
}

Object.defineProperties(obj, {
    a: {
        value: 'a',
        configurable: true
    },
    b: {
        value: 'b',
        configurable: true
    }
})

存取器屬性

屬性描述符中，如果配置了 get 和 set 中的任何一個，則該屬性，不再是一個普通屬性，而變成了存取器屬性。

get 和 set配置均爲函數，如果一個屬性是存取器屬性，則讀取該屬性時，會運行get方法，將get方法得到的返回值作爲屬性值；如果給該屬性賦值，則會運行set方法。

存取器屬性最大的意義，在於可以控制屬性的讀取和賦值。

get

當取一個值的時候,會執行該函數,並返回該函數結果

let obj = {
    a: 1,
    b: 2
}

Object.defineProperty(obj, 'a', {
    get() {
        console.log('取值')
        return 'aaa'
    }
})
console.log(obj)

而且該值會顯示爲(…)
點擊會執行get函數

點擊後

set

當給一個屬性賦值的時候,會執行該函數,

let obj = {
    a: 1,
    b: 2
}

Object.defineProperty(obj, 'a', {
    set(value) {
        obj.a_ = value
    }
})

無論是get還是set,在賦值時都不可直接賦值給當前操作的屬性,需要賦值給另一個值,否則會陷入死循環

存取器總結

存取器可以幫我們在賦值和取值的時候順便做一些其他的事
舉個栗子

<body>
<span id="span">我是span</span>
<script>
let span = document.getElementById('span');
console.dir(span)
</script>

在span的__proto__中就存在很多存取器
當我們修改span.innerText = 222的時候,頁面上的span標籤的內容也會跟着改變
但是span只是一個js對象,憑啥改了它,頁面的內容也會跟着一起變呢?
當然因爲修改這個值的時候,順便做了其他的事,這就是由set完成的,所以在__proto__有很多存取器屬性

但是由於存取器不可直接給自己屬性賦值,就導致了需要的內存會翻一倍

反射Reflect

Reflect是什麼？

Reflect是一個內置的JS對象，它提供了一系列方法，可以讓開發者通過調用這些方法，訪問一些JS底層功能

由於它類似於其他語言的反射，因此取名爲Reflect

栗子:
當你使用obj.a = 1的時候,就是在底層調用Reflect.set方法

它可以做什麼？

使用Reflect可以實現諸如屬性的賦值與取值、調用普通函數、調用構造函數、判斷屬性是否存在與對象中等等功能

這些功能不是已經存在了嗎？爲什麼還需要用Reflect實現一次？

有一個重要的理念，在ES5就被提出：減少魔法、讓代碼更加純粹

這種理念很大程度上是受到函數式編程的影響

ES6進一步貫徹了這種理念，它認爲，對屬性內存的控制、原型鏈的修改、函數的調用等等，這些都屬於底層實現，屬於一種魔法，因此，需要將它們提取出來，形成一個正常的API，並高度聚合到某個對象中，於是，就造就了Reflect對象

因此，你可以看到Reflect對象中有很多的API都可以使用過去的某種語法或其他API實現。

它裏面到底提供了哪些API呢？

Reflect.set(target, propertyKey, value): 設置對象target的屬性propertyKey的值爲value，等同於給對象的屬性賦值
Reflect.get(target, propertyKey): 讀取對象target的屬性propertyKey，等同於讀取對象的屬性值
Reflect.apply(target, thisArgument, argumentsList)：調用一個指定的函數，並綁定this和參數列表。等同於函數調用
Reflect.deleteProperty(target, propertyKey)：刪除一個對象的屬性
Reflect.defineProperty(target, propertyKey, attributes)：類似於Object.defineProperty，不同的是如果配置出現問題，返回false而不是報錯
Reflect.construct(target, argumentsList)：用構造函數的方式創建一個對象
Reflect.has(target, propertyKey): 判斷一個對象是否擁有一個屬性
其他API：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

reflect的存在爲我們參與js底層實現提供了可能

Proxy 代理

代理：提供了修改底層實現的方式

爲什麼需要反射Reflect?

如果我們給一個obj做代理,那麼賦值取值等一系列操作都有代理來實現,如果代理實現賦值取值的方式和直接操作obj一樣,那麼代理毫無意義,這就要求,代理需要使用底層實現去完成一些操作,所以需要反射

代理的原理

代理的出現,讓開發者可以參與js的底層實現
舉個栗子

let obj = {
    a: 1
}
let objProxy = new Proxy(obj, {
    set(target, propertyKey, value) {
        console.log('通過代理修改')
        // 可以使用普通的賦值來修改
        // target[propertyKey] = value
        // 但是由於是修改底層實現,最好還是使用底層方法
        Reflect.set(target, propertyKey, value)
    }
})

在這個栗子中,我們使用obj.a = 3的時候,實際上就是調用了底層函數Reflect.set(target, propertyKey, value),而使用代理就是可以修改這個底層Reflect.set方法的內容

代理修改了js的底層實現

objProxy是什麼呢?

這個代理是一個對象,但是這個對象沒有原型

代理相比defineProperty強大在什麼地方?

例: 觀察者模式
defineProperty實現

<body>
    <div id="container">

    </div>

    <script>
        //創建一個觀察者
        function observer(target) {
            const div = document.getElementById("container");
            const ob = {};
            const props = Object.keys(target);
            for (const prop of props) {
                Object.defineProperty(ob, prop, {
                    get() {
                        return target[prop];
                    },
                    set(val) {
                        target[prop] = val;
                        render();
                    },
                    enumerable: true
                })
            }
            render();

            function render() {
                let html = "";
                for (const prop of Object.keys(ob)) {
                    html += `
                        <p><span>${prop}：</span><span>${ob[prop]}</span></p>
                    `;
                }
                div.innerHTML = html;
            }

            return ob;
        }
        const target = {
            a: 1,
            b: 2
        }
        const obj = observer(target)
    </script>
</body>

Proxy實現

<body>
    <div id="container">

    </div>

    <script>
        //創建一個觀察者
        function observer(target) {
            const div = document.getElementById("container");
            const proxy = new Proxy(target, {
                set(target, prop, value) {
                    Reflect.set(target, prop, value);
                    render();
                },
                get(target, prop){
                    return Reflect.get(target, prop);
                }
            })
            render();

            function render() {
                let html = "";
                for (const prop of Object.keys(target)) {
                    html += `
                        <p><span>${prop}：</span><span>${target[prop]}</span></p>
                    `;
                }
                div.innerHTML = html;
            }

            return proxy;
        }
        const target = {
            a: 1,
            b: 2
        }
        const obj = observer(target)
    </script>
</body>

佔用內存更小

在我們使用defineProperty創建觀察者的時候,返回的觀察值對象和原對象是兩個不同的對象,這就導致defineProperty使用了雙倍內存

而代理是改寫了底層實現,使用的是同一個值,不存在這個問題

defineProperty不可以代理後加的屬性

如果我在控制檯添加一個target.c = 3的時候,修改target.c是不會觸發render方法的,因爲只代理了最初的target屬性a和b

而Proxy就可以

defineProperty只能修改賦值取值,而Proxy可以修改所有底層實現

defineProperty只能通過存取器實現修改取值賦值邏輯
不能星期其他實現

而Proxy可修改所有底層實現

總結

Proxy對比Object.defineProperty:

優點：

Proxy可以劫持整個對象，這樣以來操作便利程度遠遠優於Object.defineProperty
Proxy可以直接監聽數組的變化，無需進行數組方法重寫
Proxy支持多種攔截操作，是Object.defineProperty不具備的。
Proxy佔用更少的內存空間

缺點：Proxy的兼容性不是太好，不兼容IE

現在明白爲什麼Vue3.0放棄defineProperty使用Proxy了嗎?

屬性描述符與Proxy的區別&Vue3.0爲何改用Proxy