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。