Javascript - 在 ES5 中扩展 ES6 类答案

【问题标题】：Javascript - Extend an ES6 Class in ES5Javascript - 在 ES5 中扩展 ES6 类
【发布时间】：2019-11-18 10:28:48
【问题描述】：

我将以下代码用于带有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');
    }
  }
}

【问题讨论】：

你可以使用 babel
你应该使用 Babel.js 将你的 ES6 代码转换成 ES5。
顺便说一句，你不能在定义之前使用一个类
我讨厌指向图书馆，但这确实是 babel 的用途。将您的代码粘贴到replbabeljs.io/en/repl，然后从presets 菜单中选择es2015。瞧。好处是它会向你展示代码，所以如果你想知道如何手动将类转换为 ES5 语法，你也可以看到它。

标签： javascript class ecmascript-6 extend ecmascript-5

【解决方案1】：

然后，您可以将class 替换为旧式构造函数，然后操作原型以设置原型层次结构：

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 ...
};

【讨论】：

【解决方案2】：

目前，您的代码包含许多 ES6 功能 - const、class、箭头函数。您应该使用像 Babel.JS 这样的在线编译器来使您的代码与 ES5 兼容。

此外，在您的代码中，您在定义类之前使用它。将所有类定义和箭头函数移动到代码的顶部是一种很好的做法（普通的 ES5 函数位于任何代码评估之前）。所以你的代码应该看起来像：

class SiemaWithDots extends Siema {...}

const mySiemaWithDots = new SiemaWithDots({...});

【讨论】：