Question

我无法理解方法覆盖在Javascript中的工作方式。

在下面的代码中，我从表类中获得了 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扩展原型并从构造函数中调用super。

Javascript继承方法覆盖不起作用

1 个答案: