6 ms·
When comparing ES2015 and how it was before. I usually take the babel playground [1] and see what the closest alternative would be. For a simple es2015 it look
by drinchev 9y ago
When comparing ES2015 and how it was before. I usually take the babel playground [1] and see what the closest alternative would be.
For a simple es2015 it looks a bit more complicated than the prototype extension [2].
class Dog {
bark() { console.log( "Bark!" ); }
}
Compiles to :
"use strict";
var _createClass = (function() {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function(Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
})();
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var Dog = (function() {
function Dog() {
_classCallCheck(this, Dog);
}
_createClass(Dog, [
{
key: "bark",
value: function bark() {
console.log("Bark!");
}
}
]);
return Dog;
})();
1 : https://babeljs.io/repl/ https://babeljs.io/repl/
2 : https://babeljs.io/repl/#?babili=false&browsers=&build=&builtIns=false&code_lz=MYGwhgzhAEAiD2BzaBvAUNaAjMAnA1gBQCUq0w8AdhPCAKYB0ISh0ARAEJ74CEb0xANzQAvmhFA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=true&fileSize=false&lineWrap=false&presets=es2015%2Ces2016%2Creact%2Cstage-2&prettier=true&targets=&version=6.26.0&envVersion= https://babeljs.io/repl/#?babili=false&browsers=&build=&buil...
- masklinn 9y ago> For a simple es2015 it looks a bit more complicated than the prototype extension [2]. That's because it provides somewhat different features and Babel apparently attempts to replicate them properly. For instance "class" methods are non-enumerable by default, whereas "prototype" methods — being bog-standard properties — are.
- Parsyval 9y agoSince I work with Typescript, I do the same with the TS playground, it's really usefull to learn that kind of stuff.
- drinchev 9y agoI sometimes see difference between TypeScript's compiler and babel. For example in this case TypeScript doesn't care so much about `defineProperty`. I guess the rules are not so strict, since it assumes that the rest of your code will be passed through TypeScript itself. Anyway in both cases, I prefer TypeScript's way of enhancing the class inheritance in JavaScript by introducing private / readonly and many more. https://www.typescriptlang.org/play/index.html#src=class%20Dog%20%7B%0D%0A%20%20%20%20bark()%20%7B%0D%0A%20%20%20%20%20%20%20%20console.log(%22bark%22)%3B%0D%0A%20%20%20%20%7D%0D%0A%20%20%20%20static%20eat()%20%7B%0D%0A%20%20%20%20%20%20%20%20console.log(%22boo%22)%3B%0D%0A%20%20%20%20%7D%20%20%20%0D%0A%7D%0D%0A%0D%0A%0D%0A%0D%0A https://www.typescriptlang.org/play/index.html#src=class%20D...
- insin 9y agoIt's worth using Babel's loose mode (es2015-loose in the online REPL) if you're more interested in the "old" way of doing it than in compatibility with the specs: "use strict"; function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var Dog = (function() { function Dog() { _classCallCheck(this, Dog); } Dog.prototype.bark = function bark() { console.log("Bark!"); }; return Dog; })(); https://babeljs.io/repl/#?babili=false&browsers=&build=&builtIns=false&code_lz=MYGwhgzhAEAiD2BzaBvAUNaAjMAnA1gBQCUq0w8AdhPCAKYB0ISh0ARAEJ74CEb0xANzQAvmhFA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&lineWrap=false&presets=es2016%2Creact%2Cstage-2%2Ces2015-loose&prettier=true&targets=&version=6.26.0&envVersion= https://babeljs.io/repl/#?babili=false&browsers=&build=&buil...