对象不继承原型函数

Question

我有一个构造函数，它充当超类：

Bla = function(a){this.a = a;}

我将其原型设计为包含一个简单的方法：

Bla.prototype.f = function(){console.log("f");

现在，新Bla(1).f();将在控制台中记录"f"。但是，假设我需要一个继承自 Bla 的子类：

Bla2 = function(a)
{
    this.base = Bla;
    this.base();
}
x = new Bla2(5);

现在，正如预期的那样，x.a给了我5.但是，x.f undefined！看来Bla2没有从Bla班继承它！为什么会发生这种情况，我该如何纠正？

Answer 1

看来Bla2没有从Bla班继承它！

右。您没有做任何事情来连接那里的继承，您只是创建了一个名为 base 的Bla2成员，这是一个Bla实例。 base 不是 JavaScript 中的特殊标识符。

在 JavaScript 中设置继承的典型方法如下所示：

// The base constructor function
function Base(x) {
    // Base per-instance init
    this.x = x;
}
// An example Base function
Base.prototype.foo = function() {
    console.log("I'm Base#foo, x = " + this.x);
};
// The Derived constructor function
function Derived(x, y) {
    // Normally you need to call `Base` as it may have per-instance
    // initialization it needs to do. You need to do it such that
    // within the call, `this` refers to the current `this`, so you
    // use `Function#call` or `Function#apply` as appropriate.
    Base.call(this, x);
    // Derived per-instance init
    this.y = y;
}
// Make the Derived.prototype be a new object backed up by the
// Base.prototype.    
Derived.prototype = Object.create(Base.prototype);
// Fix up the 'constructor' property
Derived.prototype.constructor = Derived;
// Add any Derived functions
Derived.prototype.bar = function() {
    console.log("I'm Derived#bar, x = " + this.x + ", y = " + this.y);
};

。Object.create来自 ES5，但它是很容易被填充的东西之一。（或者你可以使用一个只做最低限度的函数，而不尝试做所有Object.create;见下文。然后你使用它：

var d = new Derived(4, 2);
d.foo(); // "I'm Base#foo, x = 4"
d.bar(); // "I'm Derived#bar, x = 4, y = 2"

现场示例 | 来源

在较旧的代码中，您有时会看到Derived.prototype设置如下：

Derived.prototype = new Base();

。但是这样做存在一个问题：Base可能会执行每个实例的初始化，这不适合整个Derived继承。它甚至可能需要论证（就像我们的Base一样;我们会通过什么x？）。通过使Derived.prototype只是由Base.prototype支持的新对象，我们得到了正确的东西。然后，我们从 Derived 内部调用 Base 以获取每个实例的 init。

以上是非常基本的，如您所见，涉及许多步骤。它也很少或根本没有使"超级调用"变得容易和高度可维护。这就是为什么你会看到这么多"继承"脚本，比如Prototype的Class，Dean Edwards的Base2，或者（咳）我自己的Lineage。

---

如果您不能依赖环境中的 ES5 功能，并且不想包含执行Object.create基础知识的填充程序，则可以在其位置使用此函数：

function simpleCreate(proto) {
    function Ctor() {
    }
    ctor.prototype = proto;
    return new Ctor();
}

然后代替

Derived.prototype = Object.create(Base.prototype);

你会做：

Derived.prototype = simpleCreate(Base.prototype);

当然，你可以做更多的事情来自动化连接—— 这就是Lineage基本上所做的一切。

---

。最后：为了简单起见，我在上面使用了匿名函数，例如：

Base.prototype.foo = function() {
    // ...
};

。但我不会在我的真实代码中这样做，因为我喜欢帮助我的工具帮助我。所以我倾向于在每个"类"（构造函数和相关原型）周围使用模块模式并使用函数声明（因为我确实为 Web 工作，而 IE7 和 IE8 在命名函数表达式方面仍然存在问题。所以如果我不使用Lineage，我会像这样做上面的事情：

// Base
(function(target) {
    // Base constructor
    target.Base = Base;
    function Base(x) {
        // Base per-instance init
        this.x = x;
    }
    // An example Base function
    Base.prototype.foo = Base$foo;
    function Base$foo() {
        console.log("I'm Base#foo, x = " + this.x);
    }
})(window);
// Derived
(function(target, base) {
    // The Derived constructor function
    target.Derived = Derived;
    function Derived(x, y) {
        // Init base
        base.call(this, x);
        // Derived per-instance init
        this.y = y;
    }
    // Make the Derived.prototype be a new object backed up by the
    // Base.prototype.    
    Derived.prototype = Object.create(base.prototype);
    // Fix up the 'constructor' property
    Derived.prototype.constructor = Derived;
    // Add any Derived functions
    Derived.prototype.bar = Derived$bar;
    function Derived$bar() {
        console.log("I'm Derived#bar, x = " + this.x + ", y = " + this.y);
    }
})(window, Base);

。或类似的东西。实时复制 |源