Introduction
This tip shows you how to initialize a JavaScript object, without having named constructors, but with another object.
The Classic Way
Let's say we have a person
object with a name
and an age
. We would need to create a constructor that takes the name
and age
as arguments.
var person=function(name, age) {
this.name=name;
this.age=age;
}
var john=new person("john", 20);
From experience, I've found that I often like to initialize an object by sending in another object that holds the configuration for the new instance.
This can be done by using arguments[0];
.
The Code
var person=function() {
for(var prop in arguments[0]) {
this[prop]=arguments[0][prop];
}
}
var john=new person({
name: "john",
age: 20
});
Now I can extend the object on the fly.
Prevent Object Extension
It's pretty cool that I could extend the object by sending in a function as one of the properties of the object that's being sent into the constructor. But sometimes, I don't want this to be possible. In that case, I declare all legal properties before I copy the configuration and then check if this has the property being sent in.
var person=function() {
this.name=null;
this.age=null
for(var prop in arguments[0]) {
if(this.hasOwnProperty(prop)) {
this[prop]=arguments[0][prop];
}
}
}
Now it will no longer be possible to add properties that weren't declared.
An Example of Use
I find this trick most useful when serializing server data into a working object.
Let's assume we'd have this JSON result.
{
"firstname": "John",
"lastname": "Smith",
"age": 36
}
And we'd have the following prototype;
var person=function() {
this.firstname=null;
this.lastname=null;
this.age=null;
for(var prop in arguments[0]) {
this[prop]=arguments[0][prop];
}
}
person.prototype.getFullName=function()
{
return this.firstname + " " + this.lastname;
}
We can now easily create working instances of Person
out of Ajax json requests.
var user=null;
$.ajax({
url: "data.json",
success: function(data) {
user=new Person(data);
alert(user.getFullName());
}
});
History
- April-5-2013: Added Ajax serialize example
I'm a developer with 22+ years of experience. Starting of on a MVS mainframe, moving to building big multi-tier ERP systems with unix backends, to building web-based BI-Portals. I've seen a lot of different languages, environments and paradigmes.
At this point my main interest is webdevelopment. Mainly javascript/typescript and ASP.NET. But I also like getting my hands dirty on some PHP.
My main focus has been shifting towards full javascript the past years. Almost anything can be accomplished now. From building full offline webapps, to IoT (Tessel), to server (node).