What is wrong with my approach to Javascript Inheritance?

Question

I know there are tons of ways of doing JS inheritance. I am trying to do something here, where I am passing in rows into my sub class, and i want to pass it through to the super class at constructor time :

function AbstractTableModel(rows) {

    this.showRows = function() {
        alert('rows ' + this.rows);
    }
}

function SolutionTableModel(rows)  {

    this.prototype = new AbstractTableModel(rows);

    this.show = function() {
        this.protoype.showRows();
    };
}

var stm = new SolutionTableModel(3);

stm.show();

fiddle :

http://jsfiddle.net/YuqPX/2/

It doesnt seem to work because the prototype methods are not flowing down :( Any ideas?

Answer 1

Live Demo

First you must define this.rows

function AbstractTableModel(rows) {
    this.rows = rows;
    this.showRows = function() {
        alert('rows ' + this.rows);
    };
}

Second, if you want to inherit from AbstractTableModel you ought to do so...

function SolutionTableModel(rows)  {
    AbstractTableModel.call(this, rows);

    this.show = function() {
        this.showRows();
    };
}

SolutionTableModel.prototype = new AbstractTableModel();

var stm = new SolutionTableModel(3);

stm.show();

/==============================================================================/

Also you can use Parasitic Combination Inheritance Pattern, if you want to avoid calling base constructor twice:

function inheritPrototype(subType, superType) {
    var prototype = Object.create(superType.prototype, {
        constructor: {
            value: subType,
            enumerable: true
        }
    });
    subType.prototype = prototype;
}

function AbstractTableModel(rows) {
    this.rows = rows;
    this.showRows = function () {
        alert('rows ' + this.rows);
    };
}

function SolutionTableModel(rows) {
    AbstractTableModel.call(this, rows);

    this.show = function () {
        this.showRows();
    };
}

inheritPrototype(AbstractTableModel, SolutionTableModel);

var stm = new SolutionTableModel(3);

stm.show();

Answer 2

function AbstractTableModel(rows) {
  this.rows = rows;
  this.showRows = function() {
    alert('rows ' + this.rows);
  }
}

function SolutionTableModel(rows) {
  var soln = Object.create(new AbstractTableModel(rows));
  soln.show = function() {
    this.showRows();
  };
  return soln;
}
var solution = new SolutionTableModel(5);
solution.show();

This is one way of doing the object inheritance. This method is most elegant in my opinion and can be found in detail here

Fiddle

Answer 3

function AbstractTableModel(rows) {
    this.rows = rows;        
}

AbstractTableModel.prototype.showRows = function() {
    console.log('rows ' + this.rows);
}

function SolutionTableModel(rows)  {
    AbstractTableModel.call(this, rows);

    this.show = function() {
        this.showRows();
    };
}

SolutionTableModel.prototype = Object.create(AbstractTableModel.prototype);

var stm = new SolutionTableModel(3);

stm.show();

Answer 4

here is a working example based on what you have done DEMO :

function AbstractTableModel(rows) {
    this.showRows = function () {
        alert('rows ' + rows);
    }
}

function SolutionTableModel(rows) {
    var self = this;
    this.prototype = new AbstractTableModel(rows);
    this.show = function () {
        self.prototype.showRows();
    };
}

var stm = new SolutionTableModel(3);
stm.show();

1. In your class AbstractTableModel there is no this.rows just use rows directly.
2. The same catch in the second class SolutionTableModel . I prefer to define variable self that points to the created instance of the object.
3. You miss type protoype it should be prototype