首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如果没有'new‘,则无法调用ES6/Babel类构造函数

如果没有'new‘,则无法调用ES6/Babel类构造函数
EN

Stack Overflow用户
提问于 2017-06-19 16:41:51
回答 0查看 18K关注 0票数 7

我正在尝试创建一个自定义的羽毛笔主题,扩展气泡主题。我正面临着一个奇怪的ES6继承问题,我似乎不能在构造函数中调用super()。下面是我的代码:

代码语言:javascript
复制
import BubbleTheme, { BubbleTooltip } from 'quill/themes/bubble'

class LoopTheme extends BubbleTheme {
  constructor (quill, options) {
    super(quill, options)
  }

  extendToolbar (toolbar) {
    super.extendToolbar(toolbar)
    this.tooltip = new LoopTooltip(this.quill, this.options.bounds);
    this.tooltip.root.appendChild(toolbar.container);
  }
}

class LoopTooltip extends BubbleTooltip {

}

LoopTooltip.TEMPLATE = [
  '<span class="ql-tooltip-arrow"></span>',
  '<div class="ql-tooltip-editor">',
    '<input type="text" data-formula="e=mc^2" data-link="https://myurl.com" data-video="Embed URL">',
    '<a class="ql-close"></a>',
  '</div>'
].join('');

export { LoopTooltip, LoopTheme as default }

可以在here中找到气泡主题

我的巴别塔预设:

代码语言:javascript
复制
{
    "presets": [
        "es2015",
        "es2016",
        "stage-0",
        "react"
    ]
}

Webpack js文件配置:

代码语言:javascript
复制
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [
          resolve(__dirname, 'app')
        ],
        loader: 'babel-loader',
        exclude: /node_modules/
      }, {...

输出生成的代码:

代码语言:javascript
复制
var LoopTheme = function (_BubbleTheme) {
  _inherits(LoopTheme, _BubbleTheme);

  function LoopTheme() {
    _classCallCheck(this, LoopTheme);

    return _possibleConstructorReturn(this, (LoopTheme.__proto__ || Object.getPrototypeOf(LoopTheme)).apply(this, arguments));
  }

  _createClass(LoopTheme, [{
    key: 'extendToolbar',
    value: function extendToolbar(toolbar) {
      _get(LoopTheme.prototype.__proto__ || Object.getPrototypeOf(LoopTheme.prototype), 'extendToolbar', this).call(this, toolbar);
      this.tooltip = new LoopTooltip(this.quill, this.options.bounds);
      this.tooltip.root.appendChild(toolbar.container);
    }
  }]);

  return LoopTheme;
}(_bubble2.default);

var LoopTooltip = function (_BubbleTooltip) {
  _inherits(LoopTooltip, _BubbleTooltip);

  function LoopTooltip() {
    _classCallCheck(this, LoopTooltip);

    return _possibleConstructorReturn(this, (LoopTooltip.__proto__ || Object.getPrototypeOf(LoopTooltip)).apply(this, arguments));
  }

  return LoopTooltip;
}(_bubble.BubbleTooltip);

LoopTooltip.TEMPLATE = ['<span class="ql-tooltip-arrow"></span>', '<div class="ql-tooltip-editor">', '<input type="text" data-formula="e=mc^2" data-link="myurl.com" data-video="Embed URL">', '<a class="ql-close"></a>', '</div>'].join('');

exports.LoopTooltip = LoopTooltip;
exports.default = LoopTheme;

我遇到了以下错误:events.js:59 Uncaught TypeError: Class constructor BubbleTheme cannot be invoked without 'new'。但是,通过new here可以正确地调用LoopTheme。当我一步一步地调试时,我正确地输入了LoopTheme构造函数,并且在调用super时引发了错误。

我是不是漏掉了什么?我一直使用继承,并且在我的代码中的其他地方(在我的类之间)使用它,我在哪里遇到了麻烦?

谢谢你的帮忙

EN

回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/44625868

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档