javascript – Babels Problem mit der Vererbung vordefinierter Klassenkonvertierungen
曾经蜡笔没有小新
曾经蜡笔没有小新 2017-05-19 10:30:16
0
1
535

Ich habe ES6 verwendet, um eine Klasse zu schreiben, die Array erbt, und habe die Push-Methode überschrieben. Nach der Konvertierung in ES5 mit Babel habe ich jedoch festgestellt, dass die aufgerufene Methode immer noch die ursprüngliche Push-Methode ist:

.babelrc::

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

Der ES6Code vor der Kompilierung:

//类的定义
class ROUTE extends Array{

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

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

Von babel zusammengestellter Code: 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;
}

Tatsächlich wird beim Ausführen der Methode der ROUTE-Klasseninstanz der Geschäftslogikcode in der _createClass-Methode überhaupt nicht aufgerufen, sondern nur die Push-Methode von Array ausgeführt, es sei denn, die Push-Methode wird im Konstruktor überschrieben .

Babel-Version:

  "devDependencies": {
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-3": "^6.24.1"
  }
曾经蜡笔没有小新
曾经蜡笔没有小新

Antworte allen(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...

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage