Javascript - 繼承和調用來自child的父方法

Question

我現在用javascript在javascript中爭取幾天，但我找不到解決方案。

我已經創建了3個對象，一個超類，一個子類和一個inheritance_manager，它應該在我的子類上完成所有“原型”-magic。

繼承經理：

Inheritance_Manager = {};
Inheritance_Manager.extend = function(subClass, baseClass) {
    function inheritance() {
    }
    inheritance.prototype = baseClass.prototype;
    subClass.prototype = new inheritance();
    subClass.prototype.constructor = subClass;
    subClass.baseConstructor = baseClass;
    subClass.superClass = baseClass.prototype;
};

超級（父）類：

SDSection = function(sectionId, resourceId) {

    this.self = this;
    this.sectionId = sectionId;
    this.resourceId = resourceId;

    ...
};

SDSection.prototype.doSetups = function() {
        ...
};

兒童班：

TypedSectionHandler = function(sectionId, resourceId) {
    SDSection.call(this, sectionId, resourceId);
        ...
};

Inheritance_Manager.extend(TypedSectionHandler, SDSection);

TypedSectionHandler.prototype.doSetups = function() {
        ...
    SDSection.doSetups.call(this);
        ...
};

我想做的是在其他編程語言如php或java中很簡單。 我想從類型為“TypedSectionHandler”的子類中的方法“doSetups”中調用父類“SDSection”中的覆蓋“doSetups”方法。

我現在正在努力解決這個問題大約一周，我嘗試了不同的解決方案，從基本到更復雜，但似乎沒有任何效果。

每次執行腳本時，例如在chrome或firefox中，我將得到錯誤“無法調用未定義的方法調用”或更簡單，“SDSection.doSetups”未定義。

至少我從這里采取了上述方法，並根據我的需要進行了調整，但無論如何它都無法正常工作，瀏覽器也會退出同樣的錯誤。 慢慢地，我變得嚴肅起來。 :)

有人知道我做錯了什么以及工作解決方案會是什么樣子？

謝謝

你做

Answer 1

您需要調用doSetups函數，該函數是父類prototype 。

TypedSectionHandler.prototype.doSetups = function() {
        ...
    SDSection.prototype.doSetups.call(this);
        ...
};

如果您想查看不同的繼承技術（特別是那些不需要調用者知道父類型的技術），您可能需要查看CoffeeScript的__extends函數以及它如何執行繼承。

Answer 2

如果你正在使用純JavaScript，請使用voithos的解決方案。 我喜歡在我當前的項目中使用John Resig的簡單繼承片段 。 縮小后只有521個字節，沒有依賴關系，在你的情況下，它會像這樣工作：

SDSection = Class.extend({
    init: function(sectionId, resourceId) {

        this.sectionId = sectionId;
        this.resourceId = resourceId;

        ...
    },
    doSetups: function(){
        ...
    }
});

TypedSectionHandler = SDSection.extend({
    doSetups: function(){
        ...
        this._super();
        ...
    }
});

Answer 3

如果你想自己做，你可以像voithos說的那樣 - 自己寫它可以幫助你理解js OOP。

如果你想要更舒適 （=不必使用apply和call並且 - 如果你在Visual Studio 2012中開發 - base-methods / -constructor intellisense支持 ），我希望你查看我寫的框架： jsframework

有了它，您可以非常輕松地編寫示例：

SDSection = new Class(Object, function(base, baseConstructor)
{
    // member fields for prototype
    this.self = null;
    this.sectionId = -1;
    this.resourceId = -1;

    // constructor
    this.init = function(sectionId, resourceId)
    {
        this.self = this;
        this.sectionId = sectionId;
        this.resourceId = resourceId;
    };

    // member functions
    this.doSetups = function() 
    {
        console.log("SDSection doSetups: " + this.sectionId + "/" + this.resourceId);
    };
});

TypedSectionHandler = new Class(SDSection, function(base, baseConstructor)
{
    this.anotherId = -2;

    // constructor
    this.init = function(sectionId, resourceId, anotherId) 
    {
        baseConstructor(sectionId, resourceId);

        this.anotherId = anotherId;
    };

    // member functions
    this.doSetups = function() 
    {
        // call base function
        base(this).doSetups();
        console.log("TypedSectionHandler doSetups: " + this.anotherId);
    };
});

var t = new TypedSectionHandler(1, 2, 3);
t.doSetups();
console.log(t instanceof TypedSectionHandler);
console.log(t instanceof SDSection);

這是一個有用的jsfiddle： http ： //jsfiddle.net/QYXSr/1/

輸出：

SDSection doSetups: 1/2
TypedSectionHandler doSetups: 3
true
true 

免責聲明：

正如我所說，我是這個框架的開發者;）