Vários métodos de definição de função comum em JavaScript

Este artigo descreve em detalhes vários métodos de definição de função comum em JavaScript e é compartilhado com você para sua referência. A análise específica é a seguinte:

Primeiro, vamos dar uma olhada nas quatro definições de função mais comuns em JavaScript:

A função definida com o construtor da função, o código é o seguinte:

 var multiply = nova função ('x', 'y', 'return x * y;');

Declaração da função, esse método também é o mais comum:

 função multiply (x, y) {return x * y;}

Expressões de função, declaradas como função anônima e depois atribuídas a uma variável, são maneiras muito comuns:

 var multiply = function (x, y) {return x * y;}

Expressão da função, mas a declaração de função é uma função nomeada e, em seguida, atribuiu um valor a uma variável, que se parece exatamente da mesma maneira:

 var multiply = function multi (x, y) {return x * y;}

Primeiro, vamos comparar o nome da função e o relacionamento direto entre a variável de função atribuída à função. É realmente um pouco ... para ser mais intuitivo, do Exemplo 4 agora, é a relação entre a variável de função multiplique e o nome da função Multi:

Os nomes de funções não podem ser modificados, pelo contrário, as variáveis ​​de função podem ser transferidas. Deve ser fácil entender que as variáveis ​​de função podem ser transferidas. Em nosso quarto exemplo, a variável multiplique definida, não é agradável de ver e reatribuir para:

 multiply = function (x, y) {return x + y;}

Eu imediatamente me transformei da multiplicação em adição. No entanto, é impossível alterar a variável multi -função. A definição de função já está lá. Contanto que ainda mantenha sua referência, não mudará. Pode não ser fácil de entender aqui. Pense assim como este primeiro, e então você poderá entendê -lo lentamente.

O nome da função não pode ser usado fora da função ao mesmo tempo, é visível apenas dentro do corpo da função. Um exemplo muito simples:

 var foo = barra de função () {alert ('hello');} foo (); // Prompt "Hello String Bar (); // executa um erro, a barra não é definida

E, obviamente, o bar aqui é realmente um nome de função, mas realmente não pode ser chamado externamente. Neste momento, definitivamente haverá sapatos infantis perguntando por que esse exemplo ainda parece tão bem-comportado, assim como o Exemplo 4, por que não usar o método do Exemplo 2? Boa pergunta, deixe -me quebrá -lo lentamente.

Continuando com o Exemplo 4, podemos ver que o nome da função (multi) e a variável de função (multiplicar) não são os mesmos, mas, na verdade, os dois não têm nenhum relacionamento, portanto, não há necessidade de manter a consistência. Falando nisso, acho que os quatro exemplos acima devem ser reduzidos para 3, e o Exemplo 2 e o Exemplo 4 devem ser essencialmente consistentes. O que, não acredita? Hehe, eu tenho que continuar continuando em um silêncio ~ continue lendo ~~

Descobrimos que, em comparação com o Exemplo 2 e o Exemplo 4, há apenas menos variáveis ​​de função VAR, enquanto comparado com o Exemplo 3, há apenas menos esse nome de função. Da perspectiva do fenômeno, a essência do Exemplo 2 e do Exemplo 4 são iguais, e a evidência é a seguinte:

 function foo () {} alert (foo); // solicita o nome da função que contém "foo" var bar = foo; alert (bar); // solicita o nome da função ainda contém apenas "foo" e não tem relacionamento com a barra

É realmente o IronClad? É a maneira de escrever o código acima semelhante ao Exemplo 2 em combinação com os códigos no Exemplo 4? Correto, foi isso que eu acabei de dizer que os dois deveriam ser essencialmente os mesmos. No entanto, ao definir a função no Caso 2, o mecanismo JS nos ajudou a fazer algo, como declarar uma função com o nome da função, multiplicar e definir silenciosamente uma variável também chamada multiplicar e, em seguida, atribuí -la a essa variável, dois exatamente os mesmos nomes. Pensamos que, ao usar o nome da função, estávamos realmente usando a variável de função multiplicar, por isso estávamos tontos ~ para ser sincero, eu também estava tonta ~ em resumo, quando chamamos, na verdade chamamos de variável de função e o nome da função não poderia chamar a função de externamente, por isso tínhamos a inferência acima.

No entanto, uma pequena diferença a ser mencionada aqui é que a função definida pelo método da declaração de função é diferente da declaração do construtor ou da declaração de expressão da função, o método da declaração de função pode ser chamado antes da definição da função ... para não mencioná -lo, basta procurar o código:

 foo (); // tip fooofunction foo () {alert ('foo');} bar (); // amigo, é realmente diferente do exposto, então não se mostre. Isso não é um erro? A barra de prompt não é definida var bar = function () {alert ('bar');}

Vamos falar sobre as funções declaradas pelo construtor. As funções declaradas não herdarão o escopo do local declarado atual. Eles só terão um escopo global por padrão. No entanto, isso é o mesmo em outras funções, métodos de declaração, como segue:

 function foo () {var hi = 'hello'; // Return function () {// alert (hi); //}; Função de retorno ('return hi;');} foo () (); // Para o efeito de execução, corra e veja sozinho

Pode -se imaginar que a execução da função retornada usando o construtor declarada inevitavelmente relatará um erro porque a variável HI não está em seu escopo (ou seja, escopo global).

Outro ponto é que as pessoas costumam dizer que as funções declaradas no modo construtor são ineficientes. Por que isso? Hoje, aprendi com o documento que as funções declaradas nas outras três maneiras serão analisadas apenas uma vez. De fato, eles existem no fechamento, mas isso está relacionado apenas à corrente do escopo, e o corpo da função será analisado apenas uma vez. Mas o método construtor é que toda vez que uma função é executada, seu corpo de função será analisado uma vez. Podemos pensar que a função declarada dessa maneira é um objeto, que armazena parâmetros e corpo de função. Cada vez que é executado, deve ser analisado uma vez e os parâmetros e o corpo da função serão executados, o que inevitavelmente será ineficiente. Não sabe como fazer o experimento específico?

Finalmente, vamos falar sobre algo que ninguém presta atenção. Quando parece que a maneira de função declarações não é o modo de função a vida (ainda está tão inclinado a simplificar, quando o caminho do Exemplo 2 se torna outra maneira inadvertidamente):

Quando se torna parte da expressão, é como o Exemplo 3 e o Exemplo 4.

Não é mais o "elemento de origem" do próprio script ou função. Qual é o elemento de origem? Isto é, uma declaração não aninhada no script ou um corpo de função, como:

 var x = 0; // elemento de origem se (x == 0) {// elemento de origem x = 10; // não é um elemento de origem, porque está aninhado na declaração if função boo () {} // não é um elemento de origem, porque está aninhado na instrução if declaração} function foo () {// elemento de origem var y = 20; // Barra de função do elemento de origem () {} // elemento de origem while (y == 10) {// Função do elemento de origem blah () {} // não é um elemento de origem, porque é aninhado na instrução y ++; // não é um elemento de origem, porque está aninhado em um tempo declaração}}

Eu entendi aproximadamente o conceito de elementos de origem. Continuarei com a declaração de função que acabei de mencionar. Por favor, veja:

 // função declaração função foo () {} // função expressão (função bar () {}) // Expressão da função x = função hello () {} if (x) {// função função função world () {}}} // função função função a () {// função função b () {}}}} {/)

Finalmente, deixe -me falar sobre meu próprio entendimento. A razão para distinguir entre a declaração da função e a declaração de não função é que, na minha opinião, a definição de função de declaração do função Método será declarada antecipadamente quando o mecanismo de análise JS a executar. Ou seja, como acabamos de dizer acima, pode ser usado antes da definição da função. De fato, o mecanismo de análise o analisou antes de usá -lo. No entanto, declaração não função, como a declaração da função de expressão, o mecanismo de análise JS definirá apenas a variável declarada pelo VAR antecipadamente. No momento, o valor variável é indefinido e a atribuição real a essa variável está no local real do código. Portanto, os erros acima mencionados são todos indefinidos. A variável real foi definida, mas ainda não foi atribuída. O mecanismo de análise JS não sabe que é uma função.

Acredito que a descrição deste artigo tenha um certo valor de referência para o design de programação da Web JavaScript de todos.