proxy代理

proxy可以理解为拦截或者代理

语法为：new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象(可以是对象、数组、函数)，handler参数是一个对象，用来定制拦截行为

const proxy = new Proxy(target,handle)    

// proxy代理  数组
const arr = [
    {
        title:"js",
        category:"js描述"
    },
    {
        title:"css",
        category:"css描述"
    },
    {
        title:"html",
        category:"html描述"
    }
]
const proxy = new Proxy(arr,{
    get(array,key){
        // array为代理数组，key为下表索引
        console.log(key)
        // return '20'
    },
    set(array,key,value){
        array[key] = value
    }
})
arr[0].title = "vue"
console.log(arr)


// proxy代理  对象
   const hd = {name:'zs',age:18}
   const proxy = new Proxy(hd,{
       get(obj,property){
           return obj[property]
       },
       set(obj,property,value){
            obj[property] = value
            return true
       }
   })
   proxy.age = 20
   console.log(hd.age)

// proxy代理  函数
    function factotial(num) {
        return num == 1 ? 1 : num * factotial(num - 1)
    }
    // console.log(factotial(5))
    const proxya = new Proxy(factotial, {
        apply(func, obj, args) {
            // func  当前代理函数
            // obj   调用上下文
            // args  函数的参数
            console.log(args)  // [6]
            console.log(obj) // window对象...
        },
        construct: function (target, args) {
            return { value: args[0] };
        },
        get: function (target, name) {
            if (name === 'info') {
                return Object.prototype;
            }
            return 'Hello, ' + name;
        }
    })
    // console.log(proxya(6)) // [6]
    console.log(proxya.infoa) //  Hello, infoa

    //console.log(new proxya(5))  // {value:5}

 Proxy所能代理的范围--handler

// 在读取代理对象的原型时触发该操作，比如在执行 Object.getPrototypeOf(proxy) 时。
handler.getPrototypeOf()

// 在设置代理对象的原型时触发该操作，比如在执行 Object.setPrototypeOf(proxy, null) 时。
handler.setPrototypeOf()

 
// 在判断一个代理对象是否是可扩展时触发该操作，比如在执行 Object.isExtensible(proxy) 时。
handler.isExtensible()

 
// 在让一个代理对象不可扩展时触发该操作，比如在执行 Object.preventExtensions(proxy) 时。
handler.preventExtensions()

// 在获取代理对象某个属性的属性描述时触发该操作，比如在执行 Object.getOwnPropertyDescriptor(proxy, "foo") 时。
handler.getOwnPropertyDescriptor()

 
// 在定义代理对象某个属性时的属性描述时触发该操作，比如在执行 Object.defineProperty(proxy, "foo", {}) 时。
andler.defineProperty()

 
// 在判断代理对象是否拥有某个属性时触发该操作，比如在执行 "foo" in proxy 时。
handler.has()

// 在读取代理对象的某个属性时触发该操作，比如在执行 proxy.foo 时。
handler.get()

 
// 在给代理对象的某个属性赋值时触发该操作，比如在执行 proxy.foo = 1 时。
handler.set()

// 在删除代理对象的某个属性时触发该操作，比如在执行 delete proxy.foo 时。
handler.deleteProperty()

// 在获取代理对象的所有属性键时触发该操作，比如在执行 Object.getOwnPropertyNames(proxy) 时。
handler.ownKeys()

// 在调用一个目标对象为函数的代理对象时触发该操作，比如在执行 proxy() 时。
handler.apply()

 
// 在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行new proxy() 时。
handler.construct()

 详情参考：https://es6.ruanyifeng.com/#docs/proxy