Question

我希望在改变props.test的值时执行一个函数。我在另一个问题中看到过可以使用Object.defineProperty。但在我的情况下，它将props.test，如何让它工作

 props.test = props.test || {};
//if props.test value changes it need to execute set function
props.test = "abc";

function setTest(){
console.log("set function is executed");
props.test = "abc";
}

Answer 1

这可以通过在诸如

之类的对象上定义getter and setters来实现

var props = { 
    get value() { 
       return this._value; 
    }, 
    set value(val) { 
        this._value = val;
        alert("value is: " + val); 
    }
}

对于上面的示例，当您在props对象上设置值时，会执行alert函数，

props.value;           // returns undefined
props.value = "hello"; // alert box will appear, "value is: hello"
props.value;           // returns "hello".

当值改变时，可以用您希望执行的功能替换它。

在现有对象上添加属性时，可以使用Object.defineProperty，如此

var me = {name:'Anthony', location:'RI'};
// let's extend onto the object a new property called, 'age'
// with custom getter and setter
Object.defineProperty(me, 'age', { 
        get: function() { 
                return this._age; 
        }, 
        set: function(newAge) { 
                this._age = newAge;
                alert("I am " + newAge + " now!"); 
        }
});

me.age;        // undefined
me.age = 28;   // alert box will appear, "I am 28 now!"
me.age;        // returns 28.

如果预先存在的对象包含object，则可以更进一步，您可以执行以下操作，

注意：Object.defineProperty分别作为参数object，key和descriptor（即我们的自定义设置器和getter）。 object参数可以是任何object类型，甚至是父object的嵌套object。

// my pet rules my life, so let's include her in my example object,
var me = {name:'Anthony', location:'RI', pet:{name:'Binks'}};
// let's give her an identifier because that's what good owners do,
// Notice the first argument of, 'me.pet' which is the inner object.
Object.defineProperty(me.pet, 'id', {
        get: function() { 
                return this._id; 
        }, 
        set: function(newId) { 
                this._id = newId; 
                alert("id changed! " + newId); 
        }
});

me.pet['id'];     // undefined
me.pet['id'] = 1; // alert box will appear, "id changed! 1"
me.pet['id'];     // returns 1

更新：2015年12月12日

如果您尝试将动态值添加到Object，则可以将上述功能扩展为通用功能，

var defineProp = function(obj, value) {
    Object.defineProperty(obj, value, {
        get: function() { 
                return this['_' + value]; 
        }, 
        set: function(newValue) { 
                this['_' + value] = newValue; 
                alert(value + " changed! " + newValue); 
        }
    });
}

Answer 2

这样做最合乎逻辑的方法是创建一个负责设置属性的函数。据我所知，当对象的属性发生变化时，没有可用于监视的钩子。或者，您可以使用计时器定期检查属性是否已更改。

设置对象时执行函数

2 个答案:

更新：2015年12月12日