More about Creating Objects in JavaScript
A little later than expected since I’ve been quite busy with my Swift Mailer project (SourceForge).
A few weeks ago I posted an introduction on how to create objects using JavaScript. The concept is simple and quite fundamental. Objects are functions, methods are assigned as new functions inside the object and the constructor is simply the common logic that is placed inside the function which becomes our object.
You saw how to add methods to existing objects by using “prototype”. In this entry we’ll look at how to extend entire objects by using new objects with the “prototype” property and we’ll also look at how objects are passed around in JavaScript.
Inheritance:
The process for extending objects, or more correctly implementing inheritance is very similar to the way in which we add properties and methods to objects. We use the “prototype” property of the parent object and assign that a new object which we want to inherit from.
<!– Hide
function parentObject()
{
this.foo = 42;
}
function childObject()
{
this.getFoo = function()
{
return this.foo;
}
}
childObject.prototype = new parentObjectt;
var myObj2 = new childObject();
alert(myObj2.getFoo());
// –>
</script>
The above snippet will output 42 since the childObject gains access to all public properties and methods in the parentObject upon inheritance using “prototype”. If you’re familiar with Object-Oriented Programming (OOP) in other languages then this process may seem a little strange but beyond this point everything will work as you’d expect.
You can create inheritance chains using exactly the same methodology. Simply use prototype on an object which already inherits for some other object.
How JavaScript Handles Object Passing and Referencing:
Luckily, JavaScript being OOP by it’s very nature, JavaScript passes objects by reference all the time. This essentially means that when you create an instance of an object and then pass that instance into a function or another object you are quite literally passing that object, not a copy of it. So if changes are made to the object subsequently, those changes will be reflected in all places the object was copied to.
Here’s a quick demonstration to see this in action:
<!– Hide
function someObject()
{
this.somevar = 10;
this.getvar = function()
{
return this.somevar;
}
this.setvar = function(val)
{
this.somevar = val;
}
}
function container()
{
this.innerObj;
this.loadObject = function(obj)
{
this.innerObj = obj;
}
}
var obj1 = new someObject();
var obj2 = new container();
alert(obj1.getvar()); //10
obj2.loadObject(obj1); //Pass an instance of someObject to container
alert(obj2.innerObj.getvar()); //We’re still getting 10
obj1.setvar(42);
alert(obj1.getvar()); //42
alert(obj2.innerObj.getvar()); //42
// –>
</script>
Anjanesh [ 22Aug07]
Are there workarounds for constants and static members & methods ?
The const keyword seems to exist - but not accessible from outside the class like obj1.c1 or someObject.c1
{
const c1 = 1;
}
chris [ 22Aug07]
Sort of, you can do this:
//whatever here
}
someObject.SOME_FIELD = 42;
alert(someObject.SOME_FIELD);
I’m not aware of a way to make objects immutable or constant though. That’s not to say it can’t be done however.