反射和代理

一瓦哎、反射

1唉韭、反射是什么

Reflect是一個(gè)內(nèi)置的JS對(duì)象茸习，它提供了一系列方法畜隶，可以讓開發(fā)者通過調(diào)用這些方法，訪問一些JS底層功能
由于它類似于其他語言的反射号胚，因此取名為Reflect

2籽慢、可以做什么

使用Reflect可以實(shí)現(xiàn)諸如 屬性的賦值與取值、調(diào)用普通函數(shù)猫胁、調(diào)用構(gòu)造函數(shù)箱亿、判斷屬性是否存在與對(duì)象中等等功能

3、API

// 1.Reflect.set(target,protertyKey,value);設(shè)置對(duì)象target的屬性propertyKey的值為value弃秆，等同于給對(duì)象的屬性賦值
const obj1 = {
     a: 1,
     b: 2
}
//以前的賦值届惋，但是有了=號(hào)
obj.c = 3;
//反射中的賦值
Reflect.set(obj, "c", 10)
console.log(obj)

// 2.Reflect.get(target,protertyKey);讀取對(duì)象target的屬性propertyKey髓帽，等同于讀取對(duì)象的屬性值 
console.log(Reflect.get(obj, "a"));

// 3.Reflect.apply(target,this,arguments)調(diào)用一個(gè)指定的函數(shù)，并綁定this和參數(shù)列表脑豹。等同于函數(shù)調(diào)用
function fun(a, b) {
    return a + b;
}
// fun(3,4)
Reflect.apply(fun, null, [3, 4])

// 4.Reflect.defineProperty(target,protertyKey)定義屬性類似于Object.defineProperty郑藏，不同的是如果配置出現(xiàn)問題，返回false而不是報(bào)錯(cuò)
Reflect.defineProperty(obj, 'a', {
    value: 10,
    configurable: false,
    enumerable: false,
    writable: false
})

// 5.Reflect.deleteProperty(target,protertyKey)刪除屬性
//delete obj.a;
Reflect.deleteProperty(obj, "a")
console.log(obj)

// 6.Reflect.construct(target,arguments)  //使用構(gòu)造函數(shù)的方式創(chuàng)建對(duì)象
// new 不讓用創(chuàng)建
function Test(a, b) {
     this.a = a;
     this.b = b;

// const t = new Test(5,6)
const t = Reflect.construct(Test, [5, 6])
console.log(t)

// 7.Reflect.has(target,protertyKey)   判斷一個(gè)對(duì)象是否擁有某個(gè)屬性
console.log('a' in obj)
console.log(Reflect.has(obj, "a"));

二瘩欺、代理

1必盖、概念

代理就是一個(gè)對(duì)象的所有方法和屬性的調(diào)用都需要借助另一個(gè)對(duì)象

2、作用

提供了修改底層實(shí)現(xiàn)的方式

3俱饿、創(chuàng)建

const p = new Proxy(target,handler)
//target 目標(biāo)對(duì)象
//handler 是一個(gè)普通對(duì)象歌粥，可以重寫底層方法
//返回一個(gè)代理對(duì)象
//p為代理對(duì)象

const obj = {
    a: 1,
    b: 2 
}
const proxy = new Proxy(obj, { //這個(gè)就是代理對(duì)象
}
console.log(proxy);
proxy.abc = 10;
console.log(proxy);
console.log(obj);//obj中也有了abc這個(gè)屬性

const proxy = new Proxy(obj, { //這個(gè)就是代理對(duì)象
    set(target, protertyKey, value) {
        console.log(`設(shè)置了${protertyKey}屬性，值為${value}`);
        Reflect.set(target, protertyKey, value);
    },
    get(target, protertyKey) {
        console.log(`訪問了${protertyKey}屬性`);
        return Reflect.get(target, protertyKey)
    },
    has(target, protertyKey) {
        return Reflect.has(target,protertyKey)
        return false;
    },
    // nan(target, protertyKey) { //不管這的名字是什么拍埠，都會(huì)走進(jìn)函數(shù)中
    //     Reflect.deleteProperty(target, protertyKey)
    // },
    delete(target, protertyKey) {
         Reflect.deleteProperty(target, protertyKey)
    }
})
console.log(proxy);
proxy.a = 10;
console.log('a' in proxy);

觀察者模式

• ES5寫觀察者模式：

<div id="container">
</div>

    // 觀察者模式
    // 有一個(gè)對(duì)象失驶，是一個(gè)觀察者，觀察屬性值的變化械拍，當(dāng)屬性值發(fā)生變化的時(shí)候突勇，去做一些事情
    function observer(target) {
        const div = document.getElementById("container");
        const ob = {}; //創(chuàng)建一個(gè)新的對(duì)象，這個(gè)新的對(duì)象就是代理對(duì)象坷虑，最后會(huì)在函數(shù)執(zhí)行完以后被返回
        const props = Object.keys(target);
        for (const prop of props) {
            // ob[prop] = target[prop];
            Object.defineProperty(ob, prop, {
                get() {
                    return target[prop];
                },
                set(val) {
                    target[prop] = val;
                    render()
                },
                enumerable: true //通過存儲(chǔ)器的屬性全都會(huì)變成false
            })
        }
        render()
        function render() { //渲染函數(shù)
            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);
    target.a = 1000;  //目標(biāo)函數(shù)不改變甲馋，讓代理函數(shù)obj干
    obj.a = 5000;
    obj.c = 8; //沒有配置obj.c

• ES6寫觀察者模式：

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);
    target.a = 1000;  //目標(biāo)函數(shù)不改變，讓代理函數(shù)obj干
    obj.a = 5000;
    obj.c = 8; //代理配置可以改變屬性