ECMAScript 6 Proxy


用过vue-cli的都配置过跨域处理,对Proxy应该也不陌生,准确的来说,Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。

文章主要参考阮一峰老师的 ECMAScript 6入门,站在巨人的肩膀上看世界…

用new的方法对Proxy进行声明new Proxy({},{})

var proxy = new Proxy(target, handler);

Proxy 对象的所有用法,都是上面这种形式,不同的只是handler参数的写法。其中,new Proxy()表示生成一个Proxy实例,target参数表示所要拦截的目标对象,handler参数也是一个对象,用来定制拦截行为。

需要注意的是这里是两个花括号,第一个花括号就相当于我们方法的主体,后边的花括号就是Proxy代理处理区域,相当于我们写钩子函数的地方。

现在写两个例子作为比较

首先是我们最基础的创建对象

1
2
3
4
5
6
7
8
var obj={
add: function(val){
return val + 5;
},
name: 'I am csing'
};
console.log(obj.add(5));
console.log(obj.name);

把上边的obj对象改成Proxy形式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var pro = new Proxy({
add: function (val) {
return val + 5;
},
name: 'I am csing'
}, {
get:function(target,key,property){
// target:得到的目标值
// key:目标的key值,相当于对象的属性
// property:这个不太常用,用法还在研究中,还请大神指教。

console.log('come in Get');
return target[key];
},
set:function(target,key,value,receiver){

// target:目标值。
// key:目标的Key值。
// value:要改变的值。
// receiver:改变前的原始值。

console.log(`setting ${key} = ${value}`);
return target[key] = value;
}
});
console.log(pro.name);
// 可以在控制台看到结果,先输出了come in Get。相当于在方法调用前的钩子函数。

刚刚已经说过了,前面的一个花括号是方法的主题,后面一个是处理区域,区域中有13中属性,有两个属性是最常用的,get属性和set属性,理解起来也很容易

  • get属性是在你得到某对象属性值时预处理的方法,他接受三个参数

  • target:得到的目标值

  • key:目标的key值,相当于对象的属性

  • property:这个不太常用,用法还在研究中,还请大神指教。

  • set属性是值你要改变Proxy属性值时,进行的预先处理。它接收四个参数。

  • target:目标值。

  • key:目标的Key值。

  • value:要改变的值。

  • receiver:改变前的原始值。

这里先介绍两种最经常用的,多了我也记不住

这因为Proxy的特性,所以它很合适用来写 Web 服务的客户端。

1
2
3
4
5
6
const service = createWebService('http://example.com/data');

service.employees().then(json => {
const employees = JSON.parse(json);
// ···
});

上面代码新建了一个 Web 服务的接口,这个接口返回各种数据。Proxy 可以拦截这个对象的任意属性,所以不用为每一种数据写一个适配方法,只要写一个 Proxy 拦截就可以了。

1
2
3
4
5
6
7
function createWebService(baseUrl) {
return new Proxy({}, {
get(target, propKey, receiver) {
return () => httpGet(baseUrl+'/' + propKey);
}
});
}

以上就是我对ECMAScript 6 Proxy的一些理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的博文,以避免误人子弟。

-------------本文结束感谢您的阅读-------------