JS 对象的访问器属性的使用

最新推荐文章于 2025-06-10 09:17:05 发布

夜跑者

最新推荐文章于 2025-06-10 09:17:05 发布

阅读量475

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/liubangbo/article/details/85267311

JavaScript 专栏收录该内容

73 篇文章

订阅专栏

本文通过实例展示了如何利用JavaScript的Object.defineProperty方法，将普通对象转换为响应式数据，当访问或修改对象属性时，控制台会打印出读取或设置数据的日志信息。

var person = {
    color : "yellow",
    sex : "male",
    age : 25
};

function defineReactive(obj, key, val) {
    Object.defineProperty(obj, key, {
        get : function () {
            console.log("read data: " + val);
            return val;
        },
        set : function (newVal) {
            console.log("set data : " + newVal);
            val = newVal;
        }
    })
}

Object.keys(person).forEach(function (key) {
     defineReactive(person, key, person[key])
});
console.log("person color:" + person.color);
console.log("person age:" + person.age)；

Good

======================================================================================

var person = {
    color : "yellow",
    sex : "male",
    age : 25
};

Object.keys(person).forEach(function (key) {
     Object.defineProperty(person, key, {
         get : function () {
             console.log("read data");
             return person[key];
         },
         set : function (newVal) {
             console.log("set data:" + newVal);
             person[key] = newVal;
         }
     })
});

console.log("person color:" + person.color);

Not Good

好好体会