Pfeilfunktionen innerhalb von Klassen werden in Chrome nicht unterstützt, funktionieren aber gut durch Babel, warum?

Question

Die korrekte Syntax Pfeil Funktionen innerhalb einer Klasse sollte

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

Während diese kompiliert fein in Babel (mit es2015 default) die Chrom devtools wirft einen Fehler sein für das Schreiben.

Das verwirrt mich, wie nach http://caniuse.com/#feat=arrow-functions werden sie vollständig in Chrome unterstützt.

Ist dies eine nicht standardmäßige Syntax? Wenn ja, warum wird es in Babel unterstützt? Wenn nicht, wo kann ich den Support-Status

Answer 1

Sie sehen scheinen die class fields proposal zu reden:

Felddeklarationen

Mit dem ESnext Felddeklarationen Vorschlag kann das obige Beispiel geschrieben werden als

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 dem obigen Beispiel können Sie ein Feld deklariert mit der Syntax siehe x = 0 . Sie können auch ein Feld ohne Initialisierer als x deklarieren. Durch die Deklaration von Feldern im Voraus werden Klassendefinitionen selbstdokumentierender; Instanzen durchlaufen weniger Zustandsübergänge, da deklarierte Felder immer vorhanden sind.

Es ist ein Vorschlag der Stufe 3 und hat nichts mit Pfeilfunktionen zu tun. Jedem Feld kann ein beliebiger Wert zugewiesen werden, einschließlich der Pfeilfunktionen.

---

Während dies in Babel fein kompiliert (mit es2015 Standard)

Ich bin sicher, dass andere Plugins konfiguriert sind. Da dies ein Vorschlag und kein Teil von ES2016 ist, wird nur aktiviert die ES2015 Preset wird diese Syntax nicht umwandeln.