用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"
}
參考:https://babeljs.io/learn-es20...