JavaScript Patterns 6.2 Expected Outcome When Using Classical Inheritance

// the parent constructor

function Parent(name) {

    this.name = name || 'Adam';

}

// adding functionality to the prototype

Parent.prototype.say = function () {

    return this.name;

};

// empty child constructor

function Child(name) {}

inherit(Child, Parent);

  

A method say() added to the parent constructor’s prototype, and a call to a function called inherit() that takes care of the inheritance. The  inherit() function is not provided by the language, so you have to implement it yourself.

 

Classical Pattern #1—The Default Pattern

Create an object using the  Parent() constructor and assign this object to the Child()’s prototype.

function inherit(C, P) {

    C.prototype = new P();
}

var kid = new Child();

kid.say(); // "Adam"

 

1. Following the Prototype Chain

 

 

2. Drawbacks when Using Pattern #1

1. Inherit both own properties added to this and prototype properties.

Note: reusable members should be added to the prototype.

2. It doesn't enable you to pass parameters to child constructor, which the child then passes to the parent.

 

Classical Pattern #2 -- Rent-a-Constructor

Passing arguments from the child to the parent.

function Child(a, c, b, d) {

    Parent.apply(this, arguments);

}

// a parent constructor

function Article() {

    this.tags = ['js', 'css'];

}

var article = new Article();

// a blog post inherits from an article object

// via the classical pattern #1

function BlogPost() {}

BlogPost.prototype = article;

var blog = new BlogPost();

// note that above you didn't need `new Article()`

// because you already had an instance available

// a static page inherits from article

// via the rented constructor pattern

function StaticPage() {

    Article.call(this);

}

var page = new StaticPage();


alert(article.hasOwnProperty('tags')); // true

alert(blog.hasOwnProperty('tags')); // false

alert(page.hasOwnProperty('tags')); // true

 

1. The Prototype Chain

The inheritance was a one-off action that copied parent’s own properties as child’s own properties and that was about it; no __proto__ links were kept.

// the parent constructor

function Parent(name) {

    this.name = name || 'Adam';

}

// adding functionality to the prototype

Parent.prototype.say = function () {

    return this.name;

};

// child constructor

function Child(name) {

    Parent.apply(this, arguments);

}

function showMsg(msg) {

    $('#msg').append(msg).append('<br/>');

}

$(function () {

    var kid = new Child("Patrick");

    showMsg(kid.name); // "Patrick"

    showMsg(typeof kid.say); // "undefined"

});

2. Multiple Inheritance by Borrowing constructors

Implement multiple inheritance simply by borrowing from more than one constructor

function Cat() {

    this.legs = 4;

    this.say = function () {

        return "meaowww";

    }

}

function Bird() {

    this.wings = 2;

    this.fly = true;

}

function CatWings() {

    Cat.apply(this);

    Bird.apply(this);

}
var jane = new CatWings();

console.dir(jane);

3. Pros and Cons of the Borrowing Constructor Pattern

Pros: Get true copies of the parent's own members and there's no risk that a child can accidentally overwrite a parent's property.

Cons: Nothing from the prototype gets inherited.

 

Classical Pattern #3—Rent and Set Prototype

function Child(a, c, b, d) {

    Parent.apply(this, arguments);

}

Child.prototype = new Parent();

The benefit is that the result objects get copies of the parent’s own members and references to the parent’s reusable functionality (implemented as members of the prototype). The child can also pass any arguments to the parent constructor. This behavior is probably the closest to what you’d expect in Java; you inherit everything there is in the parent, and at the same time it’s safe to modify own properties without the risk of modifying the parent.

A drawback is that the parent constructor is called twice, so it could be inefficient. At the end, the own properties (such as name in our case) get inherited twice. 

// the parent constructor
function Parent(name) {
    this.name = name || 'Adam';
}
// adding functionality to the prototype
Parent.prototype.say = function () {
    return this.name;
};
// child constructor
function Child(name) {
    Parent.apply(this, arguments);
}
Child.prototype = new Parent();

function showMsg(msg) {
    $('#msg').append(msg).append('<br/>');
}
var kid = new Child("Patrick");
kid.name; // "Patrick"
kid.say(); // "Patrick"
delete kid.name;

kid.say(); // "Adam"

 

Classical Pattern #4—Share the Prototype

This gives you short and fast prototype chain lookups because all objects actually share the  same  prototype.

function inherit(C, P) {

    C.prototype = P.prototype;

}

Drawback

if  one  child  or  grandchild somewhere down the inheritance chain modifies the prototype, it affects all parents and grandparents.

 

Classical Pattern #5—A Temporary Constructor

An empty function  F(), which serves as a proxy between the child and the parent. F()’s  prototype property points to the prototype of the parent. The prototype of the child is an instance of the blank function:

function inherit(C, P) {

    var F = function () {};

    F.prototype = P.prototype;

    C.prototype = new F();

}

In this pattern, any members that the parent constructor adds to this are not inherited.

1. Storing the Superclass

The property is called uber because “super” is a reserved word and “superclass” may

lead the unsuspecting developer down the path of thinking that JavaScript has classes.

Here’s an improved implementation of this classical pattern:

function inherit(C, P) {

    var F = function () {};

    F.prototype = P.prototype;

    C.prototype = new F();

    C.uber = P.prototype;

}

 

2. Resetting the Constructor Pointer

If you don’t reset the pointer to the constructor, then all children objects will report that Parent() was their constructor, which is not useful.

// parent, child, inheritance

function Parent() {}

function Child() {}

inherit(Child, Parent);

 

// testing the waters

var kid = new Child();

kid.constructor.name; // "Parent"

kid.constructor === Parent; // true

 

function inherit(C, P) {

    var F = function () {};

    F.prototype = P.prototype;

    C.prototype = new F();

    C.uber = P.prototype;

    C.prototype.constructor = C;

}

 

Create temporary (proxy) constructor once and only change its prototype. You can use an immediate function and store the proxy function in its closure:

var inherit = (function () {

        // This will only be executed once which means only one function object is created for every inheritance.

        var F = function () {};     

        return function (C, P) {

        F.prototype = P.prototype; // F.prototype.constructor is pointed to Parent.

        C.prototype = new F();

        C.uber = P.prototype;

        C.prototype.constructor = C;

       }

}());

References: 

JavaScript Patterns - by Stoyan Stefanov (O`Reilly)