Uma breve análise do escopo em JavaScript (recomendado)

O chamado escopo pode ser simplesmente entendido como um escopo (área) que pode ser lido e escrito. Alguns estudantes com experiência em JS podem dizer: "O JS não tem escopo em nível de bloco". Além do escopo global, apenas as funções podem criar escopos. Uma vantagem do escopo é que ele pode isolar variáveis.

Usamos alguns exemplos para nos ajudar a entender o escopo no JS.

 alerta (a); var a = 1;

Se os alunos que não conhecem o escopo podem dizer que o alerta é 1 ou relatar um erro; Mas na verdade é indefinido;

Falando nisso, vamos primeiro falar sobre alguns preparativos feitos antes de JS analisar a linha de código por linha.

Antes de ler a linha por linha, o JS fará algum trabalho de "pré-parto" e encontrará algumas "pequenas coisas" com antecedência. Obviamente, "JS Parser" não encontrará alguns dados casualmente, o encontrará de acordo com VAR, função e parâmetros.

"JS Parser" é relativamente "preguiçoso". Antes de executar oficialmente o código, ele atribuirá a variável declarada pelo VAR para indefinida, ou seja, var a = indefinido; Ele considerará toda a função como um bloco de código, independentemente de quanto código existe. Os parâmetros serão ditos nos exemplos posteriormente.

Depois que todos os preparativos são feitos, o "JS Parser" começa a executar a linha por linha. Agora, vamos analisar o exemplo que começamos e é fácil entender por que está indefinido.

Vamos dar uma olhada no exemplo seguinte

 alerta (a); var a = 1; alerta (a); var a = 2; alerta (a);

Vamos analisar um pouco isso

Primeiro "Preparse": o analisador procurará VAR

Ao ler a segunda linha A = indefinida;

Ao ler a quarta linha, ainda a = indefinido;

Execução formal de linha linha a linha:

Alerta de primeira linha: indefinido

A segunda linha A = 1;

Alerta de linha 3: 1;

O quinto elemento alerta: 2

Vejamos o exemplo abaixo

 alerta (a); var a = 1; alerta (a); função a () {alert (2); } alerta (a); var a = 3; alerta (a); função a () {alert (4); } alerta (a);

Vamos analisar um pouco a pouco

Primeiro, "pré-parse": o analisador procurará função var;

Ao ler a segunda linha A = indefinida;

Ao ler a quarta linha A = função a () {alert (2);} // Todas as funções são o bloco de funções inteiro antes de executar oficialmente o código; Quando uma variável encontra um nome duplicado, apenas uma variável é deixada. Se a variável e a função forem o nome duplicado, apenas a função será deixada.

Ao ler a sexta linha, a = função a () {alert (2);}

Ao ler a oitava linha, a = função a () {alert (4);}

Execução formal de linha linha a linha:

Alerta de primeira linha: função a () {alert (4);}

A segunda linha A = 1; // A expressão pode modificar o valor pré-parto!

Alerta de linha 3: 1;

A quarta linha de função não é chamada, pular;

O quinto elemento alerta: 1;

Linha seis a = 3;

Linha 7 Alerta: 3

A função da oitava linha não é chamada, pular;

Linha 9 Alerta: 3

Como mostrado na figura:

Continue a ver o exemplo:

 var a = 1; função fn1 () {alert (a); // indefinido var a = 2;} fn1 (); alerta (a); // 1

Primeiro "Preparse": o analisador procurará a função VAR

Ao ler a primeira linha A = indefinida;

Ao ler a segunda linha fn1 = função fn1 () {alert (2); var a = 2;}

Execução formal de linha de linha: primeira linha A = 1;

A sexta chamada de função de linha, insira o escopo da função e ainda pré-parse no escopo da função e, em seguida, execute-o linha por linha.

Prepare dentro da função: a = indefinido;

Execução: Alerta: indefinido;

a = 2; // a neste momento é apenas um escopo de função e não afetará um no global

A função é executada e retorna ao escopo global;

Linha sete alerta: 1;

continuar:

 var a = 1; função fn1 () {alert (a); // 1 a = 2;} fn1 (); alerta (a); // 2

A única diferença entre o exemplo acima é que A na função não possui VAR e apenas analisa os pontos -chave.

No alerta da terceira linha (a), no escopo da função, uma vez que não há var a na função, o "analisador" procurará um escopo de nível superior do escopo da função (a determinação do relacionamento de nível superior e de nível inferior depende de inferior). Neste momento, o nível superior da função é o escopo global. No escopo global, a = 1, então, neste momento, o alerta da terceira linha: 1 e, em seguida, a quarta linha, a = 2 atribui o valor, ainda não há A no escopo da função; portanto, encontre um escopo de nível superior: ou seja, o escopo global, e modificar o escopo global;

Este ponto deve ser entendido claramente e prestar atenção à diferença entre VAR ou não.

Próximo:

 var a = 1; função fn1 (a) {alert (a); // indefinido a = 2; } fn1 (); alerta (a); // 1

A diferença entre este exemplo e a anterior é que existe um parâmetro adicional. A função do parâmetro é equivalente a uma variável local, ou seja, haverá var a = indefinido no pré-parto na função. Portanto, o alerta da terceira linha: indefinido e a quarta linha A = 2 altera o A no escopo da função, que não afeta A no contexto global. O alerta da sétima linha: 1;

então:

 var a = 1; função fn1 (a) {alert (a); // 1a = 2;} fn1 (a); alerta (a); // 1

Este exemplo é um pouco diferente do anterior. Quando a função é chamada na sexta linha, um parâmetro é passado. O parâmetro real A da sexta função é 1 da variável global a = 1. Quando a função é executada, a segunda linha A = 1, portanto o alerta da terceira linha: 1 e o sétimo alerta de linha: 1.

Preste atenção à diferença entre esses exemplos e não os confunda.

Outro:

 var a = 1; função en () {var a = 2; fn ();} função fn () {alert (a); // 1} pt ();

A em FN não é declarado e você precisa assumir o valor no escopo em que a função é criada - ela é "criada", não "chamada" do escopo da função.

PS: Conceitos de escopo e contexto em JavaScript

Escopos e contextos no JavaScript são exclusivos desse idioma, graças em parte à flexibilidade que eles trazem. Cada função possui um contexto e escopo variáveis ​​diferentes. Esses conceitos são apoiados por alguns poderosos padrões de design em JavaScript. No entanto, isso também traz grande confusão aos desenvolvedores. A seguir, revela totalmente as diferenças de contexto e escopo no JavaScript e como vários padrões de design as usam.

Contexto vs escopo

A primeira pergunta a ser esclarecida é que o contexto e o escopo são conceitos diferentes. Ao longo dos anos, notei que muitos desenvolvedores costumam confundir esses dois termos, descrevendo erroneamente um como o outro. Para ser justo, esses termos se tornaram muito confusos.

Cada chamada de função tem um escopo e um contexto associados a ele. Fundamentalmente, o escopo é baseado em funções e o contexto é baseado em objetos. Em outras palavras, o escopo está relacionado ao acesso a variáveis ​​sempre que a função é chamada e cada chamada é independente. O contexto é sempre o valor da palavra -chave, uma referência ao objeto que chama o código executável atual.

O exposto acima é o escopo do JavaScript introduzido pelo editor (recomendado). Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!