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.
new
: pt.stackoverflow.com/a/85755/13561, pode estar relacionado