Nomes, vinculação, escopo e closures em JavaScript #14
Description
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.