Come mantenere in memoria le espressioni delle funzioni JavaScript?

Question

let sayBye = function () {
    console.log(`Bye`);
}

let bye = sayBye;   
sayBye = null;    // X

bye();            // Y

Prima di fare questa domanda, ho cercato su Google e ho trovato questo post.

Poi ho pensato, prima della riga X la struttura simile a questa:

sayBye ---------------                                              
                      |      
                      |  => function() {....}
                      |
bye-------------------

Dopo la linea x, ho pensato che fosse così:

sayBye                        MEMORY                                      
                            
                      |  => function() {....}
                      |
bye-------------------

Ma quando ho scritto ciao negli strumenti per sviluppatori di Firefox ho visto questo

Come è possibile? Quando ho scritto let bye = sayBye;è il sayBye coppied?

let sayBye = function () {
    console.log(`Bye`);
}

let bye = sayBye;   
sayBye = null;    // X

bye();            // Y

console.log(bye);

Answer 1

A partire dal https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name#Inferred_function_names:

Variabili e metodi possono dedurre il nome di una funzione anonima dalla sua posizione sintattica (nuovo in ECMAScript 2015).

Chrome e Firefox danno entrambi "sayBye"durante la stampa bye.name.

---

Da esperimenti personali, la console Chrome mostra bye.toString()quando lo si richiede bye, mentre Firefox mostra un loro output personalizzato, in cui viene visualizzato il nome dedotto della funzione (il che ha davvero senso, poiché conoscere il nome di solito aiuta il debug).

Answer 2

Le funzioni sono oggetto, quindi l'assegnazione x = y non viene copiata. Ho provato questo Nodejs che ho

Bye
[Function: sayBye]

Se non si nomina una funzione, JS aggiungerà automaticamente un nome ad essa. In ES6 è possibile controllare il nome della funzione utilizzando myFunction.name , ovvero "nome" è una proprietà di un oggetto funzione. La cosa importante è che questa è una proprietà di sola lettura . Una buona pratica è usare constinvece di letusare l'espressione di funzione. Inoltre, se possibile, provare a nominare il debug della funzione è facile sullo stack di chiamate

Answer 3

Sei confuso dal nome della funzione.

Le cose della memoria accadono esattamente nello stesso modo in cui pensavi.

Tuttavia, la funzione non aveva un nome esplicito, quindi il browser ha dato un nome implicito alla funzione, ovvero il nome della variabile o della proprietà dell'oggetto a cui era stata assegnata per la prima volta, in questo caso sayBye,.

Quindi, viene assegnato a una variabile diversa, ma il nome non cambia.

Puoi vederlo se gli dai un nome esplicito:

//  Explicit name ----vvvv
let sayBye = function myFn() {
    console.log(`Bye`);
}

let bye = sayBye;   
sayBye = null;    // X

bye();            // Y

console.log(bye);