I want to write a getter and setter functions for an object based on a Json files. I copied the below code of John Resig's book(Appress Pro JavaScript Techniques) but it doesn't work and these functions don't add to the object.Can you tell me why and what is the right code?
// Create a new user object that accepts an object of properties
function User(properties) {
// Iterate through the properties of the object, and make sure
// that it's properly scoped (as discussed previously)
for (var i in properties) {
(function () {
// Create a new getter for the property
this["get" + i] = function () {
return properties[i];
};
// Create a new setter for the property
this["set" + i] = function (val) {
properties[i] = val;
};
})();
}
}
// Create a new user object instance and pass in an object of
// properties to seed it with
var user = new User({
name: "Bob",
age: 44
});
// Just note that the name property does not exist, as it's private
// within the properties object
//alert( user.name == null );
// However, we're able to access its value using the new getname()
// method, that was dynamically generated
alert(user.getname());
You've used a function to create a closure, but you've forgotten to pass i into it. You'll also need a different reference to this inside the function, as the context changes in it to window.
function User(properties) {
var i, me = this;
for (i in properties) (function (i) {
// Create a new getter for the property
me["get" + i] = function () { // using `me` because `this !== me`
return properties[i];
};
// Create a new setter for the property
me["set" + i] = function (val) {
properties[i] = val;
};
}(i)); // i passed into function closure
}
In your IIFE, this is actually window. You have to specify the context by using Function.prototype.call:
function User(properties) {
// Iterate through the properties of the object, and make sure
// that it's properly scoped (as discussed previously)
for (var i in properties) {
(function(i) {
// Create a new getter for the property
this["get" + i] = function() {
return properties[i];
};
// Create a new setter for the property
this["set" + i] = function(val) {
properties[i] = val;
};
}).call(this, i);
}
}
Or keep a reference to it with another variable:
function User(properties) {
var that = this;
// Iterate through the properties of the object, and make sure
// that it's properly scoped (as discussed previously)
for (var i in properties) {
(function(i) {
// Create a new getter for the property
that["get" + i] = function() {
return properties[i];
};
// Create a new setter for the property
that["set" + i] = function(val) {
properties[i] = val;
};
})(i);
}
}
If you were in strict mode, your code would throw an error instead of misleadingly succeeding:
TypeError: Cannot set property 'getname' of undefined
Related
var vehicle = function(){
var type;
var tyre;
this.tellTyres = function(){
console.log(type + " has " + tyre + " tyres");
};
this.__defineGetter__("type", function(){
return type;
});
this.__defineSetter__("type", function(val){
type = val;
});
this.__defineGetter__("tyre", function(){
return tyre;
});
// this.__defineSetter__("tyre", function(val){
// tyre = val;
// });
};
var car = new vehicle();
car.type = "Car";
car.tyre = 4;
console.log(car.tyre);
car.tellTyres();
I was learning about the getter and setter. Then I realized Javascript is not throwing any error while setting the value of car.tyre without having its setter method.
What happens to the car.tyre property outside the constructor. Where does the value 4 store? Does it override?
JavaScript objects are more like dictionaries than like Java objects. This means that you can set and get an object's properties just by using the property accessor operators . and []:
var obj = { foo: 'bar' };
obj.baz = 17;
console.log(obj.foo, obj.baz); // logs '"bar" 17'
And that is absolutely fine.
But sometimes, you want to do something whenever someone modifies a property of your object. In these cases, you define a getter or setter function for that property (use Object.defineProperty instead of defineGetter and defineSetter):
var obj = { foo: 'bar' };
Object.defineProperty(obj, 'baz', {
get: function () {
console.log('Someone wants to read the property "baz"!');
return 34;
},
set: function (value) {
console.log('You are not allowed to modify the property "baz"!');
}
});
obj.baz = 17; // doesn't work
console.log(obj.foo, obj.baz); // logs '"bar" 34'
When you create a new vehicle(), you create a new object, on which you can set or read properties. You don't need the getters and setters.
I'm building a function that would retrofit some of my prototypes with some common functions.
I would also like to add object instance specific variables through this mechanic, sorta like:
function give_weird_container(target) {
target.<somehow instance specific, not prototype>.underlying_container = [];
target.prototype.container_func = function(x, y, z) {
return this.underlying_container[x + 2*y + 3*z];
}
}
function my_class1() {}
give_weird_container(my_class1);
And now when I create a new instance of my_class1, it should have a property "uderlying_container" that would act the same as if I called
this.underlying_container = [];
in the constructor.
Is that possible while remaining in the confines of the give_weird_container function?
Is it possible to add a not shared variable to a prototype?
No. All properties on the prototype are shared. Instance specific properties can only be set after an instance was created.
You could however add a getter to the prototype that will create an instance specific property if it doesn't exist.
For example:
Object.defineProperty(target.prototype, 'underlying_container', {
get: function() {
if (!this._underlying_container) {
this._underlying_container = [];
}
return this._underlying_container;
},
});
The getter is shared, but the value returned is per instance.
If you don't like the fact that the getter is executed every time this.underlying_container is accessed, you could replace it with an instance property when the prototype property is called the first time:
Object.defineProperty(target.prototype, 'underlying_container', {
get: function() {
Object.defineProperty(this, 'underlying_container', {value: []});
return this. underlying_container;
},
});
Object.defineProperty(this, 'underlying_container', {value: []}); will create a new property with the same name on the instance thus shadowing the getter defined on the prototype.
To pick up #4castle's suggestion, if it is possible to mutate instances directly, then you could do something like this instead, which is a bit less "magic":
var give_weird_container = (function() {
function container_func(x, y, z) {
return this.underlying_container[x + 2*y + 3*z];
};
return function(target) {
target.underlying_container = [];
target.container_func = container_func;
};
}());
function my_class1() {}
var instance = new my_class1();
give_weird_container(instance);
You could give my_class1 a wrapper function that calls the constructor and then sets the field:
function give_weird_container(target) {
target.prototype.container_func = function(x, y, z) {
return this.underlying_container[x + 2*y + 3*z];
}
return function() {
var obj = new target();
obj.underlying_container = [];
return obj;
}
}
function my_class1() {}
my_class1 = give_weird_container(my_class1);
I am trying to add several methods to an object at once by using a for loop.
What I have is an array which has names of several events like click, load, etc. in an array and as such it will be really easy for me to insert these events to my library's object. However, I am not able to add the methods through the loop to my object.
Here's my code:
function(something) myLibrary {
if(this === window) {return new myLibrary }
this.e = document.getElementById(something);
}
var eventsArr = ['click','load','drag','drop'];
var addEventToProto = function (method) {
if(!myLibrary.hasOwnProperty(method)) {
myLibrary.prototype[method] = function (fn) { addEventListener(this.e, method, fn); };
}
};
for (i = 0; i < eventsArr.length; i += 1) {
addEventToProto(eventsArr[i]);
};
If you need more information then please leave a comment.
You should use a constructor function and manipulate the prototype property of that function instead. Object don't have an exposed prototype property, only functions have. When you create and instance, using a constructor function, then the internal [[prototype]] property of the resulting object will be set to point to the exposed prototype property of the constructor function. You can manipulate the prototype property even after instanciating an object:
function myLibraryConstructor() {
this.e = document.getElementById('someElement!');
}
var myLibrary = new myLibraryConstructor();
var eventsArr = ['click','load','drag','drop'];
var addEventToProto = function (method) {
if(!myLibrary.hasOwnProperty(method)) {
myLibraryConstructor.prototype[method] = function (fn) { addEventListener(this.e, method, fn); };
}
};
for (i = 0; i < eventsArr.length; i += 1) {
addEventToProto(eventsArr[i]);
};
Inside John Resig's book "Pro Javascript techniques" he describes a way of generating dynamic object methods with the below code:
// Create a new user object that accepts an object of properties
function User(properties) {
// Iterate through the properties of the object, and make sure
// that it's properly scoped (as discussed previously)
for (var i in properties) {
(function() {
// Create a new getter for the property
this["get" + i] = function() {
return properties[i];
};
// Create a new setter for the property
this["set" + i] = function(val) {
properties[i] = val;
};
})();
}
}
The problem is when I try instantiating the above object, the dynamic methods are being attached to the window object instead of the object instantiated. It seems like "this" is referring to the window.
// Create a new user object instance and pass in an object of
// properties to seed it with
var user = new User({
name: "Bob",
age: 44
});
alert( user.getname() );
Running the above code throws this error "user.getname is not a function".
What is the correct way of generating the dynamic functions for each object instantiated?
Is this code from the book? I have the book, but I haven't read through it.
It's an error in the book. Check the errata: http://www.apress.com/9781590597279
Inside the anonymous function, this is the global window.
You could make it work by adding .call(this, i) after it.
function User(properties) {
// Iterate through the properties of the object, and make sure
// that it's properly scoped (as discussed previously)
for (var i in properties) {
(function(i) {
// Create a new getter for the property
this["get" + i] = function() {
return properties[i];
};
// Create a new setter for the property
this["set" + i] = function(val) {
properties[i] = val;
};
}).call(this, i);
}
}
The this in the inner self-executing function is not the same as the this in the outer User function. As you noticed, it refers to the global window.
The problem is fixed if you slightly modify the code by adding a variable that refers to the outer this.
function User(properties) {
var self = this;
for (var i in properties) {
(function() {
self["get" + i] = function() { /* ... */ };
self["set" + i] = function() { /* ... */ };
})();
}
}
That said, I'm not sure why the anonymous self-executing function is even needed here, so you have the simpler option of just leaving it out entirely, like this:
function User(properties) {
for (var i in properties) {
this["get" + i] = function() { /* ... */ };
this["set" + i] = function() { /* ... */ };
}
}
Here is how to do it. You need to save the context into another variable. The other option is not to do this inner function that you are doing in the for loop.
// Create a new user object that accepts an object of properties
function User( properties ) {
// Iterate through the properties of the object, and make sure
// that it's properly scoped (as discussed previously)
var that = this;
for ( var i in properties ) { (function(){
// Create a new getter for the property
that[ "get" + i ] = function() {
return properties[i];
};
// Create a new setter for the property
that[ "set" + i ] = function(val) {
properties[i] = val;
};
})(); }
}
Option 2:
// Create a new user object that accepts an object of properties
function User( properties ) {
// Iterate through the properties of the object, and make sure
// that it's properly scoped (as discussed previously)
for ( var i in properties ) {
// Create a new getter for the property
this[ "get" + i ] = function() {
return properties[i];
};
// Create a new setter for the property
this[ "set" + i ] = function(val) {
properties[i] = val;
};
}
}
You can always force another this for any function call, using the apply method.
(function() {
// Create a new getter for the property
this["get" + i] = function() {
return properties[i];
};
// Create a new setter for the property
this["set" + i] = function(val) {
properties[i] = val;
};
}).apply(this);
You can also make a new function that has uses a certain this with the .bind method.
function getaloadofthis() {return this}
If you do getaloadofthis() it just returns window but if you do getaloadofthis.bind(3)() it returns 3.
So you could also have
const getaloadofthis3 = getaloadofthis.bind(3)
getaloadofthis3() // 3
This also works with anonymous functions
(function() {return this}).bind(3)() // 3
While searching the web, I've encountered a post that shows why the following example of dynamically generated methods does not work as planned:
// Create a new user object that accepts an object of properties
function User( properties ) {
// Iterate through the properties of the object, and make sure
// that it's properly scoped (as discussed previously)
for ( var i in properties ) { (function(){
// Create a new getter for the property
this[ "get" + i ] = function() {
return properties[i];
};
// Create a new setter for the property
this[ "set" + i ] = function(val) {
properties[i] = val;
};
})(); }
}
The reason for that is the anonymous function, which uses the "this" keyword is context of the "window", instead of "User".
1) Why does the this keyword in the anonymous function refers to "window instead of "User"?
2) Is there an accepted and common way to create "Dynamically Generated Methods"?
Thanks,
Joel
The reason that this refers to the window object, rather than User, is because this depends on the caller. In this case, the foreach contains an anonymous function that is immediately called. The caller will be considered to be the window object.
The reason it's not working is because the code is poorly written. It would be a simple thing to pass both context and the i-variable to be scoped:
function User( properties ) {
// Iterate through the properties of the object, and make sure
// that it's properly scoped (as discussed previously)
for ( var i in properties ) { (function(x){
// Create a new getter for the property
this[ "get" + x ] = function() {
return properties[x];
};
// Create a new setter for the property
this[ "set" + x ] = function(val) {
properties[x] = val;
};
}).call(this, i); }
}
I did try all your examples, but no one has worked perfectly.
This is the working code:
function User( properties ) {
// Iterate through the properties of the object, and make sure
// that it's properly scoped (as discussed previously)
var that = this;
for ( var i in properties ) { (function(){
// Create a new getter for the property
that[ "get" + i ] = function(i) {
return function (){
console.debug(i);
return properties[i];
}
}(i);
// Create a new setter for the property
that[ "set" + i ] = function(i) {
return function (val){
properties[i] = val;
}
}(i);
})(); }
}
var user = new User({
name: "Bob",
age: 44
});
console.log(user.getname(), user.getage()) //Bob, 44
user.setname("Antonio");
user.setage(33);
console.log(user.getname(), user.getage()) //Antonio, 33
More explanation to the following link
computerone.altervista.org
You need to set a proper reference of the "this" element. You are inside an anonymous scope.
As the first line of the function "User" you should declare a variable like
var _this = this;
Then, instead of calling this[ "get" + i], you have to call _this[ "get" + i]
Try:
// Create a new user object that accepts an object of properties
function User( properties ) {
// Iterate through the properties of the object, and make sure
// that it's properly scoped (as discussed previously)
var self = this;
for ( var i in properties ) { (function(){
// Create a new getter for the property
self[ "get" + i ] = function() {
return properties[i];
};
// Create a new setter for the property
self[ "set" + i ] = function(val) {
properties[i] = val;
};
})(); }
}
The problem there is the missing new operator. If you instance your User without it, the this inside will be window.
This will not work:
var george = User(properties);
This will work:
var george = new User(properties);
This tutorial it's interesting to follow.