HTML and CSS Reference
In-Depth Information
Exercising the Class Functionality
To get a sense of how to use this code, try exercising this functionality in the console of the browser as follows:
var Person = Class.extend({
init: function() { console.log('Created Person'); },
speak: function() { console.log('Person Speaking:'); }
});
var p = new Person();
// Logs: Created Person
p.speak();
// Logs: Person Speaking:
var Guy = Person.extend({
init: function() { this._super(); console.log('Created Guy'); },
speak: function() { this._super(); console.log("I'm a Guy!"); }
});
var bob = new Guy();
// Logs: Created Person
// Created Guy
bob.speak();
// Logs: Person Speaking
// I'm a Guy!
// Girl doesn't call the super method
var Girl = Person.extend({
init: function() { console.log('Created Girl'); },
speak: function() { console.log("I'm a Girl!"); }
});
var jill = new Girl();
// Logs: Created Girl
jill.speak();
// Logs: I'm a Girl!
As you can see, the class functionality makes it possible to cleanly create and extend classes that ensure that
methods of the super class are called when appropriate.
bob instanceof Person; // true
bob instanceof Guy; // true
bob instanceof Girl; // false
jill instanceof Person; // true
jill instanceof Guy; // false
jill instanceof Girl; // true
