ecmascript 6 - Arrow functions within classes are not supported in chrome but work fine through babel, why? -

the correct syntax writing arrow functions within class should

greet = () => {console.log('greet')} 

while compiles fine in babel (using es2015 default) chrome devtools throws error.

this confuses me, according http://caniuse.com/#feat=arrow-functions supported in chrome.

is non-standard syntax? if so, why supported in babel. if not, can see support status

you seem talking class fields proposal:

field declarations

with esnext field declarations proposal, above example can written as

class counter extends htmlelement {   x = 0;    clicked() {     this.x++;     window.requestanimationframe(this.render.bind(this));   }    constructor() {     super();     this.onclick = this.clicked.bind(this);   }    connectedcallback() { this.render(); }    render() {     this.textcontent = this.x.tostring();   } } window.customelements.define('num-counter', counter); 

in above example, can see field declared syntax x = 0. can declare field without initializer x. declaring fields up-front, class definitions become more self-documenting; instances go through fewer state transitions, declared fields present.

it's stage 3 proposal , has nothing arrow functions. value can assigned field, including arrow functions.

---

while compiles fine in babel (using es2015 default)

i'm sure other plugins configured. since proposal , not part of es2016, only enabling es2015 preset won't transform syntax.