1. Proxy的基本理解：
var person={
age: 13,
job: "engineer"
}
var proxy=new Proxy(person, {
get (target, key, receiver) {
//do sth
},
set (target, key, value, receiver) {
// do sth
}
});
在上述代码中，我们为person对象创建了一个代理对象proxy, 我认为proxy对象内部存在引用，指向了其内部的target，即person对象。Proxy构造函数大致可以理解成这个形式：
new Proxy(target, handler);
proxy.name (*)
proxy.age=23 (**)
(*)处的语句会调用get函数，(**)会调用set函数, 可以理解为代理对象对操作符进行了重载。
2.get函数的应用：
2.1 数组下标越界处理
function createArr(...elements){
var arr=[];
arr.push(...elements);
var handler={
get(target, index){
var index=Number(index);
if (index < 0 ) return target[target.length+index];
else return target[index];
}
}
return new Proxy(arr,handler);
}
2.2 实现链式调用
function callbackChain(value){
var funcArr=[];
var proxy=new Proxy({}, {
get(target, property) {
if (propery == 'get') {
return funcArr.reduce((val,fn=>fn(val)),value);
} else {
funcArr.push(window[property]);
return proxy;
}
});
return proxy;
}
2.3 一个通用的dom元素创建函数
var dom = new Proxy({},{
get (target, property) {
return function(attrs={},...children){
const el=document.createElement(property);
for(let attr of Object.keys(attrs){
el.setAttribute(attr,attrs[attr]);
}
for (let child of children){
if(typeof child == 'string') {
child=document.createTextNode(child);
}
el.appendChild(child);
}
return el;
}
}
});
//use it
dom.a({href: 'https://www.baidu.com'}, div.span({},'hello'));
