小小实习生,大佬请赐教
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text" id="input"> <p id="text">hello world</p> <script> let input = document.getElementById(‘input‘); let text = document.getElementById(‘text‘); let obj = {}; // Proxy 第一个参数 要拦截的目标对象,这里指 obj, 第二个参数 处理程序对象 这里直接 {} 并定义 get、set 捕获器 let proxy = new Proxy(obj, { // get 第一个参数 目标对象,这里指 obj,第二个参数 属性,这里指 val get(target, property){ return target[property]; // 红宝书上说 返回值无限制 }, // set 前两个参数 同 get, 第三个参数是 要设置的值 set(target, property, value){ target[property] = value; // 相当于 obj[val] = 5; text.innerText = target[property]; // 把值 赋值给 text return; // set 的返回值 true 表示成功 false 表示失败 } }) /* 默认先把 text 值 赋值给 input */ proxy.val = text.innerText; input.value = proxy.val; // input 输入时触发 input.addEventListener(‘input‘, function(){ proxy.val = this.value; // 给 proxy.val 赋值 会调用 set 捕获器 }) </script> </body> </html>
原文:https://www.cnblogs.com/brotheryang/p/14125073.html