Antes de aprender sobre escopo de variáveis em JavaScript, devemos esclarecer alguns pontos:
•O escopo variável do JavaScript é baseado em sua cadeia de escopo exclusiva.
•JavaScript não possui escopo em nível de bloco.
•As variáveis declaradas em uma função são definidas em toda a função.
1. Cadeia de escopo JavaScript
Primeiro observe o seguinte código:
Copie o código do código da seguinte forma:
<script type="text/javascript"> var rain = 1; function rainman(){ var man = 2; } rainman(); //Chama a função rainman</script>
Observe o código alerta(chuva);. O JavaScript primeiro verifica se a variável chuva está definida na função interna. Se estiver definida, a variável chuva na função interna será usada. Se a variável chuva não estiver definida na função interna, o JavaScript continuará a verificar se a variável chuva. é definido na função rainman. Neste código, a variável rain não está definida no corpo da função rainman, então o mecanismo JavaScript continuará a procurar (objeto global) para ver se a chuva está definida no objeto global, temos; chuva definida = 1, então o resultado final aparecerá '1'.
Cadeia de escopo: quando o JavaScript precisa consultar uma variável x, ele primeiro pesquisará o primeiro objeto na cadeia de escopo. Se o primeiro objeto não definir o Se não houver definição, a pesquisa continuará e assim por diante.
O código acima envolve três objetos de cadeia de escopo, em ordem: inner, rainman e window.
2. Dentro do corpo da função, as variáveis locais têm prioridade mais alta do que as variáveis globais com o mesmo nome.
Copie o código do código da seguinte forma:
<script type="text/javascript"> var rain = 1; //Defina a variável global rain function check(){ var rain = 100; aqui } check(); alert( rain ); //1 aparecerá aqui</script>
3. JavaScript não possui escopo em nível de bloco.
Esta também é a parte onde o JavaScript é mais flexível do que outras linguagens.
Observe o código abaixo com atenção, você descobrirá que os escopos das variáveis i, j e k são iguais e são globais em todo o corpo da função de chuva.
Copie o código do código da seguinte forma:
<script type="text/javascript"> function rainman(){ // Existem três variáveis locais ijk no corpo da função rainman var i = 0; k < 3; k++) { alert( k ); //Pop up 0 1 2 respectivamente } alert( k );
4. As variáveis declaradas na função são definidas em toda a função.
Primeiro observe este código:
Copie o código do código da seguinte forma:
<script type="text/javascript"> function rain(){ var x = 1; function man(){ x = 100; //Call man alert( x ); } chuva(); //chama chuva</script>
O código acima ilustra que a variável x pode ser usada em todo o corpo da função rain e pode ser reatribuída. Devido a esta regra serão produzidos resultados “inacreditáveis”, observe o código abaixo.
Copie o código do código da seguinte forma:
<script type="text/javascript"> var x = 1; function rain(){ alert( x ); /pop 'homem-chuva' } chuva();</script>
Isso ocorre porque a variável local x na função chuva é definida em todo o corpo da função (var x= 'rain-man', declarado), então a variável global x com o mesmo nome fica oculta em todo o corpo da função chuva. A razão pela qual 'indefinido' aparece aqui é porque quando alert(x) é executado pela primeira vez, a variável local x ainda não foi inicializada.
Portanto, a função de chuva acima é equivalente à seguinte função:
Copie o código do código da seguinte forma:
função chuva(){ var x alerta( x );
5. Variáveis definidas sem usar a palavra-chave var são variáveis globais.
Copie o código do código da seguinte forma:
<script type="text/javascript"> function rain(){ x = 100; //A variável global x é declarada e atribuída} alert( x );
Este também é um erro comum entre iniciantes em JavaScript, deixando muitas variáveis globais involuntariamente.
6. Variáveis globais são todas propriedades do objeto janela.
Copie o código do código da seguinte forma:
<script type="text/javascript"> var x = 100; alert( window.x);//aparece 100 alert(x);</script>
Equivalente ao seguinte código
Copie o código do código da seguinte forma:
<script type="text/javascript"> janela.x = 100; alerta( janela.x );