Sintassi JavaScript di base

Question

Ho alcune domande sulla sintassi JavaScript e non vedo l'ora di capirle.

Primo: non capisco su questa sintassi di seguito,

{ 
    Key:() => function() 
} 

Esempio in vero e proprio progetto:

// Define URL routes 
// See https://github.com/flatiron/director 
var routes = { 
    '/':() => render(require('./components/pages/Index')), 
    '/privacy':() => render(require('./components/pages/Privacy')) 
}; 

è stato utilizzato in https://github.com/kriasoft/react-starter-kit/blob/master/src/app.js

Cosa suppone fare ?

È lo stesso di { Key: function() {} }?

Secondo: A proposito di funzione JavaScript Object,

{ 
    function() {} 
} 

Esempio in vero e proprio progetto:

var HomePage = React.createClass({ 
    statics: { 
     layout: App 
    }, 
    componentWillMount() { 
     PageActions.set({title: 'React.js Starter Kit'}); 
    }, 
    render() { 
     return (.....); 
    } 
}); 

è stato utilizzato in https://github.com/kriasoft/react-starter-kit/blob/master/src/components/pages/Index.js

vorrei apprezzare per la risposta a spiegando perché questi sono validi o se potessi inviarmi le giuste informazioni su questa sintassi per l'oggetto JavaScript?

Answer 1

È il nuovo modo di scrivere la funzione in ES6 (la prossima versione di JavaScript). Puoi trovare ulteriori informazioni here.

ES6 non è attualmente supportato (vedere questo table), quindi sarà necessario compilare ES6 in ES5. (Succede con lo here, con la bandiera "harmony" nell'esempio) per farlo funzionare nel tuo browser.

Fondamentalmente:

var test =() => {} è uguale var test = function() {}.bind(this)

e

componentWillMount() {} è uguale componentWillMount:function() {}

Answer 2

E 'lo stesso di {chiave: function() {}}

Non esattamente, ma una sorta di. È una nuova sintassi della funzione introdotta in ECMAScript 6. Tuttavia, il comportamento è leggermente diverso.

In particolare, il valore di this nella funzione adotterà il valore di this dall'ambiente in cui è stata creata la funzione, quindi non si basa su come la funzione viene richiamata come la vecchia sintassi.

La funzione è ancora un oggetto di prima classe e crea una chiusura, quindi non c'è differenza in questo senso. Inoltre, l'operatore return può essere eliminato se il corpo della funzione è costituito da una sola istruzione di espressione.

Come sottolineato da @HeadCode, l'operatore new non può essere utilizzato con questa funzione, quindi non è pensato per la costruzione di oggetti. Voglio anche dire che ha un'adeguata ottimizzazione della coda, ma non ne sono sicuro.

---

Il resto della sintassi è solo un oggetto tipico eccetto che utilizza un nuovo metodo per l'assegnazione scorciatoia.

Ecco la documentazione MDN per la sintassi della funzione freccia grasso: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Ed ecco la documentazione MDN per la sintassi di inizializzazione degli oggetti. Vedere la parte ECMAScript6 per la nuova sintassi: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer