HTML and CSS Reference
In-Depth Information
To this end Quintus uses a compromise between inheritance and components by supporting both, enabling
you to use inheritance where it makes sense and components when you need more flexibility. To support the
former, the engine needs to add a classical inheritance model to JavaScript. To support the latter, it needs to add
a component system and have low-level support for events to allow for as much decoupling between compon-
ents as possible.
Adding Classical Inheritance to JavaScript
JavaScript doesn't suffer from the limitation of statically typed interfaces and instead usually takes advantage
of the concept of duck typing. duck typing, which has been mentioned previously, revolves around the idea that
the type of an object doesn't matter; all that matters are the properties and methods that an object responds to.
JavaScript does support a prototypical inheritance model that enables a more traditional type of inheritance.
The three main issues with using prototypical inheritance out-of-the-box are that it doesn't support calling in-
herited functionality via a super-type method; creating descendant objects feels slightly kludgey; and there's no
way to inherit constructors.
You can solve this in a number of ways and add a more traditional class hierarchy to JavaScript. One of the
most popular is jQuery creator John Resig's Simple JavaScript inheritance, which takes its cues from base2 and
another JavaScript library called Prototype.js. It's a piece of open-source code released under the MIT license
originally described on John's website:
http://ejohn.org/blog/simple-javascript-inheritance/
.
Add the code from
Listing 9-7
somewhere to the top of
quintus.js
, outside of the Quintus constructor
method. (Near the top of the file, after the
requestAnimationFrame
code outside of any curly braces, is
fine.)
Listing 9-7:
Simple JavaScript inheritance
/* Simple JavaScript Inheritance
* By John Resig http://ejohn.org/
* MIT Licensed.
*/
// Inspired by base2 and Prototype
(function(){
var initializing = false,
fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
// The base Class implementation (does nothing)
this.Class = function(){};
// Create a new Class that inherits from this class
Class.extend = function(prop) {
var _super = this.prototype;
// Instantiate a base class (but only create the instance,
// don't run the init constructor)
initializing = true;
var prototype = new this();
initializing = false;
// Copy the properties over onto the new prototype
