createClass factory

createClass factory a Javascript pattern for OOP class declarations John Hunter 14 June 2008

1

Javascript is a dynamic functional language with prototypal inheritance.

This is very different to static object-oriented programming languages like Java.

Many classically trained programmers believe Javascript is an unsophisticated language incapable of supporting object-orientation.

2

Javascript does not use class based inheritance‌ ...but has the flexibility to provide a class declaration pattern that is a close fit with classical object-oriented programing.

3

Person firstName lastName toString () getClassName ()

4

createClass('Person', function (firstName, lastName) {

this.firstName = firstName;

this.lastName = lastName; } .method('toString', function () {

return this.firstName + ' ' + this.lastName; }) .method('getClassName', function () { return this.className || 'unknown'; }) );

5

createClass('Person', function (firstName, lastName) {

this.firstName = firstName;

this.lastName = lastName; } .method('toString', function () {

return this.firstName + ' ' + this.lastName; }) .method('getClassName', function () { return this.className || 'unknown'; }) 2nd argument: class construct );

6

createClass('Person', function (firstName, lastName) {

this.firstName = firstName; Person constructor

this.lastName = lastName; } method of Person .method('toString', function () {

return this.firstName + ' ' + this.lastName; }) .method('getClassName', function () { method of Person return this.className || 'unknown'; }) );

7

Person firstName lastName toString () getClassName ()

Employee firstName lastName id toString () getClassName ()

8

createClass('Employee', function (firstName, lastName, id) { Employee.superConstructor.call(this, firstName, lastName); this.id = id; } .extend(Person) .method('toString', function () {

return Employee.superClass.toString.call(this) + ': ' + this.id; }) );

9

createClass('Employee', function (firstName, lastName, id) { Employee.superConstructor.call(this, firstName, lastName); this.id = id; constructor } .extend(Person) parent class .method('toString', function () {

return Employee.superClass.toString.call(this) method + ': ' + this.id; }) );

10

<package> com.company

Person firstName lastName toString () getClassName ()

Employee firstName lastName id toString () getClassName ()

11

create a package object var com = {company: {}}; createClass('Employee', com.company, pass in the package object function (firstName, lastName,Name id) { Employee.superConstructor.call (this, first, last); this.id = id; } .extend(Person) .method('toString', function () {

return Employee.superClass.toString.call (this) + ': ' + this.id + ' belongs to com.company'; }) class is exported into the package object ); var john = new com.company.Employee(‘John’,’Hunter’,’42’); 12

the implementation code

// factory function - creates class definition within optional scope function createClass (className, scope, construct) {

if (arguments.length == 2) {

construct = arguments[1];

scope = this;

}

construct.prototype.className = className;

return scope[className] = construct; } // Function method - sets the inheritance for the class Function.prototype.extend = function (superClass) {

function F() {}

F.prototype = superClass.prototype;

this.prototype = new F();

this.prototype.constructor = this;

this.superConstructor = superClass;

this.superClass = superClass.prototype;

return this; }; // Function method - binds a method to the class prototype Function.prototype.method = function (name, func) {

this.prototype[name] = func;

return this; };

13

// factory function - creates class definition within optional scope function createClass (className, scope, construct) { if (arguments.length == 2) { construct = arguments[1]; scope = this; } construct.prototype.className = className; return scope[className] = construct; }

14

// Function method - sets the inheritance for the class Function.prototype.extend = function (superClass) { function F() {} F.prototype = superClass.prototype; this.prototype = new F(); this.prototype.constructor = this; this.superConstructor = superClass; this.superClass = superClass.prototype; return this; };

15

// Function method - binds a method to the class prototype Function.prototype.method = function (name, func) { this.prototype[name] = func; return this; };

16

// using the createClass factory createClass('Class-name', function (args) {

...constructor body } .extend(Superclass) .method('method-name', function () {

...method body }) ...further method declarations... );

the class constructor function

chained methods of the constructor function

17

Thanks

18