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

最新推荐文章于 2025-03-18 15:59:31 发布

H_x

最新推荐文章于 2025-03-18 15:59:31 发布

阅读量387

点赞数

分类专栏： ES6 JavaScript 文章标签： proxy js javascript

本文链接：https://blog.youkuaiyun.com/qq_43650979/article/details/106738397

版权

JavaScript 同时被 2 个专栏收录

12 篇文章

订阅专栏

ES6

3 篇文章

订阅专栏

本文介绍了如何利用JavaScript中的Proxy和Reflect API来实现简单的双向数据绑定。讲解了Proxy的基本语法，列举了在双向绑定中用到的Proxy方法和Reflect方法，并给出了具体实现双向绑定的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Proxy基本语法

const obj = new Proxy(target, handler);
其中target为被代理的对象，handler为对象，声明了代理target的一些操作。

用到的Proxy方法

get(target, propKey, receiver)
target: 目标对象。
propKey: 目标对象的属性。
receiver: (可选)，该参数为上下文this对象
set(target, propKey, value, receiver)
target: 目标对象。
propKey: 目标对象的属性名
value: 属性值
receiver(可选): 一般情况下是Proxy实列

用到的Reflect方法

Reflect.get(target, name, receiver)查找并返回target对象的name属性，如果没有该属性，则返回undefined。
Reflect.set(target, name, value, receiver)设置target对象的name属性等于value。

简单实现数据双向绑定

<!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="inputs" value="hello"/>
    <p id="show">hello</p>
    <script>
        let oInput = document.querySelector('#inputs')
        let oShow = document.querySelector('#show')

        let obj = {}
        let handler = {
            get: (obj, key, val) =>{
                console.log(`get ${key}`)
               return Reflect.get(obj, key)
            },
            set: (obj, key, val) => {
                console.log(`set ${key}`)
                if(key === 'text') {
                    oShow.innerHTML = val
                }
               return Reflect.set(obj, key, val)
            }
        }
        let proxy = new Proxy(obj, handler)
        oInput.onkeyup = (e) => {
            proxy.text = e.target.value
            console.log(proxy.text)
        }
    </script>
  </body>
</html>