As is the case with most design pat­terns, the JS world is hardly united. Still, there are prac­ti­cal appli­ca­tions for OOP in JavaScript. This method is the result of a few days of trial and error with mul­ti­ple approaches. Unlike reg­u­lar pro­to­typal inher­i­tance, class prop­er­ties are per-instance so chang­ing one Extend­ed­Class instance prop­erty will not affect any other instances.

The exam­ple below illus­trates a min­i­mal imple­men­ta­tion, but the pat­tern can be evolved to sup­port mul­ti­ple inher­i­tance and sin­gle­tons too. My func­tion sugar—extends—is marked reserved for future use by ECMAScript5 so you if you run strict mode, just get rid of the trail­ing ‘s’ to pre­vent conflict.

Func­tion sugar

1
2
3
4
5
6
7
8
9

// ========= Extended Primitives =========

Function.prototype.extends = function(o) {
	var cn = this;
	this.prototype = new o;
	this.prototype.constructor = cn;
};

// ========= Extended Primitives =========

Sam­ple inheritance

11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

/***************************************
* ParentClass
* @type Class
*/

function ParentClass() {

}

ParentClass.prototype.myProp = "Parent Property";

/***************************************
* ExtendedClass
* @type Class
*/

function ExtendedClass() {
	// extended properties will be static unless next line is uncommented
	ParentClass.call(this);
}

// Inheritance
ExtendedClass.extends(ParentClass);

// Public Properties
ExtendedClass.prototype.myExtendedProp = 'Extended Property';