Getting started with Javascript Objects

8th January 2014

If you are thinking about developing Javascript objects (classes) then you will find that using the method below will help you greatly to ease the development whilst keeping the code flexible and clean, it simply copies the arguments for one object to another:

function extend(obj)  {
	for (var i=1, argument, key;  i<arguments.length;  i++) {
		argument = arguments[i];
		for (key in argument) {
			if (argument.hasOwnProperty(key)) {
				obj[key] = argument [key] ;
			}
		}
	}
}

You can use it to just extend any object with more properties:

var obj = {
	one: 1,
	two: 2
};

extend(obj, {
	three: 3,
	four:  4
});

//'obj' now contains the four properties.

You can use it to ease the construction of a typical Javascript object:

function BlogPost(postTitle, postDescription, postDate, postType) {
	this.title = postTitle || "Default Title";
	this.description = postDescription || "Coming soon...";
	this.date = postDate || new Date();
	this.type = postType || BlogPost.TYPE_NORMAL;
}

extend(BlogPost, {
	TYPE_NORMAL: 1,
	TYPE_STICKY: 2
});

extend(BlogPost.prototype, {
	makeSticky: function() {
		this.type = BlogPost.TYPE_STICKY;
	}
});

var newPost = new BlogPost("New post");

The advantage to using extend is that it preserves the existing object, so we can call extend as many times as we like, like in future js files and it will not be destructive on our object.

Note: the 'prototype' property of an object refers to the instance created when 'new' is used to instantiate the object.

Using objects as constructor arguments

If you wanted to, you could create your object such that you can customise an objects properties by passing in another object into the constructor of the object. This provides a nice interface - allowing you pass it properies by name, in any order and let you have defaults defined inside the object too - and the code is really not much more:

function a(obj) {
	this.b = 1;
	this.c = 2;

	extend(this, obj);
}

var newA = new a({ b: 3, c: 4 });

Moving the constructor

As the 'constructor' is another property of the 'prototype' object, we can overwrite it using the extend method and define it with the other methods if we wish:

function BlogPost() {}

extend(BlogPost.prototype, {
	constructor:  function(postTitle) {
		this.title = postTitle;
	}
});

Classical object oriented extending

You can use extend to copy the methods from one object to another in a similar manner to 'extends' in oop languages.

function a() {
	this.c = 1;
}

extend(a.prototype, {
	getC: function() {
		return this.c;
	}
});

function b() {
	this.d = 2;
}

extend(b.prototype, a, {
	getD:  function () {
		return this.d;
	}
});

However, note that the constructor property is also copied so you may want to change it back:

extend(b.prototype, a, {
	constructor:  b,
	getD:  function () {
		return this.d;
	}
});

Note though that doing this does not preserve the prototype chain that exists in Javascript for objects and so using 'instanceof' does not work as expected. To resolve this, you can extend objects in Javascript by doing the following:

b.prototype = new a();

This still requires you to change the constructor back if you need to. This should also be called before extending the prototype as it replaces the prototype object.

Classical object oriented interfaces

You can also use object as templates and extend them to guarantee that derived objects have those properties in the same way that interfaces are used to oop languages:

function interface() {}

extend(interface.prototype, {
	doSomething: null,
	doSomethingElse: null
});

function a() {}

extend(a, interface);

Comments

sfsdfsf
fhfgh - 3rd Jan 2017 03:27

Make a comment

Contribute to this article and have your say.