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

在另一个有关是否调用超级构造函数或使用原型链的问题中，一个用户提供的答案似乎很明智，但是当我在具有多层继承的解决方案中实现它时，它对我却不起作用。

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

因此，我使用此自定义的extend方法创建了一个jsFiddle来说明问题：https://jsfiddle.net/68q7yghv/
我在底部添加了jsFiddle代码。

在我的测试中，我创建了一个从baseClass到subSubSubClass的4层类继承结构，每个结构（baseClass除外）都使用'extend'方法继承前一个子类。当您按下测试按钮时，我将打印出class.baseClassMethod，以查看是否找到了它，但是它仅针对基类找到了它。

您应该看到以下结果：
函数（）{this.output + =“ baseClassMethod”; }
未定义
未定义
未定义

原因是否可能是对超级构造函数的调用弄乱了“ 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);
    }
  });

});

最佳答案

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

但是，您在构造函数中的超级调用缺少关键部分：.call。没有它，您将传递this作为第一个参数，而不作为this参数。没有这些，您的基类将无法初始化子类实例上的任何属性：

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