Explicação detalhada e exemplos de padrões de função JavaScript

O papel do padrão de design de JavaScript é melhorar a reutilização e a legibilidade do código, facilitando a manutenção e a expansão do código.

No JavaScript, uma função é uma classe de objetos, o que significa que ele pode ser passado como um parâmetro para outras funções; Além disso, a função também pode fornecer escopo.

Sintaxe para criar uma função

Expressões de função nomeadas

 // Nome Função Expressão var ADD = função add (a, b) {return a+b;}; var foo = barra de função () {console.log (foo === bar);}; foo (); // true

Pode -se observar que eles estão se referindo à mesma função, mas isso é válido apenas no corpo da função.

 var foo = barra de função () {}; console.log (foo === bar); // referenceError: a barra não está definida

No entanto, você não pode chamar a função chamando a barra ().

 var foo = (barra de função () {console.log (foo === bar);}) (); // false

Expressões de função

 // também conhecido como função anônima var add = function (a, b) {return a+b;};

O valor atribuído à variável Add é a própria definição de função. Dessa forma, Add se torna uma função que pode ser chamada em qualquer lugar.

Declaração de funções

 function foo () {// code aqui} // não há necessidade de semicolons aqui

Nos semicolons à direita, as expressões de função devem sempre usar semicolons, e o final dos semicolons não é necessário na declaração da função.

A diferença entre uma função declarativa e uma expressão de função é que, durante o período de pré -compilação do JS, a função declarativa será extraída primeiro e, em seguida, o código JS será executado em ordem:

console.log (f1); // [função: f1]

console.log (f2); // indefinido, o JavaScript não é totalmente interpretado e executado em ordem, mas "pré -compilam" o JavaScript antes da interpretação. Durante o processo de pré -compilação, a função definitiva será executada primeiro.

 função f1 () {console.log ("eu sou f1");} var f2 = function () {console.log ("eu sou f2");};

Como as funções de declaração serão concluídas durante a construção global do escopo, a declaração de funções são propriedades dos objetos de janela, o que mostra por que, não importa onde declaremos funções, declarando funções pertencem a objetos de janela.

No idioma JavaScript, qualquer função anônima pertence a um objeto de janela. Ao definir uma função anônima, ele retornará seu endereço de memória. Se uma variável receber esse endereço de memória no momento, a função anônima poderá ser usada no programa, porque a função anônima também é definida e atribuída durante a construção do ambiente de execução global, portanto, esse apontamento da função anônima também é um objeto de janela

 var f2 = function () {console.log ("eu sou f2");}; console.log (f2 ()); // eu sou f2 (function () {console.log (this ==== window); // true}) ();

Declarações e expressões de função

Promoção de funções (elevação)

O comportamento de uma declaração de função não é equivalente a uma expressão de função nomeada. A diferença é o comportamento de elevação. Veja o seguinte exemplo:

 <script type = "text/javascript"> // função global função foo () {alert ("global foo!");} function bar () {alert ('blobal bar');} função hoist () {console.log (typeof foo); // function console.log (typeof bar); // bar (); // typeError: 'indefinido' não é uma função // variável foo e implementador são promovidos função foo () {alert ('Foo local!' '); } // Somente a barra variável é promovida, a parte da implementação da função não é promovida var bar = function () {alert ('local bar!'); }; } hoist (); </script>

Para todas as variáveis, onde quer que sejam declaradas no corpo, elas são promovidas internamente ao topo da função. O motivo da aplicação geral das funções é que as funções são apenas objetos atribuídos a variáveis.

Como o nome sugere, a melhoria significa mencionar as seguintes coisas até o topo. No JS, é atualizar as coisas definidas no seguinte (variáveis ou funções) para a definição anterior. Como pode ser visto no exemplo acima, foo e bar na função iista dentro da função se movem para o topo, cobrindo as funções globais de Foo e barra. A diferença entre a barra de funções locais e o Foo é que o Foo é promovido ao topo e pode ser executado normalmente, enquanto a definição de bar () não foi melhorada, apenas sua declaração é promovida. Portanto, quando o bar () é executado, o resultado é indefinido em vez de ser usado como uma função.

Modo de função em tempo real

As funções também são objetos, para que possam ser usados como valores de retorno. A vantagem de usar funções auto-executadas é declarar diretamente uma função anônima e usá-la imediatamente, de modo a evitar definir uma função que não seja usada uma vez e é evitada do problema de nomear conflitos. Não existe um conceito de espaço para nome no JS, por isso é fácil ter conflitos de nomes de funções. Uma vez que um conflito de nomenclatura é feito, o último declarado prevalecerá.

Modo 1:

 <Cript> (function () {var a = 1; retornar function () {alert (2);};} () ()); // 2 aparece, os primeiros parênteses se executam, e os segundo parênteses executam funções anônimas internas </script>

Padrão 2: apontando variáveis de função auto-executiva

 <script type = "text/javascript"> var resultado = (function () {return 2;}) (); // o alerta da função (resultado); // resultado aponta para o valor de retorno 2 da função auto-executada; Se resultado () aparecer, ocorrerá um erro </sCript>

Padrão três: funções aninhadas

 <script type = "text/javascript"> var resultado = (function () {return function () {return 2;};}) (); alert (resultado ()); // quando alerta (resultado) function () {return 2} </sCript>

Modo 4: a função de auto-execução atribui seu valor de retorno a uma variável

 var abc = (function () {var a = 1; return function () {return ++ a;}}) (); // a função da função autoexecutiva retorna a função após o retorno ao alerta da variável (ABC ()); // se for alerta (ABC), o código após a declaração de retorno será aplicado; Se for ABC (), a função após o retorno será executada

Padrão 5: a função se executa internamente, recursivamente

 // Esta é uma função auto-executiva, a função se executa internamente, função recursiva ABC () {ABC (); }

Modo de retorno de chamada

Função de retorno de chamada: Quando você passa uma função Write () como um argumento para outra chamada de função (), Call () pode executar (ou chamar) write () em algum momento. Nesse caso, Write () é chamado de função de retorno de chamada.

Ouvinte de eventos assíncronos

O modo de retorno de chamada tem muitos usos, por exemplo, quando um ouvinte de evento é anexado a um elemento na página, ele realmente fornece um ponteiro para uma função de retorno de chamada que será chamada quando o evento ocorrer. como:

document.addeventListener ("clique", console.log, false);

O exemplo de código acima mostra o console da função de retorno de chamada.log () no modo bolha quando o documento clicar.

O JavaScript é especialmente adequado para programação orientada a eventos, porque o modo de retorno de chamada suporta programas para executar de forma assíncrona.

tempo esgotado

Outro exemplo de uso do modo de retorno de chamada é ao usar o método de tempo limite fornecido pelo objeto de janela do navegador: setTimeout () e setInterval (), como:

 <script type = "text/javascript"> var call = function () {console.log ("100ms serão solicitados ..."); }; setTimeout (ligue, 100); </sCript>

Modo de retorno de chamada na biblioteca

Ao projetar uma biblioteca JS, a função de retorno de chamada será útil. O código de uma biblioteca deve usar o código reutilizável o máximo possível, e o retorno de chamada pode ajudar a alcançar essa generalização. Quando projetamos uma enorme biblioteca JS, o fato é que os usuários não precisam da maior parte dela, podemos nos concentrar nas funções principais e fornecer funções de retorno de chamada em "forma de gancho", o que facilitará a construção, a escala e a personalização dos métodos de biblioteca.

Currying

A curry é uma técnica que converte uma função em uma nova função simplificada (para aceitar menos parâmetros), preenchendo vários parâmetros em um corpo de função. ― 【Proficiente em JavaScript】

Simplificando, a curryização é um processo de conversão, ou seja, o processo de nossa conversão de funções. Conforme mostrado no exemplo a seguir:

 <script type = "text/javascript"> // função add () add () add (x, y) {var oldx = x, oldy = y; if (typeof Oldy == "Undefined") {Return function (newy) {return Oldx + Newy; }; } // Aplicar completamente o retorno x+y; } // Tipo de teste de add (5); // output "function" add (3) (4); // 7 // Crie e armazene uma nova função var add2000 = add (2000); add2000 (10); // saída 2010 </sCript>

Quando add () é chamado pela primeira vez, ele cria um fechamento para a função interna retornada. Este fechamento armazena os valores originais de X e Y nas variáveis privadas OldX e Oldy.

Agora poderemos usar métodos comuns de curry de função arbitrária, como:

 <script type = "text/javascript"> // função ordinária função add (x, y) {return x + y; } // curry uma função para obter uma nova função var newadd = teste (add, 5); newadd (4); // 9 // Outra opção, ligue diretamente no novo teste de função (add, 6) (7); // saída 13 </sCript>

Quando usar curry

Quando se vê que a mesma função está sendo chamada e a maioria dos parâmetros passados é a mesma, então a função pode ser um bom candidato à curryização