ECMAScript笔记——Proxy

代理器（Proxy）概述

• 代理器可以理解成在目标对象前架设一个“拦截”层，外界对该对象的访问都必须先通过这层拦截，因此提供了一种机制可以对外界的访问进行过滤和改写。
• 在Proxy代理的的情况下，目标对象内部的this关键字会指向Proxy代理。
• 有些原生对象的内部属性只有通过正确的this才能获取，所以Proxy也无法代理这些原生对象的属性。这种情况下可以通过使用bind()解决这个问题。

代理器（Proxy）使用

let p = new Proxy(target, handler);

• 其中，target 为被代理对象。handler 是一个对象，其声明了代理 target 的一些操作。p 是代理后的对象。
• 当外界每次对 p 进行操作时，就会执行 handler 对象上的一些方法。

handler 能代理的一些常用的方法如下：

• get：读取。
• set：修改。
• has：判断对象是否有该属性。
• construct：构造函数。

代理器（Proxy）实例

let Dom = new Proxy({},{
	get(target,attr) {
		let domObj = document.createElement(attr);
		return function(attrs,...children) {
			for(let key in attrs) {
				domObj.setAttribute(key,attrs[key]);
			}

			for(let value of children) {
				if (typeof value == 'string') {
					let textNode = document.createTextNode(value);
					domObj.appendChild(textNode);
				} else {
					domObj.appendChild(value);
				}
			}

			return domObj;
		}
	}
})

let div1 = Dom.div({id:'div1','class':'redBg'},'helloword','你好');
console.log(div1);
document.body.appendChild(div1);

运行结果：

• 通过代理器（Proxy）实现了一个创建元素的代理对象Dom。