在es6中新添加了Proxy,那么它有什么作用啊?Proxy本意为代理,而es6中的Proxy也就是代理对象,那么代理对象感觉听起来很模糊,在这里就解释一下Proxy代理对象的作用。
Proxy的主要作用就是可以对 对象进行拦截,以及对数据读取、修改的过滤保护。
我们先利用es3的方式来实现一个需求,现有一数据,内部有name、age、sex三个属性,name、age属性可读可写,但是sex属性只可读,不可写
分析步骤:
-
我们可以定义一个构造函数,内部定义一个data数据,包含这三个属性
-
我们还要暴露两个方法,一个get,一个set
-
get用来读数据,set用来写数据,在写数据的时候判断,如果想设置sex这个属性,我们就给错误提示
var Person = function(){
var data = {
name:'monkey',
age:18,
sex:'男'
}
this.get = function(key){
console.log(key)
return data[key]
}
this.set = function(key,value){
if(key!=='sex'){
return data[key] = value
}else{
throw '该属性为只读属性'
}
}
}
var person = new Person;
var name = person.get('name')
person.set('sex','女')
console.log(person.get('sex'))
最终输出结果:
我们就实现了,name可读可写,sex却不能修改
然后我们再利用es5的方式来实现,es5知道defineProperty这个方法的实现就简单很多了
var person = {
name:'monkey',
age:30
}
Object.defineProperty(person,'sex',{
writable:false,
value:'男'
})
person.sex = '女'
console.log(person.sex)
我们通过defineProperty设置sex属性为不可写属性
我们会发现最终结果还是男并没有修改成功
接下来我们就再利用es6的Proxy来实现
var person = {
name:'monkey',
age:19,
sex:'男'
}
var p1 = new Proxy(person,{
get(target,key){
console.log(target)
console.log(key)
return target[key]
},
set(target,key,value){
if(key=='sex'){
throw '不允许修改sex'
}else{
target[key] = value
}
}
})
p1.name
p1.sex = '女'
我们来分析下上面的代码,
-
定义了一个person数据
-
通过new Proxy得到代理对象p1
-
Proxy第一个参数为要拦截的对象,第二个参数为对象,对象内部有get和set方法
-
get方法是通过p1读数据的时候会调用,get方法有两个参数,target为目标数据也就是person,key就是通过p1读数据时候的key
例如上面代码20行读取数据了,就会触发get方法结果如下
-
set方法就是当通过p1设置数据的时候会触发,内部有三个形参,第一个还是target,第二个还是key,第三个为value也就是设置的值
-
那么我们就可以通过key来判断,如果key为sex就代表你要设置sex就给错误提示
-
否则就通过target[key] = value给设置数据
以上就是Proxy的使用方法了,相对es3和es5而言Proxy感觉还是很好的,因为可以在set里面做更多逻辑的处理等等
如果学会了,点下赞吧!!!谢谢