带有原型的 Javascript 继承答案

【问题标题】：Javascript inheritance with prototype带有原型的 Javascript 继承
【发布时间】：2013-10-02 17:18:04
【问题描述】：

我用谷歌搜索了 1 小时，但找不到一个好的答案。所以这是我的问题：我怎样才能继承一个带有原型的类？

function BaseContent(a, b) {
    this.propertyA = 'propertyA';
    this.a = a;
    this.b = b;
    alert('x');
}

BaseContent.prototype.funcA = function () {
    alert(this.a + ', ' + this.b);
    alert(this.propertyA);
};

function ContentA(a, b) {
    BaseContent.call(this, a, b);
    this.funcA();
}

ContentA.prototype = new BaseContent;
ContentA.prototype.constructor = ContentA;
ContentA.prototype.parent = BaseContent.prototype;

var Content = new ContentA('c', 'd');

唯一的问题是，BaseContent 被执行了两次。我不想要那个。有没有更好的解决方案或修复方法？

【问题讨论】：

标签： javascript oop inheritance prototype

【解决方案1】：

在JavaScript中实现继承的新方法是使用Object.create，如下：

function BaseContent(a, b) {
    this.propertyA = 'propertyA';
    this.a = a;
    this.b = b;
    alert('x');
}

BaseContent.prototype.funcA = function () {
    alert(this.a + ', ' + this.b);
    alert(this.propertyA);
};

function ContentA(a, b) {
    BaseContent.call(this, a, b);
    this.funcA();
}

ContentA.prototype = Object.create(BaseContent.prototype);
ContentA.prototype.constructor = ContentA;
ContentA.prototype.parent = BaseContent.prototype;

var Content = new ContentA('c', 'd');

查看演示：http://jsfiddle.net/RdxYN/7/

您应该阅读我在 Why Prototypal Inheritance Matters 上的博文，以更深入地了解 JavaScript 中的继承。

【讨论】：

致 OP——这在现代浏览器（EcmaScript 5 标准）上可用，但不是例如IE 8.
@Will 嗯好吧，这不是什么大问题。但是如果有 IE8 的解决方案就好了。
@user2820280 只需将以下代码添加到程序的开头，它就可以在每个浏览器中运行：if (!Object.create) Object.create = (function (Factory) { return function (prototype) { Factory.prototype = prototype; return new Factory; }; }(function () {}));

【解决方案2】：

我的建议是这样设置

function BaseContent(a, b) {
    this.propertyA = 'propertyA';
    this.a = a;
    this.b = b;
    alert('x');
}

BaseContent.prototype = {
    funcA: function () {
        alert(this.a + ', ' + this.b);
        alert(this.propertyA);
    }
};

function ContentA(a, b) {
    BaseContent.call(this, a, b);
    this.funcA();
}

ContentA.prototype = BaseContent.prototype;
ContentA.prototype.constructor = ContentA;

var Content = new ContentA('c', 'd');

这里的例子是 JSFiddle http://jsfiddle.net/LD8PX/

【讨论】：

【解决方案3】：

IE 7/8 兼容，可以参考Simple javascript inheritance

查看 jsfiddle：http://jsfiddle.net/rHUFD/

var BaseContent = Class.extend({
    init: function (a, b) {
        this.a = a;
        this.b = b;
        this.propertyA = 'propertyA';
        alert('x');
    },
    funcA: function () {
        alert(this.a + ', ' + this.b);
        alert(this.propertyA);
    }
}); 

var ContentA = BaseContent.extend({
    init: function (a, b) {
        this._super(a, b);
        this.funcA();
    }
}); 

var Content = new ContentA('c', 'd');

【讨论】：