Javascript Class 继承没有正常工作

Question

正在尝试创建一些 Javascript classes 和父级 classes，但不确定我是否正确执行此操作，但子级中的 super() class 没有正常工作。试图让 DivElement 中的内容正常工作，但它一直返回未定义。

代码：

 class HTMLElement{
    constructor(tag, content){
        this.tag = tag;
        this.content = content;
    }

    render(){
        return `<${this.tag}>${this.content}</${this.tag}>`;
    }

class DivElement extends HTMLElement{
constructor(content){
    super(content);
    this.tag = 'div';
   }

 }

let div1 = new DivElement('test');
console.log(div1);
console.log(div1.render());

Answer 1

超级调用应该匹配目标方法的签名。它应该是 super('div', content);:

class HTMLElement{
    constructor(tag, content){
        this.tag = tag;
        this.content = content;
    }

    render(){
        return `<${this.tag}>${this.content}</${this.tag}>`;
    }
 }

class DivElement extends HTMLElement{
    constructor(content){
    super('div', content);  // changed here
    this.tag = 'div';
   }

 }

let div1 = new DivElement('test');
console.log(div1);
console.log(div1.render());
// <div>test</div>

Answer 2

HTMLElement class 的构造函数使用两个参数（标记和内容）调用。 extendedclass只调用一个参数的构造函数，将内容赋值给parentclass的tag参数。注意JS不允许构造函数重载

参见甘油的回答。

Javascript Class 继承没有正常工作

Javascript Class Inheritance not working as it should

javascript

inheritance

class