Javascript inheritance method overriding doesn't work

Question

I have trouble understanding how the method overriding works in Javascript.

In the code below, I have CustomFieldTable class subclassing from Table class, and it both have createList function.

How can I override the createList function from the below code so that createList function from the CustomFieldTable class can be run from the reload function?

Current console output:

'Should be silent overridden createList Function'

Desired console output:

'Custom Field create list'
'obj1'
'obj2'
'obj3'

$(document).ready(function() {
  var table = new CustomFieldTable();
  table.init();
});


function Table() {
  var self = this;
  self.table_data = [];

  self.reload = function() {
    self.table_data = ["obj1", "obj2", "obj3"];
    self.createList();
  }

  self.createList = function() {
    alert("Should be silent overridden createList Function");
  }
}

CustomFieldTable.prototype = new Table();
CustomFieldTable.prototype.constructor = CustomFieldTable;

function CustomFieldTable() {
  var self = this;

  self.init = function() {
    self.reload();
  }

  self.createList = function() {
    alert("Custom Field create list");

    for (var i = 0; i < self.table_data.length; i++) {
      alert(self.table_data[i]);

    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Goblinlord · Accepted Answer · 2016-01-24 05:44:48Z

You can restructure this this way:

function myClass() {
  // Constructor function
  this.myProp = "This is myProp on myClass";
}

myClass.prototype.firstMethod = function() {
  document.write("I am firstMethod on myClass<br\>");
}

myClass.prototype.secondMethod = function() {
  document.write("I am to be overwritten<br\>");
}



function myExtendedClass() {
  // This calls "super" class constructor with the correct "this"
  myClass.call(this);
  this.myOtherProp = "This is a prop only on my extended class<br\>";
}

// Set with super class prototype and set proper constructor
myExtendedClass.prototype = Object.create(myClass.prototype);
myExtendedClass.prototype.contructor = myExtendedClass;

// Overwrite or set new methods on extended class object
myExtendedClass.prototype.secondMethod = function() {
  document.write("I overwrote my super's method<br\>");
}

var a = new myExtendedClass();
console.log(a);
a.firstMethod();
a.secondMethod();

To be exact... a correction of your code would be:

$(document).ready(function() {
  var table = new CustomFieldTable();
  table.init();
});


function Table() {
  this.table_data = [];
}

Table.prototype.reload = function() {
  this.table_data = ["obj1", "obj2", "obj3"];
  this.createList();
}

Table.prototype.createList = function() {
  alert("Should be silent overridden createList Function");
}



function CustomFieldTable() {
  Table.call(this);
}

CustomFieldTable.prototype = Object.create(Table.prototype);
CustomFieldTable.prototype.constructor = CustomFieldTable;


CustomFieldTable.prototype.init = function() {
  this.reload();
}

CustomFieldTable.prototype.createList = function() {
  alert("Custom Field create list");

  for (var i = 0; i < this.table_data.length; i++) {
    alert(this.table_data[i]);

  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

A few things to note, when you set these functions inside the constructor you are creating new instances of the function object whenever you create an object. Instead, use the .prototype to set methods on the object. Then use Object.create to extend the prototype and call the super from the constructor.

Thanks for the explanation. It is more clear how it works now.

Collectives™ on Stack Overflow

Javascript inheritance method overriding doesn't work

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related