Javascript继承方法重写不起作用

Question

我无法理解 Javascript 中方法重写的工作原理。

在下面的代码中，我从 Table 类继承了 CustomFieldTable 类，并且它都具有 createList 函数。

如何重写以下代码中的 createList 函数，以便可以从 CustomFieldTable 类中运行 createList 函数>重新加载功能？

当前控制台输出:

'Should be silent overridden createList Function'

所需的控制台输出:

'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>

Answer 1

您可以这样重组:

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();

准确地说......您的代码的更正将是:

$(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>

需要注意的一些事情，当您在构造函数中设置这些函数时，每当您创建对象时，您都会创建函数对象的新实例。相反，使用 .prototype 在对象上设置方法。然后使用 Object.create 扩展原型(prototype)并从构造函数中调用 super。