14

Situação

Estou aprofundando meus estudo um JavaScript, e me surgiu um pequena dúvida.
Em closure, encapsulamento e escopo de variável, todos mostram como usar o var e falam sobre escopo Local e Global, contudo em todos os exemplos que vi sempre se usam variáveis com os nomes diferentes a media que se "desce".

Exemplo

function x() {              // "x" tem acesso a "a"
    var a;
    function y() {          // "y" tem acesso a "a" e "b"
        var b;
        function z() {      // "z" tem acesso a "a", "b", e "c"
            var c;

Duvida

Como acessar a variável do "pai" quando existe a mesma no local?

Exemplo

function x() {              // "x" tem acesso a "a"
    var a;
    function y() {          // "y" tem acesso a "x.a" e "a"
        var a;
        function z() {      // "z" tem acesso a "x.a", "x.y.a", e "a"
            var a;

Teste

Quando a variável é global (não é recomendado) posso fazer assim:

var a = 'Global';
function(){
    var a = 'Local';
    console.log(window['a']);
    console.log(a);
}
4
  • 4
    Essa acessibilidate ai, parece estar ligada com adequação de recursos a diversos públicos, como sistema ter funcionalidade de contraste ou ser adequado a deficientes visuais etc. xD Na dúvida da olhada nas perguntas linkadas por essa tag.
    – rray
    Commented 28/10/2015 às 14:20
  • Tag removida @rray. Commented 28/10/2015 às 14:55
  • nessa resposta expliquei um pouco sobre escopos quando se utiliza a palavra chave new: pt.stackoverflow.com/a/85755/13561, pode estar relacionado Commented 10/11/2015 às 13:17
  • Obrigado @Sanção irei ler assim que possível. Commented 10/11/2015 às 13:50

2 Respostas 2

11

No caso de acessar a variável da função anteriormente ao escopo declarado, eu sugeriria que você fizesse isso na propriedade da função, já que se tornaria algo difícil ou impossível de acessar a variável anteriormente declarada.

Ao invés de fazer assim:

function x() {
    var a = 1;

    function z() {
        var a = 2;
    }
}

Poderia ser feito assim:

function x() {  
    x.a = 1;
    function z() {
        z.a = 2;
        console.log(x.a); // Imprime '1'
    }
}

Geralmente, há alguns casos especiais onde é necessário acessar uma variável com escopo anterior, para simular algo parecido com variáveis estáticas.

Quando há essa necessidade, costumo utilizar uma self invoking function, com suas variáveis declaradas, sendo acessada os dados por uma função no retorno.

Exemplo:

var noMultihits = function ()
{
       var timeout = 0;

        return function (time, callback) { 
             // Sempre limpa o timeout anterior
             // A variável é de outro escopo
            clearTimeout(timeout);

            timeout = setTimeout(callback, time)
        }
})();

noMultihits(500, function (){});
noMultihits(500, function (){});
noMultihits(500, function (){}); 
// Só executa o último, pois a variável é do escopo da funçao autoexecutável

A vantagem disso é:

  • Não poluir o escopo global.

  • Se não polui o escopo global, não há risco de colisão de nomes de variáveis.

Ainda utilizando as self invoking functions (funções auto executáveis) é possível unir as duas soluções, para utilizar algo que eu chamaria de objeto anônimo.

var ajaxInfinito = (function anonimo()
{
   anonimo.pagina = 1;

    return function () {
       console.log(anonimo.pagina);
       $.ajax({
          url: 'pagina',
          data: {pagina: anonimo.pagina},
          success: function () { 

              anonimo.pagina++
          }
       });
    }
})()



   ajaxInfinito(); // 1
   ajaxInfinito(); // 2
   ajaxInfinito(); // 3
   ajaxInfinito(); // 4
   ajaxInfinito(); // 5

console.log(anonimo); // undefined, só existe no escopo da self-invoking

Nesse caso vamos fazer observações importantes:

  • ajaxInfinito receberá apenas o valor da função que está no return da expressão anonimo.

  • anonimo não é uma declaração de uma função, e sim uma expressão. Eu chamaria isso de closure nomeada. Note que o console.log em anonimo vai dizer que a variável não existe. Isso porque esse nome só é válido dentro do escopo da função autoexecutável.

  • Como estamos em outro escopo, o valor de anonimo.pagina vai sempre incrementar a cada chamada, já que ela faz parte do escopo da função autoexecutável cujo nome interno é anonimo.

Se for necessário simplificar o acesso aos valores de anonimo, poderia ser utilizado a função with.

Veja:

var soma = (function obj(){
     obj.y = 4;
     obj.z = 5;

   return function () {
        var x = 3;

        with(obj) {
             x += y;               
             x += z;
        }

      return x;
   }
})();

 soma(); // 12

Mudança de contexto

O @GuilhermeLautert comentou sobre a utilização do this. Não é possível utilizar ele diretamente, já que o contexto das funções quando são chamadas é o window. Apenas quando são instanciadas é que this faz referência ao próprio objeto.

O que pode ser feito é mudar o contexto em que o this é utilizado pela função, passando outros valores. Isso é feito através do método call.

Exemplo:

function nome (pronome) {
    return pronome + ':' + this.a + ' ' + this.b;
}

nome.call({a : 'Wallace', b : 'Souza'}, 'Senhor'); // Senhor: Wallace Souza
nome.call({a : 'Guilherme', b : 'Lautert'}, 'Mister'); // Mister: Guilherme Lautert

A função $.proxy do jQuery faz algo parecido, porém é algo que já existe nativamente.

13
  • 2
    Não tinha pensado nesta maneira de fazer, você seta uma propriedade na função (já que "tudo" em javascript é objeto), acho que é a melhor solução +1
    – Syzoth
    Commented 28/10/2015 às 14:30
  • 2
    Qual foi o motivo de ter ganhado -1? Falem o que pode ser melhorado! Commented 28/10/2015 às 14:37
  • 2
    Também não entendi :/ Vai ver que a pessoa que deu -1 acha que isto é gambiarra.
    – Syzoth
    Commented 28/10/2015 às 14:38
  • 2
    @GuilhermeLautert, sim, há diferença. Considerando que você está utilizando a função como função (é estranho dizer isso), e não como instância de objeto. Se você usar o this, ele estará no contexto de windows. A não ser que você utilize a técnica call Commented 28/10/2015 às 15:29
  • 2
    Pronto, @GuilhermeLautert. Adicionei o exemplo no post, pra voce entender melhor. Commented 28/10/2015 às 15:41
7

Quando você define uma variável local com o mesmo nome de uma variável de escopo mais alto, a variável local sobrescreve o acesso a variável de escopo maior.

Uma forma de contornar isto seria associando a variável à instância da função. Exemplo:

function alfa()
{
  alfa.a = "valor em alfa.a";

  function beta() {
    var a = "valor de a local";
    console.log(alfa.a);
  }
  beta();
}

alfa();

Porém este tipo de código cheira mal e seria recomendado utilizar nomes diferentes para tal propósito.

8
  • 3
    Boa tarde Clayton, boa resposta, mas ficou basicamente a mesma resposta do Wallace: pt.stackoverflow.com/a/95094/3635 - espero que leve isto como uma critica construtiva. (Não fui eu quem deu o -1)
    – Syzoth
    Commented 28/10/2015 às 14:33
  • 2
    Obrigado pela crítica Guilherme, estava editando a resposta e tive que sair. Quando voltei e terminei, já havia outra resposta. Commented 28/10/2015 às 14:43
  • 2
    Não acho que seja motivo para negativar a resposta do cara. Se a resposta fosse ruim, a outra também teria um negativo já que são semelhantes, engraçado não!? +1 Commented 28/10/2015 às 14:45
  • 2
    @renan mas tinha sim um -1 na outra. Acho que o motivo do -1 foi outra coisa :/ Vai saber
    – Syzoth
    Commented 28/10/2015 às 14:55
  • 1
    Era eu que tinha dado o -1 porque achei que tinha copiado a resposta, mas daí eu vi que ele falou uma coisa que acontece muito: O cara publica ao mesmo tempo e acaba parecendo cópia, mesmo não sendo. Eu retirei Commented 28/10/2015 às 15:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .