Javascript - 在 ES5 中扩展 ES6 类

Question

我将以下代码用于带有Siema的滑块：

https://codepen.io/pawelgrzybek/pen/boQQWy

它使用扩展类向幻灯片添加点。一切正常，除了我们的网站现在在使用 ES6 进行 Google 移动友好测试时遇到问题，因为它给出了错误：

Uncaught SyntaxError: Unexpected reserved word

在这一行：

class SiemaWithDots extends Siema {

有没有办法让它与 ES5 兼容？

代码如下：

// instantiate new extended Siema
const mySiemaWithDots = new SiemaWithDots({
  // on init trigger method created above
  onInit: function(){
    this.addDots();
    this.updateDots();
  },

  // on change trigger method created above
  onChange: function(){
    this.updateDots()
  },
});

// extend a Siema class by two methods
// addDots - to create a markup for dots
// updateDots - to update classes on dots on change callback
class SiemaWithDots extends Siema {

  addDots() {
    // create a contnier for all dots
    // add a class 'dots' for styling reason
    this.dots = document.createElement('div');
    this.dots.classList.add('dots');

    // loop through slides to create a number of dots
    for(let i = 0; i < this.innerElements.length; i++) {
      // create a dot
      const dot = document.createElement('button');

      // add a class to dot
      dot.classList.add('dots__item');

      // add an event handler to each of them
      dot.addEventListener('click', () => {
        this.goTo(i);
      })

      // append dot to a container for all of them
      this.dots.appendChild(dot);
    }

    // add the container full of dots after selector
    this.selector.parentNode.insertBefore(this.dots, this.selector.nextSibling);
  }

  updateDots() {
    // loop through all dots
    for(let i = 0; i < this.dots.querySelectorAll('button').length; i++) {
      // if current dot matches currentSlide prop, add a class to it, remove otherwise
      const addOrRemove = this.currentSlide === i ? 'add' : 'remove';
      this.dots.querySelectorAll('button')[i].classList[addOrRemove]('dots__item--active');
    }
  }
}

Answer 1

You would then replace the class with an old-style constructor function, and then manipulate the prototype to set up the prototype hierarchy:

function SiemaWithDots() {
    Siema.apply(this, arguments);
}

SiemaWithDots.prototype = Object.create(Siema.prototype);
SiemaWithDots.prototype.constructor = SiemaWithDots;
SiemaWithDots.prototype.addDots = function () {
    // ... your code ...
};
SiemaWithDots.prototype.updateDots = function () {
    // ... your code ...
};