<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>proxy</title>
</head>
<body><h1>使用Proxy 和 Reflect 实现双向数据绑定</h1><input type="text" id="input"><h2>您输入的内容是： <i id="txt"></i></h2><script>//获取dom元素let oInput = document.getElementById("input");let oTxt = document.getElementById("txt");//初始化代理对象let obj = {};//给obj增加代理对象let newProxy = new Proxy(obj, {get: (target, key, recevier) => {return Reflect.get(target, key, recevier);},set: (target, key, value, recevier) => {//监听newProxy是否有新的变化if (key == "text") {oTxt.innerHTML = value;}//将变化反射回原有对象return Reflect.set(target, key, value, recevier);}})//监听input输入事件oInput.addEventListener("keyup", (e) => {//修改代理对象的值newProxy.text = e.target.value;})</script>
</body>
</html>