對象不調用javascript中的子類功能

Question

我已經創建了Javascript中類的模型。我將基類的對象傳遞給子類，以便我可以覆蓋它的屬性。但是當我通過實例化一個子類來調用一個函數時，它仍然調用一個基類函數。我認爲它應該調用一個子類功能。以下是代碼。

function BaseClass(name,lastName){ 
    this.name = name; 
    this.lastName = lastName; 
} 

BaseClass.prototype.getName = function() { 
    return this.name; 
} 
BaseClass.prototype.getLastName = function() { 
    return this.lastName; 
} 
BaseClass.prototype.saveName = function() { 
    console.log("In base class function."); 
} 

function ChildClass(){ 
    this.name = this.getName(); 
    this.lastName = this.getLastName(); 
} 
ChildClass.prototype.saveName = function() { 
    console.log("In child class function.");  
} 

ChildClass.prototype = new BaseClass(name,LastName); 
var childClass = new ChildClass(); 
childClass.saveName(); 

Answer 1

正如提到的其他答案，你有一個與繼承模型有關的重大問題。

在這一行：

ChildClass.prototype = new BaseClass(name,LastName); 

的name和LastName可能是不確定的，因爲你是在全球範圍內（或者你定義的類範圍）找他們。它們與作爲參數傳遞給ChildClass的構造函數的內容完全沒有關係。

相反，你想從孩子的構造函數調用基類的構造函數，像這樣：

function ChildClass(name, lastName){ // parameters should be declared 
    BaseClass.call(this, name, lastName); // call the base class 
} 

通過調用BaseClass的的第一個參數this，你基本上是運行BaseClass的功能與this代碼成爲您的ChildClass的新實例。 BaseClass中的代碼已設置childClass.name和childClass.lastName屬性，因此您不需要在ChildClass中執行此操作。

要完成繼承模型，您還需要繼承從基類的原型方法：

ChildClass.prototype = Object.create(BaseClass.prototype); 

請注意，你不從BaseClass的實例繼承了他們，因爲你不知道你應該調用構造函數的參數，並且沒有參數調用它並不總是正確的。

最後一點，請確保線路設置ChildClass.prototype是ChildClass.prototype定義以前任何方法/屬性，否則你只是覆蓋它。

全碼：

//===== BaseClass 
function BaseClass(name,lastName){ 
    this.name = name; 
    this.lastName = lastName; 
} 

BaseClass.prototype.getName = function() { 
    return this.name; 
} 
BaseClass.prototype.getLastName = function() { 
    return this.lastName; 
} 
BaseClass.prototype.saveName = function() { 
    console.log("In base class function."); 
} 

//======= ChildClass 
function ChildClass(name, lastName, age){ 
    BaseClass.call(this, name, lastName); 
    this.age = age; 
} 
ChildClass.prototype = Object.create(BaseClass.prototype); 

ChildClass.prototype.saveName = function() { 
    console.log("In child class function.", this.name, this.lastName, this.age);  
} 

//=========== usage 
var childClass = new ChildClass('john', 'doe'); 
childClass.saveName(); 

Answer 2

我認爲正在發生的事情是，在這一行：

ChildClass.prototype = new BaseClass(name,LastName); 

你基本上是用new BaseClass()覆蓋的ChildClass的prototype財產。所以上一行

ChildClass.prototype.saveName = ... 

是無效的。要在JavaScript中構建繼承機制，請查看this guide或許多可用庫中的一個。 或者，在這個特定的簡單情況下，嘗試交換上面兩行的順序。

Answer 3

您的繼承模型存在問題。您可能會發現更容易與TypeScript或Dart

事情像這個模型我已經仿照這個給你：

打字稿：

class BaseClass { 
    constructor(private name: string, private lastName: string) { 
    } 

    public getName(): string { 
     return this.name; 
    } 

    public getLastName(): string { 
     return this.lastName; 
    } 

    public saveName(): void { 
     console.log("In base class function"); 
    } 
} 

class ChildClass extends BaseClass { 
    public saveName(): void { 
     console.log("In child class function"); 
    } 
} 

var childClass = new ChildClass("John", "Smith"); 
childClass.saveName(); 

的JavaScript（TS編譯器輸出）：

var __extends = this.__extends || function (d, b) { 
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; 
    function __() { this.constructor = d; } 
    __.prototype = b.prototype; 
    d.prototype = new __(); 
}; 
var BaseClass = (function() { 
    function BaseClass(name, lastName) { 
     this.name = name; 
     this.lastName = lastName; 
    } 
    BaseClass.prototype.getName = function() { 
     return this.name; 
    }; 

    BaseClass.prototype.getLastName = function() { 
     return this.lastName; 
    }; 

    BaseClass.prototype.saveName = function() { 
     console.log("In base class function"); 
    }; 
    return BaseClass; 
})(); 

var ChildClass = (function (_super) { 
    __extends(ChildClass, _super); 
    function ChildClass() { 
     _super.apply(this, arguments); 
    } 
    ChildClass.prototype.saveName = function() { 
     console.log("In child class function"); 
    }; 
    return ChildClass; 
})(BaseClass); 

var childClass = new ChildClass("John", "Smith"); 
childClass.saveName(); 

播放TypeScript Playground