6 Differenze tra funzioni freccia e funzioni regolari in JavaScript

Le funzioni sono una parte essenziale di JavaScript che è necessario utilizzare per scrivere codice riutilizzabile. I due tipi principali di funzione sono le funzioni regolari e le funzioni a freccia e ci sono molti modi per definirle.

Anche se soddisfano esigenze simili, presentano alcune differenze fondamentali che possono influenzare sostanzialmente il modo in cui vengono utilizzate nel codice. Scopri tutto sulle diverse differenze tra le funzioni freccia e le funzioni regolari.

1. Differenze di sintassi

La sintassi che scegli quando sviluppi le funzioni JavaScript ha un grande impatto sulla semplicità di lettura e comprensione del tuo codice. La sintassi delle funzioni regolari e delle frecce differisce in modo significativo, influenzando il modo in cui le scrivi e le usi.

Funzioni freccia JavaScript utilizzare una struttura linguistica più piccola che sia più comprensibile. Puoi usarli per creare funzioni combinandole in una singola espressione o istruzione.

cost aggiungi = (a, b) => a+b;

In questo esempio, il aggiungere la funzione accetta due input, UN E B, e ne restituisce il totale. IL => sign lo definisce come una funzione freccia.

D'altra parte, la definizione di una funzione regolare richiede l'uso di funzione parola chiave, con una sintassi più dettagliata, come mostrato in questo esempio:

funzioneaggiungere(a, b) {
ritorno a+b;
}

In questo esempio, il funzione parola chiave definisce una funzione regolare che utilizza anche parentesi graffe e il ritorno dichiarazione.

Le funzioni regolari sono più utili per la sintassi complessa che richiede più istruzioni o espressioni. Al contrario, le funzioni freccia utilizzano una sintassi più concisa che può facilitare la lettura e la comprensione del codice.

2. Differenze di definizione

Il termine "scoping" descrive come sono accessibili le variabili e le funzioni interne di una funzione. In JavaScript, definisci e accedi a variabili e funzioni in tutto il codice utilizzando l'ambito. Il loro distinto l'ambito può avere un impatto significativo sul modo in cui scrivi e utilizzi JavaScript freccia e funzioni regolari.

Nell'ambito, come le funzioni freccia gestiscono il Questo parola chiave differisce in modo significativo da come fanno le normali funzioni. Le funzioni regolari definiscono il Questo parole chiave stesse; pertanto, può cambiare a seconda del contesto in cui si richiama la funzione.

D'altra parte, poiché non specificano il file Questo parola chiave, le funzioni freccia usano lo stesso Questo come l'ambito statico che li circonda.

Per vedere la differenza, controlla il seguente esempio. Diciamo che hai un persona oggetto con a nome proprietà e un metodo chiamato direNome() che registra il nome della persona utilizzando una normale funzione:

cost persona = {
 nome: 'John,'
 direNome: funzione() {
consolare.tronco d'albero(Questo.nome);
 }
};
persona.direNome(); // registra 'Giovanni'

Qui, la normale funzione sayName() è un metodo dell'oggetto person e del Questo la parola chiave all'interno di quella funzione si riferisce a quell'oggetto persona.

Proviamo ora la stessa cosa con una funzione freccia:

cost persona = {
 nome: 'John',
 direNome: () => {
consolare.tronco d'albero(Questo.nome);
 }
};
persona.direNome(); // registra undefined

Poiché la funzione freccia utilizzata nel file direNome() metodo non definisce il proprio Questo parola chiave, utilizza il Questo dell'ambito statico che lo circonda. In questo caso, questo è l'ambito globale dell'istanza.

Di conseguenza, quando chiami persona.direNome(), ottieni non definito piuttosto che "John." Questo può avere un impatto significativo sul modo in cui scrivi e usi le funzioni nel tuo codice.

3. Casi d'uso e best practice

Le funzioni regolari sono più adatte per le funzioni che richiedono il proprio Questo parola chiave, come i metodi in un oggetto.

Le funzioni freccia sono più adatte per programmazione funzionale e callback che non richiedono Questo parola chiave.

4. Funzione vincolante differenze

L'associazione di funzioni è il termine usato per descrivere la relazione tra Questo parola chiave e funzioni nel codice. Le variazioni nell'associazione di funzioni tra le funzioni freccia e le funzioni normali possono avere un forte impatto sul modo in cui costruisci e usi le funzioni freccia.

Usando il Questo la parola chiave lo rende unico nelle funzioni regolari e si associa a vari oggetti in base al metodo utilizzato per chiamare la funzione. L'associazione di funzioni è una delle distinzioni più importanti tra funzioni regolari e freccia.

Al contrario, le funzioni freccia non hanno Questo parola chiave; piuttosto, lo ottengono dagli ambiti circostanti.

Diamo un'occhiata a un esempio per capire di più su questa differenza. Supponiamo di avere un persona oggetto con a nome campo e un metodo chiamato direNome() che utilizza una funzione regolare per registrare il nome della persona:

cost persona = {
 nome: 'John',
 direNome: funzione() {
consolare.tronco d'albero(Questo.nome);
 }
};
cost un'altraPersona = {
 nome: 'Jane'
};
person.sayName.call (un'altra persona); // registra 'Jane'

In questo esempio, chiami l'oggetto person's direNome() metodo con il valore un'altra persona usando il chiamata() metodo. Per questo motivo il direNome() metodo, Questo, la parola chiave è associata a un'altra persona oggetto, e registra "Jane" piuttosto che "John."

Usiamo ora la stessa cosa con una funzione freccia:

cost persona = {
 nome: 'John',
 direNome: () => {
consolare.tronco d'albero(Questo.nome);
 }
};
cost un'altraPersona = {
 nome: 'Jane'
};
person.sayName.call (un'altra persona); // registra undefined

Dal momento che il direNome() tecnica non ha una propria parola chiave, in questo esempio stai usando una funzione freccia al suo interno. In questo caso, la funzione freccia eredita le proprietà dell'ambito circostante, che è l'ambito globale.

Ciò significa che quando corri person.sayName.call (un'altra persona), la funzione della freccia Questo parola chiave rimane l'oggetto globale e non definito prende il posto di Jane nel registro.

Se è necessario associare una funzione a un file specifico Questo valore, può essere preferibile una funzione ordinaria. Tuttavia, se non è necessario associare una funzione a uno specifico Questo value, una funzione freccia potrebbe essere più breve e più facile da capire.

5. Ritorno implicito

La funzione freccia ha una funzione di ritorno implicita. Se il corpo della funzione è costituito da un'unica espressione, le funzioni restituiscono tale espressione.

Come esempio:

cost doppio = (X) => X * 2;

Questa funzione freccia restituisce un double da un parametro. Non è necessario utilizzare un file esplicito ritorno parola chiave perché il corpo della funzione ha solo un'espressione.

6. Differenze di compatibilità

Le differenze di compatibilità si riferiscono alle funzioni freccia aggiunte in ECMAScript 6, che potrebbero non funzionare con browser o ambienti meno recenti. D'altra parte, le funzioni regolari esistono dall'inizio di JavaScript e sono ampiamente supportate.

Ecco un'illustrazione di una funzione freccia che potrebbe non funzionare in condizioni più stabilite:

cost aggiungi = (a, b) => a+b;

Quella che segue è una funzione regolare comparabile che dovrebbe funzionare nella maggior parte delle situazioni:

funzioneaggiungere(a, b) {
ritorno a+b;
}

Utilizzare le funzioni regolari anziché le funzioni freccia quando si prendono di mira ambienti meno recenti per garantire la compatibilità. Tuttavia, le funzioni freccia possono fornire una sintassi più facile da capire e più condensata quando si lavora con browser e ambienti moderni.

Scelta tra funzioni freccia e funzioni regolari in JavaScript

In JavaScript, le funzioni freccia e regolari hanno caratteristiche e applicazioni distinte. Le funzioni freccia hanno una sintassi semplice, ereditaria Questo parola chiave dal contesto del loro utilizzo, mentre le normali funzioni sono più adattabili e possono gestire situazioni più complesse.

È fondamentale sapere in che modo differiscono e come utilizzarli in base ai requisiti del codice. Quando si seleziona il tipo di funzione da utilizzare, è necessario considerare anche le differenze di compatibilità.

In definitiva, la freccia e le funzioni regolari di JavaScript sono strumenti potenti che ti aiutano a scrivere codice più pulito ed efficiente.