Proxy #19

wl05 · 2019-05-10T08:08:31Z

基本语法

let newTarget = new Proxy(target, handler);

其中:

target是你要代理的对象.它可以是JavaScript中的任何合法对象.如: (数组, 对象, 函数等等)
handler是你要自定义操作方法的一个集合.
newTarget是一个被代理后的新对象,它拥有target的一切属性和方法.只不过其行为和结果是在handler中自定义的.

handler可以被代理的范围

handler可以代理13种操作：

   handler.getPrototypeOf()

   // 在读取代理对象的原型时触发该操作，比如在执行 Object.getPrototypeOf(proxy) 时。
   
   handler.setPrototypeOf()
   
   // 在设置代理对象的原型时触发该操作，比如在执行 Object.setPrototypeOf(proxy, null) 时。
   
   handler.isExtensible()
   
   // 在判断一个代理对象是否是可扩展时触发该操作，比如在执行 Object.isExtensible(proxy) 时。
   
   handler.preventExtensions()
   
   // 在让一个代理对象不可扩展时触发该操作，比如在执行 Object.preventExtensions(proxy) 时。
   
   handler.getOwnPropertyDescriptor()
   
   // 在获取代理对象某个属性的属性描述时触发该操作，比如在执行 Object.getOwnPropertyDescriptor(proxy, "foo") 时。
   
   handler.defineProperty()
   
   // 在定义代理对象某个属性时的属性描述时触发该操作，比如在执行 Object.defineProperty(proxy, "foo", {}) 时。
   
   handler.has()
   
   // 在判断代理对象是否拥有某个属性时触发该操作，比如在执行 "foo" in proxy 时。
   
   handler.get()
   
   // 在读取代理对象的某个属性时触发该操作，比如在执行 proxy.foo 时。
   
   handler.set()
   
   // 在给代理对象的某个属性赋值时触发该操作，比如在执行 proxy.foo = 1 时。
   
   handler.deleteProperty()
   
   // 在删除代理对象的某个属性时触发该操作，比如在执行 delete proxy.foo 时。
   
   handler.ownKeys()
   
   // 在获取代理对象的所有属性键时触发该操作，比如在执行 Object.getOwnPropertyNames(proxy) 时。
   
   handler.apply()
   
   // 在调用一个目标对象为函数的代理对象时触发该操作，比如在执行 proxy() 时。
   
   handler.construct()
   
   // 在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行new proxy() 时。

使用Proxy实现的简单的双向数据绑定

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
  <main>
    <p>请输入:</p>
    <input type="text" id="input">
    <p id="p"></p>
  </main>
  <script type="text/javascript">
  	const input = document.getElementById('input');
	const p = document.getElementById('p');
	const obj = {};

	const newObj = new Proxy(obj, {
	  get: function(target, key, receiver) {
	    console.log(`getting ${key}!`);
	    return Reflect.get(target, key, receiver);
	  },
	  set: function(target, key, value, receiver) {
	    console.log(target, key, value, receiver);
	    if (key === 'text') {
	      input.value = value;
	      p.innerHTML = value;
	    }
	    return Reflect.set(target, key, value, receiver);
	  },
	});

	input.addEventListener('keyup', function(e) {
	  newObj.text = e.target.value;
	});

  </script>
</body>
</html>

参考文章

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Proxy #19

Proxy #19

wl05 commented May 10, 2019

Proxy #19

Proxy #19

Comments

wl05 commented May 10, 2019

基本语法

handler可以被代理的范围

使用Proxy实现的简单的双向数据绑定

参考文章