babeljs不能适当扩展类 [英] babeljs doesn't transpile extended classes properly

问题描述

我已经从 MDN （稍作修改打印结果）：

 use strict; class myDate extends Date {constructor（）{super ; } getFormattedDate（）{var months = ['Jan'，'Feb'，'Mar'，'Apr'，'May'，'Jun'，'Jul'，'Aug'，'Sep'，'Oct'月， '月']; return this.getDate（）+ - + months [this.getMonth（）] + - + this.getFullYear（）; }} var testDate = new myDate（）; document.write（testDate.getFormattedDate（））;  

它适用于Google Chrome浏览器和node5，但是当我使用babeljs到ES5（ES2015预设）时，它不起作用：

 use strict; var _createClass = function（）{function defineProperties（target，props）{for（var i = 0; i< props.length; i ++）{var descriptor = props [i ]。 descriptor.enumerable = descriptor.enumerable ||假; descriptor.configurable = true; if（value在描述符中）descriptor.writable = true; Object.defineProperty（target，descriptor.key，descriptor）; }} return function（Constructor，protoProps，staticProps）{if（protoProps）defineProperties（Constructor.prototype，protoProps）; if（staticProps）defineProperties（Constructor，staticProps）;返回构造函数; }; }（）; function _classCallCheck（instance，Constructor）{if（！（instance instanceof Constructor））{throw new TypeError（Can not call a class as a function）; }} function _possibleConstructorReturn（self，call）{if（！self）{throw new ReferenceError（this is not be initialised  -  super（）has not be called）; } return call&& （typeof call ===object|| typeof call ===function）？打电话：自我} function _inherits（subClass，superClass）{if（typeof superClass！==function&& superClass！== null）{throw new TypeError（超级表达式必须为null或函数，而不是+ typeof superClass ）; } subClass.prototype = Object.create（superClass&& superClass.prototype，{constructor：{value：subClass，enumerable：false，writable：true，configured：true}}）; if（superClass）Object.setPrototypeOf？ Object.setPrototypeOf（subClass，superClass）：subClass .__ proto__ = superClass; } var myDate = function（_Date）{_inherits（myDate，_Date）; function myDate（）{_classCallCheck（this，myDate）; return _possibleConstructorReturn（this，Object.getPrototypeOf（myDate）.call（this））; } _createClass（myDate，[{key：'getFormattedDate'，value：function getFormattedDate（）{var months = ['Jan'，'Feb'，'Mar'，'Apr'，'May'，'Jun' ''''''''这个.getFullYear（）+' （）;}}]）;返回myDate;}（Date）; var testDate = new myDate（）; document.write（testDate.getFormattedDate（））;  

/ p>

为什么？

我在 babel docs ：

部分支持< br>
内置的子类可以根据具体情况进行评估，因为诸如HTMLElement之类的类可以被子类化，而诸如Date，Array和Error之类的许多类不能由于ES5引擎限制。

如果babel在看到本机对象扩展名（它不支持）时抛出错误，而不是假装一切都是玫瑰色，并产生错误代码：/

解决方案

根据 ECMAScript 6兼容表，BabelJS不支持类扩展。

I've got this example code from MDN (slightly modified to print out results):

"use strict";

class myDate extends Date {
  constructor() {
    super();
  }

  getFormattedDate() {
    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    return this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear();
  }
}

var testDate = new myDate();
document.write(testDate.getFormattedDate());

It works on Google Chrome browser and node5, but when I transpile it using babeljs to ES5 (ES2015 preset) it doesn't work:

"use strict";

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var myDate = function (_Date) {
  _inherits(myDate, _Date);

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

    return _possibleConstructorReturn(this, Object.getPrototypeOf(myDate).call(this));
  }

  _createClass(myDate, [{
    key: 'getFormattedDate',
    value: function getFormattedDate() {
      var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
      return this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear();
    }
  }]);

  return myDate;
}(Date);

var testDate = new myDate();
document.write(testDate.getFormattedDate());

Why?

I found the answer in babel docs:

Partial support
Built-in subclassability should be evaluated on a case-by-case basis as classes such as HTMLElement can be subclassed while many such as Date, Array and Error cannot be due to ES5 engine limitations.

I'd appreciate if babel throw an error upon seeing native objects extensions (which it doesn't support) instead of pretending all is rosy and producing faulty code :/

解决方案

According to ECMAScript 6 compatibility table, BabelJS doesn't support class extends.

这篇关于babeljs不能适当扩展类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！