Javascript继承方法覆盖不起作用

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>

几件事请注意，当您在构造函数中设置这些函数时，您正在创建th的新实例e函数对象，每当你创建一个对象。相反，使用.prototype在对象上设置方法。然后使用Object.create来扩展原型，并从构造函数中调用super。