Nomes, vinculação, escopo e closures em JavaScript

O código abaixo (HTML com JavaScript) abaixo ilustra o comportamento de escopo na linguagem JavaScript na procura por variáveis. Para testar, coloque o conteúdo em um arquivo .html e abra em um navegador (por exemplo, no firefox, mas pode testar em diferentes navegadores para ver se a implementação da linguagem difere). Identifique se o escopo é dinâmico ou estático baseado nas respostas.

<!DOCTYPE html>
<html>
  <body>
    <button onclick="main()">Clique para ativar a função</button>
    <h4>Resultado do print 01 -></h4>
    <p id="print01">...</p>
    <h4>Resultado do print 02 -></h4>
    <p id="print02">...</p> 
    <h4>Resultado do print 03 -></h4>
    <p id="print03">...</p> 
    <h4>Resultado do print 04 -></h4>
    <p id="print04">...</p> 

    <script type="text/javascript">
i = 0;
var x = 1;
function inc (n) {
    x = x + n;
}

function print () {
    switch(i){
        case 0: document.getElementById("print01").innerHTML = x; 
            i++;
            break;
        case 01:document.getElementById("print02").innerHTML = x; 
            i++;
            break;
        case 02:document.getElementById("print03").innerHTML = x; 
            i++;
            break;
        case 03:document.getElementById("print04").innerHTML = x; 
            i++;
            break;
    }
}

function primeiro () {
    inc (7);
    print ();
}

function segundo () {
    let x = 9;
    inc (3);
    print ();
}

function main(){
    inc (-1);
    primeiro ();
    print ();
    segundo ();
    print ();
}
</script>
</body>
</html>

Mais detalhes sobre vinculação em JavaScript podem ser encontrados na disciplina MATA56 da UFBA.

schnorr / mlp

Nomes, vinculação, escopo e closures em JavaScript #14