Javascript - 从子方法继承和调用父方法

Javascript - Inheritance and calling parent methods from child

本文关键字：调用 方法 继承 子方法 Javascript      更新时间：2023-09-26

我在JavaScript中与OOP斗争了几天，但我没有找到解决方案。

我创建了 3 个对象，一个超级类、一个子类和一个inheritance_manager，它们应该在我的子类上做所有的"原型"魔法。

继承管理器：

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"方法。

我已经为这个问题苦苦挣扎了大约 1 周，我尝试了不同的解决方案，从基本到更复杂的解决方案，但似乎没有任何效果。

每次执行脚本时，例如在chrome或Firefox中，我都会收到错误"无法在未定义上调用方法调用"或更简单，未定义"SDSection.doSetups"。

至少我从这里选择了上述方法并使其适应我的需求，但它无论如何都不起作用，并且浏览器因相同的错误退出。慢慢地，我变得非常疯狂。:)

有人知道我做错了什么以及有效的解决方案会是什么样子吗？

谢谢

乌多

您需要

调用作为父类prototype一部分的 doSetups 函数。

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

如果你想看看不同的继承技术（特别是不需要调用者知道父类型的技术），你可能想看看 CoffeeScript 的 __extends 函数，以及它如何执行继承。

如果你正在做纯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();
        ...
    }
});

如果你想自己做，你可以像voithos说的那样 - 自己编写它可以帮助你理解js OOP。

如果你想有更多的舒适性（=不必使用apply和call - 如果你在Visual Studio 2012中开发 - 基方法/构造函数智能感知支持）我想让你看看我写的一个框架：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

免責聲明：

正如我所说，我是这个框架的开发者;)

相关文章：