Pergunta

Algum tempo atrás eu postei uma pergunta sobre que perguntas devem uma boa javascript codificador ser capaz de responder . Meder apontou a seguinte pergunta:

O código a seguir faz cliques em qualquer elemento "a" para alert (-1), devido ao fato de que "i" está detido na função onclick como referência e não como um valor:

<a href="#">text</a><br><a href="#">link</a>
<script>
var as = document.getElementsByTagName('a');
for ( var i = as.length; i--; ) {
    as[i].onclick = function() {
        alert(i);
        return false;
    }
}
</script>

A questão é: Como corrigir isso implementação para que o onclick função contém o valor de i e não -lo de referência?

Eu não sei a resposta. Como corrigi-lo? Como fazer eu ser uma cópia do valor de referência, em vez da referência real?

questões laterais: todos os tipos de variáveis ??passado como uma referência? Ou varia sobre se é um tipo primitity ou um objeto?

Qualquer pensamento seria apreciado.

Foi útil?

Solução

Para entender este problema, você deve aprender o que é um fechamento é. Em seguida, você também deve saber ofertas como JavaScript com escopo (que está em uma função-base, em vez de um bloco-base como C, por exemplo).

Aqui está a solução "stantard":

<a href="#">text</a><br><a href="#">link</a>
<script type="text/javascript">
var as = document.getElementsByTagName('a');
for ( var i = as.length; i--; ) {
    as[i].onclick = (function(i) {
        return function() {
            alert(i);
            return false;
        }
    })(i);
}
</script>

Outra versão que faz exatamente a mesma coisa, mas pode ser mais fácil de entender se você não está acostumado a encerramentos e escopo em JS é:

for ( var i = as.length; i--; ) {
    as[i].onclick = (function(number) {
        return function() {
            alert(number);
            return false;
        }
    })(i);

Got a idéia?

Outras dicas

<a href="#">text</a><br><a href="#">link</a>
<script>
var as = document.getElementsByTagName('a');
for ( var i = as.length; i--; ) {
    as[i].onclick = function() {
        return function() {
           alert(i);
           return false;
        }
    }();
}
</script>

talvez?

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top