Javascript Funções aninhadas

Funções aninhadas de JavaScript são os tipos de funções definidas em outra função. Uma ou mais funções podem ser adicionadas dentro de uma função, e o escopo das funções externas inclui essas funções aninhadas ou internas. As funções externas também são chamadas de funções pais, e as funções internas podem ser nomeadas como funções infantis em funções aninhadas de JavaScript. As variáveis ​​e os parâmetros da função pai são acessíveis à função filho, enquanto a função pai não pode acessar as variáveis ​​declaradas dentro das funções da criança.

Este artigo discutiu funções aninhadas de JavaScript. Além disso, também explicamos o escopo variável, parâmetros e declarações de retorno das funções aninhadas com a ajuda dos exemplos.

Javascript Funções aninhadas

Em JavaScript, uma função aninhada é uma função que é definida dentro ou dentro de outra função. O procedimento para criar uma função aninhada é a mesma que seguimos para a função normal, mas para criar uma função aninhada, precisamos definir a função nova ou infantil dentro da função pai.

Aqui está o Sintaxe de funções aninhadas de JavaScript:

Função ParentFunction () // Definição da função

Função infunção de crianças () // definição de função

// corpo da função infantil

ChildFunção (); // Chamada de função infantil

ParentFunction (); // Chamada de função pai

Como você pode ver na sintaxe, precisamos definir a infunção da criança () dentro da função parental (). Além disso, quando queremos invocar a função infantil (), precisamos chamá -lo dentro do corpo da função parental ().

Exemplo: Usando funções aninhadas de JavaScript

Este exemplo mostrará como criar funções aninhadas de JavaScript. Para esse fim, definiremos uma função pai chamada “addNum ()”, Que tem dois parâmetros,“x" e "y”. Depois de fazer isso, criaremos uma função filho “Mostrar mensagem()”Que imprime uma mensagem de texto para a janela do console:

função addnum (x, y)

// Função aninhada
Função ShowMessage (texto)

console.log (texto);

Deixe sum = x+y;
// invocando a função aninhada
showMessage ("Sum é"+ soma)

Observe que chamamos de “Mostrar mensagem()”Função dentro da definição de função do“addNum ()”Função. Na próxima etapa, chamaremos a função pai addNum () ao passar “5" e "6”Como argumentos:

addnum (5,6)

Como você pode ver na saída, executamos com sucesso as funções aninhadas do nosso exemplo:

Escopo variável de funções aninhadas de JavaScript

Agora, vamos falar sobre o escopo das funções aninhadas em JavaScript. As funções aninhadas têm seu próprio escopo; No entanto, eles também podem acessar o escopo da função pai ou externa. Você deve ter em mente dois pontos sobre o escopo variável das funções aninhadas de JavaScript: uma função aninhada é privada para sua função pai e uma função aninhada tem acesso ao escopo da função pai.

Explicaremos cada uma das declarações dadas com a ajuda de exemplos.

Como afirmamos, a função aninhada é considerada “privado”Para a função que contém sua definição. Isso significa que apenas o pai ou a função contendo pode acessar a função aninhada, e você não poderá acessá -la fora da função especificada. Isso acontece porque definimos a função interna dentro do escopo da função externa.

Por exemplo, definimos uma função externa “Adicionar número()”No código abaixo e depois adicionou a função interna“Mostrar mensagem()”Na definição da função externa:

função addNumber (x, y)

Função ShowMessage (texto)

console.log (texto);

Deixe sum = x+y;
showMessage ("Sum é" + soma)

Agora, quando tentamos acessar a função interna “Mostrar mensagem()"Fora de seu escopo, ele jogará o"ReferenceError não capturado”Erro:

showMessage ('20 ');

Todas as funções, variáveis ​​e argumentos definidos na função externa são acessíveis à função aninhada criada. Essa habilidade é conhecida como "escopo lexical", onde a função interna pode acessar o escopo da função pai ou externa.

Não passaremos nenhum argumento para nossa função interna do showMessage (). O que faremos é utilizar os argumentos “x" e "y" nosso "Adicionar número()”Função externa e a“soma" variável:

função addNumber (x, y)

função showMessage ()

console.log ('soma de %d + %d é %d', x, y, soma);

Deixe sum = x+y;
Mostrar mensagem()

Agora, invocaremos a função externa “Adicionar número()"E passar o"4" e "6”Como argumentos:

AddNumber (4,6)

Dê uma olhada na saída abaixo do ritmo, o que significa que acessamos com sucesso o “soma" variável, "x", e "y”Argumento da função externa addNumber na função showMessage ():

Retornando uma função aninhada de JavaScript

A função externa tem a capacidade de devolver a função aninhada. Por exemplo, no exemplo abaixo, a função DisplayCounter () tem um “contar”Variável e retorna a função interna increment ():

função displayCounter ()
deixe count = 0;
increment = function ()
retornar ++ contagem;
;
incremento de retorno;

Guaremos a função DisplayCounter () na “contador”Na próxima etapa. Agora, o conceito que precisamos discutir aqui é que o “incremento()”A função ainda terá acesso ao“contar"Propriedade do"DisplayCounter ()”Função quando o displayCounter () terminou a execução. ““Fecho”, Um recurso JavaScript, torna isso possível.

Aqui o "contar”A propriedade é local para o“DisplayCounter ()”Função, no entanto, o definido“incremento”A função também pode acessá -la porque está aninhada dentro do“DisplayCounter ()”Função:

contador = displayCounter ()

O código acima foi chamado de “DisplayCounter ()”Função. Em seguida, a função DisplayCounter () inicializará primeiro o “contar”Variável para a“0”Valor e depois retorna o“incremento()”Função. Porque o "contar”A propriedade não é destruída, quando chamaremos a função de incremento através do“contador()", Cada vez que"contar”A propriedade será incrementada de acordo com o código adicionado:

console.log (contador ());
console.log (contador ());
console.log (contador ());

Confira a saída abaixo do exemplo do exemplo fornecido:

Parâmetros de funções aninhadas de JavaScript

A função interna também pode assumir argumentos. Por exemplo, no exemplo seguinte, o “Innerfunction ()"É devolvido pelo"ExterterFunction ()”E cada um deles aceita um conjunto de argumentos:

Função externa (x)
Innerfunction = function (y)
console.log ("x %d y %d", x, y)
;
retornar a função interna;

Para obter o Innerfunction (), Adicionaremos o seguinte código em nosso programa JavaScript ao passar “3”Como argumento para o ExterterFunction ():

INNERFUNCTION = EXTERFUNCTION (3);

Em seguida, invocaremos a função innerFunction () com valor “7”Como argumento:

INNERFUNCIONAL (7);

Você também pode passar os argumentos para as funções externas e internas de uma só vez:

Função externa (2) (3);

Ambas as linhas especificadas do código invocaram o InnerFunction () e a saída dos argumentos aprovados:

Conclusão

O JavaScript permite que você use funções aninhadas no programa sem encontrar erros. Uma função criança ou interna pode ser adicionada dentro de uma função externa em JavaScript. Todas as variáveis ​​locais e globais da função externa são acessíveis à função interna. No caso da função externa, apenas os valores das propriedades globais e os métodos e variáveis ​​definidos nas funções dos pais são acessíveis. Este artigo discutiu funções aninhadas de JavaScript. Além disso, também explicamos o escopo variável, a propriedade de fechamento, o escopo lexical, os parâmetros e as declarações de retorno das funções aninhadas de JavaScript, com a ajuda dos exemplos.