js proxy数据绑定与可观察对象

最新推荐文章于 2022-12-22 11:35:08 发布

七夜的许愿星yj

最新推荐文章于 2022-12-22 11:35:08 发布

阅读量140

点赞数

文章标签： js

本文链接：https://blog.csdn.net/nishiweiyj/article/details/119646911

版权

这篇博客探讨了JavaScript中数据绑定和可观察对象的概念，通过使用Proxy实现了一个简单的用户列表管理，每当有新用户添加时，列表会自动更新。示例展示了如何在构造函数中拦截操作并自动将新实例添加到userList，以及如何在push操作时监听并触发相应事件。

摘要由CSDN通过智能技术生成

// //数据绑定与可观察对象
// const userList = []

// class User {
//     constructor(name) {
//         this._name = name
//     }
// }

// const proxy = new Proxy(User, {
//     construct() {
//         const newUser = Reflect.construct(...arguments)
//         userList.push(newUser)
//         return newUser
//     }
// })

// new proxy('1')
// new proxy('2')
// new proxy('3')

// console.log(userList);

const userList = []
function emit(newValue) {
    // console.log(newValue);
}

const proxy = new Proxy(userList, {
    set(target, property, value, receiver) {
        const result = Reflect.set(...arguments)
        console.log('result', result);
        if (result) {
            emit(Reflect.get(target, property, receiver))
        }
        return result
    }
})

proxy.push('xxx')
proxy.push('yyy')

打印四次

result true
result true
result true
result true

？