参考书《ECMAScript 6入门》
http://es6.ruanyifeng.com/
Proxy
1.概述
Proxy可以用来修改对象的默认操作
let obj = {name : "test"};
obj.name = "test";
obj['name'] = "test";
这两种取值操作相当于调用了obj的内部默认get操作
let obj = {
name : "test",
get(){
return "123"
}
};
let obj = {
name : "test",
get : function(){
return "123"
}
};
obj.name = "test";
obj['name'] = "test";
obj.get();//"123"
//由此可见，通过在obj内部定义一个名字为get的方法并不能改变obj内部默认的get行为，而proxy可以做到这一点
//new Proxy(target,handler);
//target是目标处理对象，handler中定义要处理的操作
let obj = {
name : "test",
get(){
return "456"
}
};
let obj2 = new Proxy(obj,{
get(){
return "789";
}
});
obj2.name = "789";
obj2['name'] = "789";
//如果handle没有设置任何拦截行为，new Proxy(target)就通向原对象
let obj = {name : "test"};
let proxy = new Proxy(obj,{});
proxy.name = "proxy test";
obj.name // "proxy test" 相当于浅拷贝
obj.name = "obj test";
proxy.name //"obj test" 相当于浅拷贝
let handler = {
get : function(){
return "this called get";
},
apply : function(){
return "this called apply";
},
construct : function(){
return {construct : "this called construct"};
}
}
let obj = new Proxy(function(){
return "this is target";
},handler);
obj();// "this called apply" obj()的默认行为是调用apply操作
new obj();//{construct: "this called construct"} new obj()的默认行为是调用construct操作
obj.prototype //"this called get" 点运算符的默认行为是调用get操作
obj['name'] // "this called get" 方括号运算的默认行为是调用get操作
2. proxy支持的拦截操作
(1)get(target,propkey,receiver):拦截对象属性的读取。target是目标对象，propkey是属性名，receiver指当前的proxy实例
数组reduce的用法
array.reduce(function(previousValue,currentValue,currentIndex,array){});
如果一个属性是不可配置的(configurable)和不可写的(written),则不能使用proxy获取该属性的值
let obj = Object.defineProperty({},'color',{value:123,writable:false,configurable:false});
obj.color // 123
let proxy = new Proxy(obj,{
get : function(target,propkey){
return "color";
}
});
proxy.color //Uncaught TypeError: 'get' on proxy: property 'color' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '123' but got 'color')
(2)set(target,propkey,propValue,receiver)：拦截对象属性的设置。
target是目标对象，propkey是属性名，propValue是属性值，receiver是当前操作行为所指的对象，一般是Proxy实例本身
利用set拦截方式达到双向数据绑定的效果
HTML代码举例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.11.3.min.js"></script>
</head>
<body>
<input type="text"/>
<div >5.实现web服务的客户端
function createWebService(baseUrl) {
return new Proxy({}, {
get(target, propKey, receiver) {
return () => httpGet(baseUrl+'/' + propKey);
}
});
}
相关文章：