Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Excerpt

Simplifies the implementation and use of classical Javascript prototypal inheritance.

 

Syntax

Code Block
themeRDark
languagejavascript
linenumberstrue
myClass.inherit(mySuperclass);

(warning) inherit() replaces myClass.prototype so use it prior to defining any properties on the class prototype.

Parameters / functions

Parameter / functionTypeMandatoryDescriptionAPI Version
mySuperclassFunction(tick)

The superclass to inherit.

Define methods and properties on the prototype chain.

(warning) The superclass constructor won't be called unless you explicitly call it from within the class constructor using Objectobject.uSupersuper().

1.0

myClassFunction(tick)

The class that will inherit the superclass.

Properties defined on the class prototype will override properties of the same name on the superclass prototype, without affecting the superclass.

Methods on your class can call superclass methods of the same name using Objectobject.uSupersuper().

1.0

Return value

ValueTypeNotesAPI Version
<myClass>FunctionThe class (function) that .inherit() was called on.1.0

Notes

Prototypal inheritance is how most of Javascript's inbuilt objects/classes work (such as Array, Function, Number, global, etc). uInherit() let's you do the same without the pain.

It works perfectly with Javascript's typeof operator, instanceof and also Type Checking and Property Definitions. The prototype chain depth (number of superclasses) is unlimited and ultimately ends with Object.prototype.

Prototypal inheritance is rampantly fast to instantiate because it's based on simple prototype chain manipulation. However, if your proto chains get too deep there can be a performance impact (although negligible on today's optimised JS compilers). Anything less than 10 levels deep will not have any impact on performance, and even deeper chains still probably won't have any noticeable effect based on my experience.

Example

Code Block
themeRDark
languagejavascript
linenumberstrue
// define your superclass in usual way
var mySuperclass = function BigBertha(args) { /* stuff */ } // constructor
mySuperclass.prototype.blehmoo = function(args) { return /* stuff */"moo"; } // method
mySuperclass.prototype.bleh = function(args) { return "bertha"; } // methodsmethod
mySuperclass.prototype.foo = "bar"; // property
mySuperclass.prototype.goo = "goo"; // propertiesproperty
 
// define constructor of your class
var myClass = function FooClass(args) { /* stuff */ }
// then immediately inherit the superclass before adding
// anything to the prototype of your class
myClass.inherit(mySuperclass);
// then you can start adding stuff to the class prototype
myClass.prototype.bleh = function(args) { /* different stuff */ } // methods
myClass.prototype.foo = "wobble"; // propertiesreturn "bleh"; } // method
myClass.prototype.foo = "wobble"; // property
 
// instantiate instances of your class in the usual way
var foo = new myClass("whatever");
 
foo.foo; // "wobble" (not "bar")
foo.bleh(); // "bleh" (not "bertha")
foo.goo; // "goo"
foo.moo(); // "moo"
Div
classbox
Availability
Status
colourYellow
titleBeta

Requires:

Div
classbox
Contents

Jump to:

Table of Contents
maxLevel5

Div
classbox

See also

  • Class inheritance – original post about inherit() in the WZ forums, with a worked example of a prototype chain if you're not familiar with that sort of stuff
  • OOP ECMAscript implementation – Brilliant blog post by Dmitry Soshnikov about prototypal inheritance in JS, on which inherit() is based
Div
classbox

Inheritance Model

Topics:

Child pages (Children Display)
alltrue
depthall
pageInheritance Model
excerpttrue