javascript - 如何在 javascript 中的内置 JavaScript 类的子类中使用基类方法

Question

例如，在 C# 中，我可以扩展框架类型并将表达式分配给我的类型，它将保留基本类型的所有成员，但也具有我的扩展方法。

我正在尝试从 Range 继承 Sentence .

注意建议的重复项不适用于此处，因为 Range 不易受这些技术的影响。

如何在 JavaScript 中实现此目的？我有:

/* Namespace */
var WebPageReader = WebPageReader || {};

/* Classes */
WebPageReader.Sentence = function(range) {
    this.setStart(range.startContainer, range.startOffset); // bombs here
    this.setEnd(range.endContainer, range.endOffset);  
};

function test(){
  WebPageReader.Sentence.prototype = new Range();
  var dom = new WebPageReader.Dom();
  var s = new WebPageReader.Sentence(dom.GetSelectedRange());
  alert(s.endOffset)  ;
}
WebPageReader.Dom = function() {

  /* public methods */
  this.GetSelectedRange = function() {
    var sel;
    if (window.getSelection) {
      sel = window.getSelection();
      if ((sel.type == "Range" || allowCaretSelection) && sel.rangeCount) {
        return sel.getRangeAt(0);
      }
    }
    return null;
  }
}

这给出了错误:

Uncaught TypeError: Illegal invocation

尝试#2

当我将代码更改为:

/* Namespace */
var WebPageReader = WebPageReader || {};

/* Classes */
WebPageReader.Sentence = function(range) {
  Range.call(this);
};

function test(){
  WebPageReader.Sentence.prototype = new Range();
  var dom = new WebPageReader.Dom();
  var s = new WebPageReader.Sentence(dom.GetSelectedRange());
  alert(s.endOffset)  ;
}

我收到此错误

Uncaught TypeError: Failed to construct 'Range': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

Answer 1

您没有正确子类化。您应该使用 ES6 类。

var WebPageReader = {
  Dom: function() {
    this.GetSelectedRange = function() {
      if (!window.getSelection) return null;
      return window.getSelection().getRangeAt(0);
    }
  },
  Sentence: class extends Range {
    constructor(range) {
      super();
      this.setStart(range.startContainer, range.startOffset);
      this.setEnd(range.endContainer, range.endOffset);
    }
  }
};
document.body.addEventListener('click', function() {
  var dom = new WebPageReader.Dom();
  var s = new WebPageReader.Sentence(dom.GetSelectedRange());
  console.log(s.endOffset);
});

Select text

它之所以有效，是因为 super() 将实例初始化为真正的 Range。在 ES5 中，您只能做一些事情，例如让实例继承 Range.prototype，这不足以成为真正的 Range 实例。并且 Range 方法只能在真实的 Range 实例上调用。