Javascript, redefine unlimited number of setters with same function
Suppose you have an object:
var o = {
a: 3
b: 4
}
And you want to save or do something with it whenever a property of this object is changed. This is possible by defining special setters in javascript.
Observe first that means we will need two object: one to actually store the data, one to contain the special getters. (Is there an elegant way to avoid it?)
However, the annoying thing is that - if you read the above API page, setters have to be set by hand. Luckily, Object.defineProperty will help us redefine unlimited number of setters as follow:
var create_custom_setter = function(destination, source, custom_setter){
destination = destination || {};
for(var prop in source){
if(typeof(source[prop]) === "object"){
var sub_destination = create_custom_setter({}, source[prop]);
destination[prop] = sub_destination;
}else{
// javascript scope problem:
var maker_set = function(source, prop){
return function(value) {
source[prop] = value;
custom_setter(value, prop, destination, custom_setter);
}
}
// default setter:
var maker_get = function(source, prop){
return function(){
return source[prop];
}
}
Object.defineProperty(destination, prop, {
set: maker_set(source, prop),
get: maker_set(source, prop)
});
}
}
return destination;
}
The, I can create a front-facing object of o like this with a custom global setter:
var front_facing = create_custom_setter({}, o, function(value, prop){
console.log(prop + " has been set");
})Written by Yannik Messerli
Related protips
Have a fresh tip? Share with Coderwall community!
JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.
Security insights from Cside