第一次接触proxy这个单词的时候，还是在设置浏览器代理的时候 ，明天留神到在es6新语法中，也呈现了这个词，才筹备钻研钻研这个神奇的货色是怎么用的。学习之后，在小编的简略了解，就和小区门口站岗的保安相似，满足条件才容许放行。在数据中，就是在获取值或者设置值的时候有个规定。大家还能够关注我的微信公众号，蜗牛全栈。
一、es5解决代理语法

let obj = {}Object.defineProperty(obj,'name',{ // 参数别离为：对象自身、对象值、get和set办法    get(){        console.log("666")        return "GET IT"    },    set(){        console.log("SET")    }})console.log(obj.name)// 666 GET IT

二、es6根本语法

let obj = {}let p = new Proxy(obj,{}) // 参数别离是要代理的对象、代理规定p.name= 'lilei'console.log(obj.name) // lileifor(let key in obj){    console.log(key) // name}

1、代理get

let arr = [7,8,9]arr = new Proxy(arr,{    get(target,prop){ // target对应以后数组  prop为以后index        return prop in target ? target[prop] : 'error'    }})console.log(arr[1]) // 8console.log(arr[10]) // errorlet dict = {    "hello":"你好",    "world":"世界"}dict = new Proxy(dict,{    get(target,prop){        return prop in target ? target[prop]:prop    }})console.log(dict["hello"]) // 你好console.log(dict["school"]) // school

2、代理set：必须有返回值，返回值为布尔类型

let arr = []arr = new Proxy(arr,{    set(target,prop,val){        if(typeof val === 'number'){            target[prop] = val            return true        }else{            return false        }    }})arr.push(5)arr.push(6)console.log(arr[0],arr[1],arr.length) // 5 6 2   不会毁坏原来的办法

3、代理has

 let range = {    start:1,    end:5}range = new Proxy(range,{    has(target,prop){       return  prop >= target.start && prop <= target.end    }})console.log(2 in range) // trueconsole.log(9 in range) // false

4、代理ownKeys

// 将对象内以下划线结尾的属性暗藏起来let userinfo = {    username:"lilei",    age:34,    _password:"***" // 模仿这个公有属性}userinfo = new Proxy(userinfo,{    ownKeys(target){        return Object.keys(target).filter(key => !key.startsWith("_"))    }})for(let key in userinfo){    console.log(key) // name age}Object.keys(userinfo) // name age

5、代理deleteProperty：对删除起作用

let user = {    name:"lilei",    age:34,    _password:"***"}user = new Proxy(user,{    deleteProperty(target,prop){ // 拦挡删除操作,须要返回布尔值        if(prop.startsWith("_")){            throw new Error("不可删除")        }else{            delete target[prop]            return true        }    }})try{    delete user._password}catch(e){    console.log(e.message) // 不可删除}

6、综合实例

let user = {    name:"lilei",    age:34,    _password:"***"}user = new Proxy(user,{    get(target,prop){        if(prop.startsWith("_")){            throw new Error("不可拜访")        }else{            return target[prop]        }    },    set(target,prop,val){ // set肯定须要个返回值        if(prop.startsWith("_")){            throw new Error("不可拜访")        }else{            target[prop] = val            return true        }    },    deleteProperty(target,prop){ // 拦挡删除操作,须要返回布尔值        if(prop.startsWith("_")){            throw new Error("删除")        }else{            delete target[prop]            return true        }    },    ownKeys(target){        return Object.keys(target).filter(key => !key.startsWith("_"))    }})console.log(user.name) // lileiconsole.log(user._password) // 报错:不可拜访user.age = 18console.log(user.age) // 18// user._password = "&&&" // 报错try{    user._password = "&&&"}catch(e){      console.log(e.message) // 不可拜访}try{    delete user._password}catch(e){    console.log(e.message) // 不可删除        }for(let key in user){    console.log(key) // ["name","age"]}

7、代理apply

let sum = (...args) => {    let num = 0    args.forEach(item => {        num += item    })    return num}sum = new Proxy(sum,{    apply(target,ctx,args){ // 代理的指标,上下文,参数        return target(...args) * 2    }})console.log(sum(1,2)) // 6console.log(sum.call(null,1,2,3)) // 12 调用函数参数console.log(sum.apply(null,[1,2,3])) // 12 调用以后函数参数的数组

8、代理construct：对new起作用

let User = class{    constructor(name){        this.name = name    }}User = new Proxy(User,{    construct(target,args,newTarget){ // 必须返回对象        console.log("starting...")        return new target(...args)    }})console.log(new User("lilei")) // starting... User{name:"lilei"}