ES6 反射和代理

反射和代理

一、反射

1、反射是什么

Reflect是一个内置的JS对象，它提供了一系列方法，可以让开发者通过调用这些方法，访问一些JS底层功能
由于它类似于其他语言的反射，因此取名为Reflect

2、可以做什么

使用Reflect可以实现诸如 属性的赋值与取值、调用普通函数、调用构造函数、判断属性是否存在与对象中等等功能

3、API

// 1.Reflect.set(target,protertyKey,value);设置对象target的属性propertyKey的值为value，等同于给对象的属性赋值
const obj1 = {
     a: 1,
     b: 2
}
//以前的赋值，但是有了=号
obj.c = 3;
//反射中的赋值
Reflect.set(obj, "c", 10)
console.log(obj)

// 2.Reflect.get(target,protertyKey);读取对象target的属性propertyKey，等同于读取对象的属性值 
console.log(Reflect.get(obj, "a"));

// 3.Reflect.apply(target,this,arguments)调用一个指定的函数，并绑定this和参数列表。等同于函数调用
function fun(a, b) {
    return a + b;
}
// fun(3,4)
Reflect.apply(fun, null, [3, 4])

// 4.Reflect.defineProperty(target,protertyKey)定义属性类似于Object.defineProperty，不同的是如果配置出现问题，返回false而不是报错
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)  //使用构造函数的方式创建对象
// new 不让用创建
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)   判断一个对象是否拥有某个属性
console.log('a' in obj)
console.log(Reflect.has(obj, "a"));

二、代理

1、概念

代理就是一个对象的所有方法和属性的调用都需要借助另一个对象

2、作用

提供了修改底层实现的方式

3、创建

const p = new Proxy(target,handler)
//target 目标对象
//handler 是一个普通对象，可以重写底层方法
//返回一个代理对象
//p为代理对象

const obj = {
    a: 1,
    b: 2 
}
const proxy = new Proxy(obj, { //这个就是代理对象
}
console.log(proxy);
proxy.abc = 10;
console.log(proxy);
console.log(obj);//obj中也有了abc这个属性

const proxy = new Proxy(obj, { //这个就是代理对象
    set(target, protertyKey, value) {
        console.log(`设置了${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) { //不管这的名字是什么，都会走进函数中
    //     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>

    // 观察者模式
    // 有一个对象，是一个观察者，观察属性值的变化，当属性值发生变化的时候，去做一些事情
    function observer(target) {
        const div = document.getElementById("container");
        const ob = {}; //创建一个新的对象，这个新的对象就是代理对象，最后会在函数执行完以后被返回
        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 //通过存储器的属性全都会变成false
            })
        }
        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);
    target.a = 1000;  //目标函数不改变，让代理函数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;  //目标函数不改变，让代理函数obj干
    obj.a = 5000;
    obj.c = 8; //代理配置可以改变属性