为什么单击按钮时我的 child class(ES5 OOP) 不是 运行？

Question

问题是当我点击带有 id squareBtn 的按钮时它没有 运行 Square class。我 select 创建形状 class 的按钮以相同的方式工作，效果很好。我的 child 方块 class 中有一个警报，甚至 运行ning 都没有。我知道这可能有些愚蠢，但我找不到解决方案，所以我来这里寻求帮助，请怜悯。

class Shape {
  constructor() {
    this.div = $('<div class="position-absolute"></div>');
    this.positioning();
    $(this.div).css('background-color', allHSLAcolors[randomNumber(0, 360)]);
    $(this.div).dblclick(() => this.div.remove());
    $('#container').append(this.div);
  }
  positioning() {
    $(this.div).css('top', randomNumber(0, 400) + "px");
    $(this.div).css('left', randomNumber(0, 100) + "%");
  }
}

class Square extends Shape {
  constructor() {
    this.length = $('#square').val();
    $(this.div).css('height', this.length + 'px');
    $(this.div).css('width', this.length + 'px');
    alert('hi');
  }
}

$('#hey').on('click', () => new Shape);
$('#squareBtn').on('click', () => new Square);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex justify-content-center">
  <button id="squareBtn" class="btn mx-1 btn-primary" for="square">Square</button>
  <input id="square" type="number" placeholder="Length">
</div>

Answer 1

1. 只是new Square。

$('#squareBtn').on('click', () => new Square);

2. 您需要在构造函数中调用super。

class Square extends Shape {
  constructor() {
    super();
    // ...
  }
}