JavaScript ES2015 dynamic inheritance with browserify and babelify
Is there a way to do dynamic inheritance with ES2015 with Browserify and Babelify ?
I need to wrap a class "Predecessor" with extra functionality "Constructor", and I don't know what the Predecessor is going to be, so I don't know the number of arguments or anything about its execution.
Normally, for dynamic inheritance in JS, I would do:
function Constructor() {
Predecessor.apply(this, arguments); // <<-- this is what I'm trying to do.
}
Constructor.prototype = Object.create(Predecessor.prototype);
Constructor.prototype.constructor = Constructor;
When I try to use ES2015:
class Constructor extends Predecessor {
constructor() {
super(arguments);
}
}
super(arguments) gets transformed to:
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Singleton).call(this, args));
so, Predecessor gets executed something like if you did: new Predecessor([arguments]); (array within array).
Predecessor.apply(this, arguments); directly but it throws an error ( super must be called). Also, I don't want to execute the Predecessor twice. super.apply(arguments) out of frustration, and it, of course, doesn't work (throws a bundle error). I don't want to force the developer to say all the arguments will be enclosed in an array, so:
Awful looking and definitely not a best practice:
class Constructor extends Predecessor {
constructor(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z) {
super(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z);
}
}
I, of course, don't like it.
So, is it just Babelify/Babel or is this not allowed in ES2015 ? Is there something I could do to improve this (contribute to Babelify)? or should I just go back the old implementation ?
In case you are wondering my compilation process:
{
// ...
"scripts": {
"dist": "./node_modules/browserify/bin/cmd.js ./src/index.js -o ./dist/bundle.js -t [ babelify --presets [ es2015 ] ]",
// ...
},
"devDependencies": {
"babel-preset-es2015": "^6.9.0",
"babelify": "^7.3.0",
"browserify": "^13.0.1",
// ...
}
}
so Predecessor gets executed something like if you did: new Predecessor([arguments]) : array within array
Well, that is what you wrote: super(arguments) passes the whole object into one parameter. You'd need to write super(...arguments) to pass the arguments through as they came. Or even better, don't use the arguments object any more in ES6 but rest parameters:
class Constructor extends Predecessor {
constructor(...args) {
super(...args);
}
}
(or just omit the constructor method if you don't do anything else, as this is the default behaviour).