"subclass"中的 Javascript 构造函数，正确的表示法？

Question

我正在尝试掌握 javascript 继承。我的示例代码是这样开始的:

var example = example || {};
example.Classes = {};

(function() {
    var example = example || {};
    example.Classes = {};

    var privateVar = 25;
    function Superclass() {
        this.x = privateVar;
    }
    Superclass.prototype = {
        move: function(x){
            this.x += x;
            console.log("Superclass move",this.x);
        },
        dance: function(x){
            this.x += x*2;
        }
    };

    function Subclass() {
        Superclass.apply(this, arguments);
        this.y = 0;
    };
    Subclass.prototype = Object.create(Superclass.prototype);
    Subclass.prototype.constructor = Subclass;

这是成功的延续:

    Subclass.prototype.dance = function(x, y) {
      this.x -= (x + privateVar);
      this.y -= y;
      console.log("Subclass dance", this.x, this.y)
    };
    example.Classes.Superclass = Superclass;
    example.Classes.Subclass = Subclass;
    window.example.Classes = example.Classes;
}());

var success = new example.Classes.Subclass();
success.dance(5,4);
success.move(6);

控制台输出:子类dance -5 -4
控制台输出:父类(super class)移动 1

现在继续失败了——这里出了什么问题？为什么不能用这种写子类构造函数的方式？

    Subclass.prototype = {
        dance: function(x, y) {
            this.x -= (x + privateVar);
            this.y -= y;
            console.log("Subclass dance", this.x, this.y)
        }
    };

    example.Classes.Superclass = Superclass;
    example.Classes.Subclass = Subclass;
    window.example.Classes = example.Classes;
}());

var failure = new example.Classes.Subclass();
failure.dance(5,4);
failure.move(6);  

控制台输出:子类dance -5 -4
控制台输出:错误:failure.move 不是函数

Answer 1

Why can't I use this way of writing the subclass constructor functions?

因为你正在吹走曾经在 Subclass.prototype 属性上的对象(来自 Object.create(Superclass.prototype) 的对象)和 < em>用一个原型(prototype)为 Object.prototype 且只有一个属性 dance 的对象替换。

一旦您创建了 Subclass.prototype 对象，您总是希望像最初那样扩充它:

Subclass.prototype.dance = /*...*/;

不是替换它:

// Not this
Subclass.prototype = { dance: /*...*/ };

ES2015 添加了一个方便的函数，用于将一个对象(或一系列对象)的属性合并到目标对象中:Object.assign .它可以(主要)针对旧的 JavaScript 引擎进行 polyfill。使用它，您可以:

Object.assign(Subclass.prototype, {
    dance: function dance() { /* ... */ },
    skip:  function skip()  { /* ... */ },
    jump:  function jump()  { /* ... */ }
});

---

话虽如此，在 2016 年，我建议使用 ES2015 中添加的 class 功能(如有必要，对较旧的 JavaScript 引擎进行转译):

class Superclass {
    constructor() {
        //...
    }

    method() {
        // ...
}

class Subclass extends Superclass {
    constructor() {
        super();
        // ...
    }

    anotherMethod() {
        // ...
    }
}