Unterschied zwischen nameFunction() {} und nameFunction() => {} in ECMA6

Question

Ich Vue.js und ECMA6 Syntax erlernen, sah ich dies im Tutorial:

methods: { 
    someMethod: function() { 
    console.log(this) // this works 
    } 
} 

Dann dachte ich, das Syntax könnte sein:

methods: { 
    someMethod:() => { 
    console.log(this) // this undefined 
    } 
} 

aber dies funktioniert:

methods: { 
    someMethod() { 
    console.log(this) // this works 
    } 
} 

kann den Unterschied und die ECMA5 Syntax erklären?

Answer 1

Von Ihren drei Optionen wird nur die erste in ES5 unterstützt. Die anderen beiden sind Ergänzungen in ES6.

Die dritte Option ist eine ES6-Verknüpfung für die erste Option und daher funktionieren sie identisch in ES6.

Wenn Sie die Pfeilsyntax wie in der zweiten verwenden, ist this NICHT so eingestellt, dass es das Host-Objekt ist, wie es in Ihrem ersten und dritten ist. Das ist eines der Merkmale der Pfeilsyntax und sollte daher nicht verwendet werden, wenn Sie erwarten, dass this auf das Host-Objekt gesetzt wird. Stattdessen wird this auf den lexikalischen Kontext festgelegt, aus dem der Code definiert wurde - oft als "der Wert this im umschließenden Kontext" oder der "lexikalische Wert davon" bezeichnet, der in Ihrem Fall this wäre Host-Objekt wurde zunächst deklariert, was anscheinend undefined war.

Hier ist ein guter Hinweis auf Artikel Pfeil Funktionen: ES6 In Depth: Arrow functions

Answer 2

1. Objekt Methoden die Methode Somemethod. In diesem Fall ist dieser eine Verbindung zu Objekt Methoden.
2. Objekt Methoden, die Eigenschaft hat someMethod, die einige anonyme Funktion speichert. In dieser Funktion ist diese nicht definiert, da die Funktion anonym ist.
3. Objekt Methoden hat interne Funktion someMethod. In dieser Funktion ist dieser Link zu Methoden, weil es interne benannte Funktion (nicht anonym oder extern) dieses Objekts ist.

Viel Glück!

+ Versuchen Sie, diese Art und Weise

var methods1 = function() { 
 
    var self = { 
 
    someMethod: function() { 
 
     console.log(self); 
 
    } 
 
    }; 
 
    return self; 
 
}(); 
 
    
 
var methods2 = function() { 
 
    var self = { 
 
    someMethod:() => { 
 
     console.log(self); 
 
    } 
 
    }; 
 
    return self; 
 
}(); 
 

 
var methods3 = function() { 
 
    function someOtherMethod() { 
 
    console.log(self); 
 
    } 
 
    var self = { 
 
    someMethod: function() { 
 
     someOtherMethod(); 
 
    } 
 
    } 
 
    return self; 
 
}(); 
 

 
methods1.someMethod(); 
 
methods2.someMethod(); 
 
methods3.someMethod();