ES6中的Proxy javascriptes6前端

第一次接触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) // lilei for(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]) // 8 console.log(arr[10]) // error let 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不会破坏原来的方法

【ES6中的Proxy】3、代理has

let range = { start:1, end:5 }range = new Proxy(range,{ has(target,prop){ returnprop >= target.start && prop <= target.end } })console.log(2 in range) // true console.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) // lilei console.log(user._password) // 报错:不可访问 user.age = 18 console.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)) // 6 console.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"}