如何用Object.defineProperty()做数据劫持

最新推荐文章于 2025-02-14 16:51:55 发布

你可以猜猜

最新推荐文章于 2025-02-14 16:51:55 发布

阅读量564

点赞数

本文链接：https://blog.youkuaiyun.com/tylls/article/details/107675361

版权

<!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>
    <script>
        var obj = {
            num:9
        }
        // _num 作为 num 中间存储值。避免 get set 死循环
        let _num = obj.num;
        //  Object.defineProperty() 监听对象下某一个属性，做数据劫持处理
        //  参一 对象
        //  参二：被监听的属性
        //  参三：options{ getter setter}
        Object.defineProperty(obj,'num',{
        // 数据劫持：获取数据；还没有有取到 做拦截处理；
            get(){
                // 拦截 
                console.log('触发get'); 
                return _num  // 释放，最终获取数据；
                // 没有return 拦截数据；但是不释放 获取不到值
            },
           // 数据劫持：修改数据  在修改之前拦截  
            set(val){
                // 拦截
                console.log('触发set')
                console.log(val)
                // 修改
                _num = val;
                // 没有修改：拦截 num 属性没有重新赋值
            }
        })
       
      
        var res = obj.num; 
        console.log(res,'-----------');
        obj.num = 123
        //  Object.defineProperty 与 es6 的get set区别是什么？
        // 写法不同
    </script>
</body>
</html>