Javascript 子类化、 super 构造函数和使用自定义扩展会丢失基类方法

Question

在另一个关于是否调用 super 构造函数或使用原型(prototype)链的问题中，其中一位用户提供的答案似乎很合理，但当我在具有多层继承的解决方案上实现它时，它对我不起作用。

这是我指的答案:https://stackoverflow.com/a/4389429/392591

所以我使用这个自定义扩展方法创建了一个 jsFiddle 来说明问题:https://jsfiddle.net/68q7yghv/
我在底部添加了 jsFiddle 代码。

在我的测试中，我创建了一个从 baseClass 到 subSubSubClass 的 4 层类继承结构，其中每个继承结构(baseClass 除外)都使用“extend”方法从前一个子类继承。当您点击测试按钮时，我将打印 class.baseClassMethod 以查看是否找到它，但它只为基类找到它。

您应该看到以下结果:function () { this.output += "baseClassMethod"; }
未定义
未定义
未定义

原因是否可能是对 super 构造函数的调用扰乱了“this”上下文？

function extend(baseClass, subClass) {
  var originalPrototype = subClass.prototype;
  subClass.prototype = Object.create(baseClass.prototype);
  for (var key in originalPrototype) {
    subClass.prototype[key] = originalPrototype[key];
  }
  subClass.prototype.constructor = subClass;
  Object.defineProperty(subClass.prototype, 'constructor', {
    enumerable: false,
    value: subClass
  });
};

var baseClass = function() {
  this.output = "Base: ";
  this.toggleWizardHandlers = [];
  this.baseClassMethod = function() {
    this.output += "baseClassMethod";
  };
};

baseClass.prototype.on = function(eventName, handler) {
  switch (eventName.toLowerCase()) {
    case "togglewizards":
      return this.toggleWizardHandlers.push(handler);
      break;
  }
};

baseClass.prototype.toggleWizards = function(newWizard, newStepIndex) {
  var handler, i, len, ref;
  ref = this.toggleWizardHandlers;
  for (var i = 0; i < ref.length; i++) {
    handler = ref[i];
    setTimeout(handler, 0, newWizard, newStepIndex);
  }
};

var subClass = function() {
  baseClass(this);
};
extend(baseClass, subClass);

var subSubClass = function() {
  subClass(this);
};
extend(subClass, subSubClass);

var subSubSubClass = function() {
  subSubClass(this);
};
extend(subSubClass, subSubSubClass);

var manager = function(settings) {

  this.log = function(message) {
    $("#log").html($("#log").html() + "<br />" + message);
  };
  this.clearLog = function() {
    $("#log").html("");
  };

  this.testBaseClass = new baseClass();
  this.testSubClass = new subClass();
  this.testSubSubClass = new subSubClass();
  this.testSubSubSubClass = new subSubSubClass();

  //test.on("toggleWizards", function(param) {    that.log(param);  });
};

$(function() {
  var manage = new manager("");

  $("#btn").click(function() {
    manage.log("start test");
    manage.clearLog();

    try {
      manage.log(manage.testBaseClass.baseClassMethod);
    } catch (e) {
      manage.log(e);
    }

    try {
      manage.log(manage.testSubClass.baseClassMethod);
    } catch (e) {
      manage.log(e);
    }

    try {
      manage.log(manage.testSubSubClass.baseClassMethod);
    } catch (e) {
      manage.log(e);
    }

    try {
      manage.log(manage.testSubSubSubClass.baseClassMethod);
    } catch (e) {
      manage.log(e);
    }
  });

});

Answer 1

您的原型(prototype)继承正在运行，您可以尝试在所有实例上访问 on 或 toggleWizards。

构造函数中的 super 调用缺少一个关键部分: .call 。如果没有它，您将传递 this 作为第一个参数，而不是作为 this 参数。如果没有以下内容，您的基类将无法初始化子类实例上的任何属性:

function subClass() {
    baseClass.call(this);
//            ^^^^
}