代理拦截Proxy

代理拦截Proxy

代理（拦截器）是对象的访问控制，setter/getter 是对单个对象属性的控制，而代理是对整个对象的控制。

• 读写属性时代码更简洁
• 对象的多个属性控制统一交给代理完成
• 严格模式下 set 必须返回布尔值

对对象进行拦截

        let hd = { name: 'why', age: 11 };
        let proxy = new Proxy(hd, {
            get(obj, property) {
                return obj[property];
            },
            set(obj, property, value) {
                obj[property] = value;
                return true;
            }
        })
        proxy.age = 19;
        console.log(JSON.stringify(hd))

对函数进行拦截

        function factorical(value) {
            return value === 1 ? 1 : factorical(value - 1) * value;
        }
        let proxy = new Proxy(factorical, {
            apply(func, obj, args) {
                console.log(func);//factorical函数体
                console.log(obj);//执行方法的的this
                console.log(args);//传入的参数 注意：apply是以数组形式将参数传入。
                console.time('run');
                console.log(`${args}的阶乘是`, func.apply(obj, args))
                console.timeEnd('run')
            }
        })
        console.log(proxy.apply({}, [10]))

对数组进行拦截

 const lessons = [
            {
                title: "媒体查询响应式布局",
                category: "css"
            },
            {
                title: "FLEX 弹性盒模型",
                category: "css"
            },
            {
                title: "MYSQL多表查询随意操作",
                category: "mysql"
            }
        ];
        //数组的title长度超过了5进行省略
        let proxy = new Proxy(lessons, {
            get(array, key) {
                console.log(array)//lessons数组
                console.log(key)//传入的值
                const title = array[key].title;
                const len = 5;
                array[key].title = title.length > len ?
                    title.substr(0, len) + '.'.repeat(3) : title;
                return array[key];
            }
        })
        console.log(proxy[2])

\