javascript - 访问使用 Object.create 创建的 JavaScript 属性的 get/set 方法

标签 javascript object-create defineproperty

我想要的是包装 JavaScript 属性以修改 get/set 行为的能力。

对于作为值的属性,我可以执行以下操作:

var obj = {
    myProperty : 0
};

function notifyOfChange(obj, propertyName) {
    var propertyValue = obj[propertyName];
    Object.defineProperty(obj, propertyName, {
        get : function() { return propertyValue; },
        set : function(newValue) {
            var propertyValue = newValue;
            console.log("Message from notifyOfChange."); 
        }
    });
};

obj.myProperty = 10; // outputs "Message from notifyOfChange."

但是,如果 myProperty 已经有一个 getter/setter 怎么办?

var obj = Object.create({}, {
    myProperty : {
        get : function() { return this._myProperty; },
        set : function(value) {
            console.log("Message from obj itself.");
            this._myProperty = value;
        },
        configurable : true
    }
});

obj.myProperty = 10; // outputs "Message from obj itself";

notifyOfChange(obj, "myProperty");

obj.myProperty = 10; // outputs "Message from notifyOfChange."

有没有办法检测 myProperty 匿名 setter ,以便我可以在 notifyOfChange 中调用它?

注意:我想让 notifyOfChange 适用于任何对象,因此仅对 myProperty setter 使用命名函数是行不通的。

最佳答案

function notifyOfPropertyChange(obj, propertyName) {

    var desc = Object.getOwnPropertyDescriptor(obj, propertyName);

    if ("value" in desc && desc.writable) {
        // Value property

        var propertyValue = obj[propertyName];

        Object.defineProperty(obj, propertyName, {
            get: function () { return propertyValue; },
            set: function (newValue) {
                propertyValue = newValue;
                console.log("Message from notifyOfChange.");
            },
            configurable: true,
            enumerable: desc.enumerable
        });

    } else if (desc.set) {
        // Getter/setter property

        // Redefine the setter, keep the getter if it exists
        var originalSet = desc.set.bind(obj);
        desc.set = function (newValue) {
            originalSet(newValue);
            console.log("Message from notifyOfChange.");
        };
        Object.defineProperty(obj, propertyName, desc);
    }
}

您可以使用 Object.getOwnPropertyNames 获取要修改的属性名称的完整列表。

有关 Object.getOwnPropertyDescriptor 的解释,请参阅 MDN .

关于javascript - 访问使用 Object.create 创建的 JavaScript 属性的 get/set 方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9855136/

相关文章:

Java对象创建区别

Javascript拦截数组设置值

javascript - 如何在 uiwebview 中使用 javascript 来获取点击的按钮 ID?

javascript - Js - 解决挑战 Range Sum Query - Immutable with creating object and its properties

javascript - 磁摆力计算与数值积分

javascript - 对象不遍历其原型(prototype)链以获取值的任何情况?

javascript - Object.defineProperty 数据绑定(bind)范围

javascript - IONIC 框架(AngularJs 和 JavaScript)|是否推荐基于 SOAP 的 Web 服务?

javascript - Highcharts 一次显示/隐藏或关闭所有系列