Como manter expressões de função JavaScript na memória?

Question

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

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

bye();            // Y

Antes de fazer essa pergunta, pesquisei no google e encontrei este post.

Então pensei, antes da linha X a estrutura semelhante a esta:

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

Depois da linha x, pensei que era assim:

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

Mas quando eu escrevi tchau nas ferramentas de desenvolvedor do firefox eu vi isso

Como isso é possível? Quando eu escrevi, let bye = sayBye;o sayBye foi copiado?

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

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

bye();            // Y

console.log(bye);

Answer 1

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

Variáveis ​​e métodos podem inferir o nome de uma função anônima a partir de sua posição sintática (novo no ECMAScript 2015).

O Chrome e o Firefox fornecem "sayBye"na impressão bye.name.

---

A partir de experimentos pessoais, o console do Chrome mostra bye.toString()ao solicitar bye, enquanto o Firefox mostra uma saída customizada deles, onde eles exibem o nome inferido da função (o que faz sentido, de fato, já que saber o nome geralmente ajuda na depuração).

Answer 2

As funções são objetos, portanto a atribuição x = y não é copiada. Eu tentei este Nodejs que tenho

Bye
[Function: sayBye]

Se você não nomear uma função, o JS adicionará um nome automaticamente a ela. No ES6 você pode verificar o nome da função usando myFunction.name , ou seja, 'name' é propriedade de um objeto de função. O importante é que esta é uma propriedade somente leitura . A boa prática é usar em constvez de letusar a expressão de função. Além disso, se possível, tente nomear a depuração de função é fácil na pilha de chamadas

Answer 3

Você está confuso com o nome da função.

As coisas da memória acontecem exatamente da mesma maneira que você pensava.

No entanto, a função não tinha um nome explícito, então o navegador deu um nome implícito à função, ou seja, o nome da variável ou propriedade do objeto à qual foi atribuída pela primeira vez, neste caso sayBye,.

Em seguida, ele é atribuído a uma variável diferente, mas o nome não muda.

Você pode ver isso se der um nome explícito a ele:

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

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

bye();            // Y

console.log(bye);