javascript - 用Object.definePrototype 的 set 监听属性的变化，最后输出变化了的属性为什么是 undefine-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

javascript - 用Object.definePrototype 的 set 监听属性的变化，最后输出变化了的属性为什么是 undefine

巴扎黑 2017-04-11 12:32:16

[JavaScript讨论组]

470

我怎么感觉是触发了 get 事件，并且打出的是 get 调用后的返回值 undefined；
我该如何打出变化后的值？

巴扎黑

全部回复(2)

巴扎黑2017-04-11 12:34:16 2楼

https://developer.mozilla.org...

一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined。

<!DOCTYEP html>
<html>
<head></head>
<body>
<script>

    var data = {
        user: {
            a: {
                "name": "a",
            },
            b: {
                "name": "b"
            }
        },
        city: "xxxx",
        time: 2016
    }

    function observe(obj) {

        for (var i in obj) {

            if (Object.prototype.toString.call(obj[i]) == "[object Object]") {
                observe(obj[i]);
            }
            var val = obj[i];

            Object.defineProperty(obj, i, {
                get: function () {
                    return val
                },
                set: function (newVal) {
                    console.log(obj, "的", i, "属性已经改变 :", obj[i], "--->", newVal);
                }
            });
        }
    }

    observe(data);

    data.time = 2017;
    console.log(data.time);
</script>
</body>
</html>

赞 +0

添加回复

阿神2017-04-11 12:34:16 1楼

defineProperty设置set的时候不是extend，而是覆盖的。
你的这个写法没有get方法，也没有在set中设置值，虽然会显示属性改变，但是实际上却没有这个值。
此外，i的值会被绑定到循环的最后，需要吧var改成let, 否则无论你改什么，都会变成改最后一个属性。
大约是改成这样：

function observe(obj) {
    var tmp = {}
    for (let i in obj) {
        if (Object.prototype.toString.call(obj[i]) == "[object Object]") {
            observe(obj[i]);
        }
        
        tmp[i] = obj[i];
        Object.defineProperty(obj, i, {
            get: function () {
                return tmp[i];
            },
            set: function (val) {
                console.log(i, "属性已经改变 :", tmp[i], "--->", val);
                tmp[i] = val;
            },
        });
    }
}

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>