javascript - 设置对象时执行函数

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.defineProperty 将 an、object、key 和 descriptor 作为参数(即，我们的自定义 setter 和 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 年 7 月 12 日

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

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