A short introduction into prototypal inheritance in JS followed by a function to make it look like classical inheritance.

1. JavaScript Classes &
Inheritance
Marc Heiligers
@marcheiligers

2. Basic JS Classes
Functions act as constructors
Functions have a prototype
Use new to create an instance of a type
Call instance methods with dot notation

3. function Animal() {
this.name = "animal";
}
Animal.prototype.speak = function() {
console.log("I'm a " + this.name);
};
var animal = new Animal();
animal.speak(); //logs "I'm a animal"

4. Object
All JS objects inherit from Object
Object has 2 standard methods:
toString
valueOf
Lot’s of non-standard and newer methods:
https://developer.mozilla.org/en/JavaScript/Reference/
Global_Objects/Object

5. Overriding Methods
Can override super class methods by:
attaching new methods to the prototype property
eg. Animal.prototype.toString = function() { ... }

6. console.log(animal.toString()); //logs "[object Object]"
Animal.prototype.toString = function() {
return "[" + this.name + " Animal]";
};
console.log(animal.toString()); //logs "[animal Animal]"
console.log(animal.valueOf()); //logs Animal { name="animal",
↳speak=function(), toString=function()}
console.log("" + animal.valueOf()); //logs "[animal Animal]"
Animal.prototype.valueOf = function() {
return this.name;
};
console.log(animal.valueOf()); //logs "animal"

7. Add methods to existing Classes
Add methods to the prototype of the existing class
All instances of the class will get those methods
You can extend built in classes too - with a couple of caveats
Generally bad to extend the prototype of Object
Generally accepted as bad to extend the prototype of
DOM classes, although MooTools and Prototype do this

8. String.prototype.articulize = function() {
if(["a", "e", "i", "o", "u"].indexOf(this[0].toLowerCase())
↳ >= 0) {
return "an " + this;
} else {
return "a " + this;
}
};
console.log("Pig".articulize()); // logs "a Pig"
console.log("Elephant".articulize()); // logs "an Elephant"
Animal.prototype.speak = function() {
console.log("I'm " + this.name.articulize());
};
animal.speak(); //logs "I'm an animal"

9. Inheritance
Create a new constructor function
Assign a new instance of the base class to the prototype
function A { ... }
function B { ... }
B.prototype = new A;

10. function Pig() {
this.name = "pig";
}
Pig.prototype = new Animal;
var pig = new Pig();
pig.speak(); // logs "I'm a pig"
console.log(pig.toString()); // logs "[pig Animal]"
Animal.prototype.countLegs = function() {
return this.legs || 0;
};
Pig.prototype.legs = 4;
console.log(animal.valueOf() + " has " + animal.countLegs() +
↳" legs"); // logs "animal has 0 legs";
console.log(pig.valueOf() + " has " + pig.countLegs() +
↳" legs"); // logs "pig has 4 legs";

11. function Eisbein() {
this.legs = 1; // Instance variable
}
Eisbein.prototype = new Pig;
var eisbein = new Eisbein();
eisbein.speak(); // logs "I'm a pig"
console.log(eisbein.valueOf() + " has " +
↳eisbein.countLegs() + " legs");
↳// logs "pig has 1 legs";

12. Calling base class methods
Use Function#call to call the base class method in the context
of the current class
Base.prototype.method.call(this);
Call is useful in many other places too
Array.prototype.slice.call(arguments); //creates a real
array from the arguments oject

13. Pig.prototype.speak = function() {
Animal.prototype.speak.call(this);
console.log("Snork");
};
pig.speak(); // logs "I'm a pignSnork"
Eisbein.prototype.speak = function() {
Pig.prototype.speak.call(this);
console.log("Sizzle");
};
eisbein.speak();
↳// logs "I'm a pignSnorknSizzle"

14. Making it Classical
Create a Class object to create classes
make it look more like classical inheritance
have easier access to super class methods

15. (function(global) {
var isFn = function(fn) {
return typeof fn == "function";
};
global.Class = function() {};
global.Class.create = function(superClass) {
var klass = function(magic) {
// call init only if there's no magic cookie
if(magic != isFn && isFn(this.init)) {
this.init.apply(this, arguments);
}
};
klass.prototype = new this(isFn);
for(key in superClass) {
(function(fn, superFn) { // create a closure
k.prototype[key] = !isFn(fn) || !isFn(superFn) ? fn :
function() {
this.super = sfn;
return fn.apply(this, arguments);
};
})(superClass[key], k.prototype[key]);
}
klass.prototype.constructor = klass;
klass.extend = this.extend || this.create;
return klass;
};
})(this);

16. (function(global) {
var isFn = function(fn) {
return typeof fn == "function";
};
global.Class = function() {};
global.Class.create = function(derived) {
var klass = function(magic) {
// call init only if there's no magic cookie
if(magic != isFn && isFn(this.init)) {
this.init.apply(this, arguments);
}
};

17. // use our private method as magic cookie
klass.prototype = new this(isFn);
for(key in derived) {
(function(fn, superFn) { // create a closure
klass.prototype[key] = !isFn(fn) || !isFn(superFn) ?
fn :
function() {
this.super = superFn;
return fn.apply(this, arguments);
};
})(derived[key], klass.prototype[key]);
}
klass.prototype.constructor = klass;
klass.extend = this.extend || this.create;
return klass;
};
})(this);

18. var Animal = Class.create({
init: function() {
this.name = "animal";
},
speak: function() {
console.log("I'm " + this.name.articulize());
},
toString: function() {
return "[" + this.name + " Animal]";
},
valueOf: function() {
return this.name;
}
});
var animal = new Animal();
animal.speak(); // logs "I'm an animal"
console.log(animal.toString()); // logs [animal Animal]
console.log(animal.valueOf()); // logs animal

19. var Pig = Animal.extend({
init: function() {
this.name = "Pig";
},
speak: function() {
this.super();
console.log("Snork");
}
});
var Eisbein = Pig.extend({
speak: function() {
this.super();
console.log("Sizzle");
}
});
var pig = new Pig();
pig.speak(); // logs "I'm a pignSnork"
var eisbein = new Eisbein();
eisbein.speak(); // logs "I'm a pignSnorknSizzle"

20. Questions?