javascript - Le problème de Babel avec l'héritage des conversions de classes prédéfinies
曾经蜡笔没有小新
曾经蜡笔没有小新 2017-05-19 10:30:16
0
1
552

J'ai utilisé ES6 pour écrire une classe qui hérite d'Array et j'ai remplacé la méthode push. Cependant, après l'avoir convertie en ES5 à l'aide de Babel, j'ai découvert que la méthode appelée est toujours la méthode push d'origine :

.babelrc:

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

Le ES6code avant compilation :

//类的定义
class ROUTE extends Array{

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

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

Code compilé par 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;
}

En fait, lorsque la méthode de l'instance de classe ROUTE est exécutée, le code de logique métier dans la méthode _createClass n'est pas appelé du tout, mais seule la méthode push de Array est exécutée, à moins que la méthode push ne soit remplacée dans le constructeur.

version babel :

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

répondre à tous(1)
我想大声告诉你

Support partiel
La sous-classabilité intégrée doit être évaluée au cas par cas, car des classes telles que HTMLElement peuvent être sous-classées alors que d'autres, telles que Date, Array et Error, ne peuvent pas être dues à Limites du moteur ES5.

En raison des limitations du moteur de navigation, Babel ne prend pas en charge les sous-classes de certaines classes intégrées, telles que Date, Array, Error..., vous pouvez donc définir les types requis en fonction de vos propres besoins

Référence : https://babeljs.io/learn-es20...

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal