Class properties transform · Babel


#1

This plugin transforms es2015 static class properties as well as properties declared with the es2016 property initializer syntax. Below is a class with four class properties which will be transformed.


This is a companion discussion topic for the original entry at https://babeljs.io/docs/plugins/transform-class-properties/

#2

From the description of the spec option it is not quite clear what exactly this option do (when true and when false accordingly). I would suggest to write it this way:

spec: true
doing this…

spec: false
doing that…


#3

This is “not yet a standard” and “not even have brought to TC39” at the time of writing (Mar 2017, still stucked at stage 2 https://github.com/tc39/proposals) , how came it was here 1 years ago stating that is part of es2016?

Don’t even understand why people are so possessed with new class syntactic sugar. fundamentally it is not CLASS but still PROTOTYPE based, that is why making the property declared inside the class is not considered at the beginning because it causes more confusion then benefits.(methods are in prototype while properties are on each instance)

Not to mention the class syntax (that without the need of assignment) make it looks like is hoisting but in fact it is not and also quite confusing as well.

Nice job making more confusions to noob javascript developer.


#4

I felt this way initially. I was like… why use this class syntax it’s just going to confuse everyone?

Well, I was wrong. After using it for awhile I don’t think I could go back to es5 style class declarations. It’s just too much busywork. I think this is why they added the class syntax sugar.

this

var myClass = function () {
    function myClass() {
        this.myProp = 1;
    }
    myClass.prototype.myFunction = function myFunction() {
        this.myProp++;
    };
    return myClass;
}();
myClass.props = [];

this

class myClass {
    myProp = 1;
    myFunction () {
      this.myProp++;
    }
    static props = [];
}

It’s just tidy and easy to see what’s going on. Not to mention half the amount of typing.


#5

Shouldn’t the implementation be setting the name property on the function? This:

class Thing {
  boundMethod = () => {}
  
  regularMethod() {}
}
  
const thing = new Thing;
console.log(thing.boundMethod.name, thing.regularMethod.name);

Should give: "boundMethod" "regularMethod". But the bound method is anonymous (at least, when I run this in the babeljs.io/repl).


#6

Well, I really wants to say this thing helps a lot when you are trying to specify propTypes on HOCs with decorators. So it is actually very helpful under certain circumstances.

Also, I do not think it is necessary for “noobs” to understand anything related to prototype. With this syntactic sugar, it seals the prototype model inside and provides a interface that is much more similar to Java which is (hopefully) easier to understand. Once they get deep in JavaScript, others can introduce the prototype to them as “how JavaScript classes work” instead of “a key mechanism of JavaScript”.

(By the way, I do think in most of popular programming languages, methods and properties are stored at different places.)