Setters / Getters for nested object
I know how to set custom setters and Getters in Javascript using Object.defineProperty
My intention with the following piece of code is to hit the setter function whenever the nested property value inside the globalProject object is changed.
var ClassA = function () {
this.globalProject = {
a: "DEFAULT VALUE",
b: null
};
this.LastSavedProject = {};
};
Object.defineProperty(ClassA.prototype, 'globalProject', {
get: function () {
console.log("OVERRIDE");
return this._flag;
},
set: function (val) {
console.log("EDITING A DEEP VALUE")
this._flag = val;
},
});
var obj = new ClassA();
obj.globalProject.a = "HELLO WORLD" //Should get "EDITING A DEEP VALUE" in the console.
My guess is what is happening is that the getter method is called and returns a reference to the object I want to modify. Because of this, the setter is never called, since I am changing the reference to the nested value, not the property I have included the setter on.
Can anyone help me figure out this problem? Here's a fiddle: http://jsfiddle.net/z7paqnza/
source to share
When you execute obj.globalProject.a = "HELLO WORLD"
, you just see "OVERRIDE" in the console because you are getting the value obj.globalProject
and setting the value of your data member a
.
The console does not display "EDIT DEEP VALUES" because you never set globalProject
to refer to another object, you just changed one of the underlying data items of the object. However, if you did something like obj.globalProject = null
you will see "DEEP VALUE EDIT" printed to the console as you would change the object the object points to obj.globalProject
. See this jsfiddle: http://jsfiddle.net/z7paqnza/1/
source to share
What @PaulDapolito says for sure is true. We don't call the setter of the globalObject when the deep object is set. I updated the code to add setters for the deep object and it now calls the inner objects. Here is a jsfiddle: http://jsfiddle.net/sjLLbqLc/4/
In this particular question, we can perform an insert operation in the settings of the GlobalProject class .
I am late to the party but I hope this helps someone who lands here looking for this.
var ClassA = function() {
this.globalProject = new GlobalProject(); // this sets global object
// you can initilaize your default values here to the global object. But you need the new GlobalProject() which will create the object with setters and getters.
};
Object.defineProperty(ClassA.prototype, 'globalProject', {
get: function() {
return this._flag;
},
set: function(val) {
console.log("Setting global object");
this._flag = val;
},
});
var GlobalProject = function() {
Object.defineProperty(GlobalProject.prototype, "a", {
get: function() {
return this._a;
},
set: function(value) {
console.log("Seting deep object");
this._a = value;
}
});
Object.defineProperty(GlobalProject.prototype, "b", {
get: function() {
return this._b;
},
set: function(value) {
this._b = value;
}
});
};
var obj = new ClassA();
obj.globalProject.a = "HELLO WORLD";// this sets the inner object
source to share