Differenza tra nameFunction() {} e nameFunction() => {} in ECMA6

Question

sto iniziare ad imparare la sintassi Vue.js e ECMA6, ho visto questo nel tutorial:

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

Poi ho pensato che il sintassi potrebbe essere:

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

ma questo funziona:

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

può spiegare la differenza e la sintassi ECMA5?

Answer 1

Delle tre opzioni, solo la prima è supportata in ES5. Gli altri due sono aggiunte in ES6.

La terza opzione è una scorciatoia ES6 per la prima opzione e quindi funzionano in modo identico in ES6.

Quando si utilizza la sintassi della freccia come nella seconda, this NON è impostato per essere l'oggetto host così come lo è nel primo e nel terzo. Questa è una delle caratteristiche della sintassi delle frecce e quindi non dovrebbe essere usata quando ci si aspetta che this sia impostato sull'oggetto host. Invece, this sarà impostato sul contesto lessicale da cui è stato definito il codice, spesso definito come "il valore di this nel contesto di inclusione" o il "valore lessicale di questo" che nel tuo caso sarebbe stato qualsiasi this quando il l'oggetto ospitante è stato inizialmente dichiarato che apparentemente era undefined.

Ecco un buon articolo di riferimento su funzioni di direzione: ES6 In Depth: Arrow functions

Answer 2

1. oggetto metodi quel metodo ha SomeMethod. In questo caso questo è un collegamento all'oggetto metodi.
2. Oggetto metodi che ha la proprietà someMethod che memorizza alcune funzioni anonime. In questa funzione questo non è definito perché la funzione è anonima.
3. Oggetto metodi ha la funzione interna someMethod. In questa funzione questo è il collegamento ai metodi , perché è una funzione con nome interno (non anonimo o esterno) di questo oggetto.

Buona fortuna!

+ Prova questo modo

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();