Object-Orientated Coding In JS

I’ve just (re)started leaning Objective-C, and thought I’d sabotage the learning-process (I always find a way to do this), by trying to do a bit of object-orientated coding in JavaScript, too.

Of course, I’ve used objects in JS/QC before, but I’ve never used proper OO concepts when writing JS before.

Here’s some example code:

// Declare custom object to hold point data
function point() {this.X = 0; this.Y = 0; this.Z = 0;}

// Re-initialise point
point.prototype.initpoint = function() {this.X = 0; this.Y = 0; this.Z = 0;}

// Object method for point (creates new random point)
point.prototype.newpoint = function(lastpoint, maxdist) {
	this.X = lastpoint.X + (Math.random() * (2 * maxdist) - maxdist);
	this.Y = lastpoint.Y + (Math.random() * (2 * maxdist) - maxdist);
	this.Z = lastpoint.Z + (Math.random() * (2 * maxdist) - maxdist);
}

// Calculates point on bezier-curve, taking 4 variables of type point and 1 value for time (in 0 > 1 range)
point.prototype.bezierpoint = function(A, B, C, D, t) {
	var a = t; var b = 1 - t;
	this.X = A.X * Math.pow(b, 3) + 3 * B.X * Math.pow(b, 2) * a + 3 * C.X * b * Math.pow(a, 2) + D.X * Math.pow(a, 3);
	this.Y = A.Y * Math.pow(b, 3) + 3 * B.Y * Math.pow(b, 2) * a + 3 * C.Y * b * Math.pow(a, 2) + D.Y * Math.pow(a, 3);
	this.Z = A.Z * Math.pow(b, 3) + 3 * B.Z * Math.pow(b, 2) * a + 3 * C.Z * b * Math.pow(a, 2) + D.Z * Math.pow(a, 3);
}

The idea of OO coding is that you define objects, with particular properties, and then you can define methods, that act on those properties in some way. Once you’ve defined an object, its properties and its methods, the object becomes a kind of prototype, and you can then create lots of independent instances of that object, each with their own, independent properties.

So, in the code above, I’m defining an object called ‘point’ to hold an X, Y and X position.

function point() {
	this.X = 0;
	this.Y = 0;
	this.Z = 0;
}

Once I’ve defined the properties that every instance of the point object will have, I can define methods to do things with those properties. Here’s the simplest one:

point.prototype.initpoint = function() {this.X = 0; this.Y = 0; this.Z = 0;}

To create a new object of type ‘point’, I’d do this:

var p0 = new point();

I can then apply the methods I defined above to the X Y and Z values for p0, using dot-syntax:

p0.initpoint();

for example, would initialise all values for p0 to 0.

The other methods I’ve defined are a bit more complicated, in that they require input variables to be passed to them when they are invoked, but the principle is the same.

Of course, this kind of thing will be second-nature to anyone who has done work in C++, Java, or any of the many other OO programming and scripting languages (though the syntax may vary), but it’s quite novel to me. I’ve been messing around with bits of code for years, now, but, apart from the odd dabbling with ActionScript, I’ve never really got beyond relatively simple procedural, C-style coding. I think I’ll be using OO techniques like this a lot more in the future, though. It’s definitely something I’ll need to get my head around conceptually, when I learn to write Objective-C, so it makes sense to apply the same principles in JavaScript, too.