Babel对于继承预定义类转换的问题

用ES6写了一个继承Array的类,覆写了push方法,但是用babel转换成ES5之后发现调用的方法还是原来的push方法:

.babelrc:

{
    "presets": [
      "es2015",
      "react",
      "stage-3"
    ],
    "plugins": []
}

编译前的ES6代码:

//类的定义
class ROUTE extends Array{

    constructor(position){
        super();
        this.push({
            position: (position || [0,0,0])
        })
    }

    push(geometry){
        ...//业务相关代码
    }
}

经过babel编译过后的ES5代码:

//先是几个工具方法
var _createClass=function...
var _get=function...
function _classCallCheck...
function _possibleConstructorReturn...
function _inherits...

//类的定义
var ROUTE = function (_Array) {
    _inherits(ROUTE, _Array);//继承
        function ROUTE(position) {
        ...//类的构造
        }
        _createClass(ROUTE, [{
            key: "push",
            value: function push(geometry) {
            //业务相关代码,实际上不会执行
        }]);
        return ROUTE;
}

实际上在执行ROUTE类实例的方法时,完全不会调用_createClass方法中的那段业务逻辑代码,而仅仅是执行Array的push方法,除非在构造方法中覆写push方法。

babel版本:

  "devDependencies": {
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-3": "^6.24.1"
  }
阅读 2.5k
1 个回答

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.

由于浏览器引擎的限制, Babel 不支持对某些内置类的subclass的支持,例如 Date, Array, Error..., 所以根据自己的需要自己定义所需要的类型吧

参考:https://babeljs.io/learn-es20...

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏