Sim, existem algumas diferenças, embora em termos práticos geralmente não sejam grandes.
Existe uma quarta maneira, e a partir do ES2015 (ES6) há mais duas. Eu adicionei a quarta maneira no final, mas inseri as formas do ES2015 após o 1 (você verá o porquê), então temos:
var a = 0; // 1
let a = 0; // 1.1 (new with ES2015)
const a = 0; // 1.2 (new with ES2015)
a = 0; // 2
window.a = 0; // 3
this.a = 0; // 4
Essas declarações explicadas
# 1 var a = 0;
Isso cria uma variável global que também é propriedade do objeto global , ao qual acessamos como windownavegadores (ou via thisescopo global, em código não estrito). Ao contrário de outras propriedades, a propriedade não pode ser removida via delete.
Em termos de especificação, ele cria uma ligação de identificador no objeto Registro de Ambiente para o ambiente global . Isso o torna uma propriedade do objeto global porque é no objeto global que são mantidas as ligações de identificador para o registro de ambiente do objeto do ambiente global. É por isso que a propriedade não pode ser excluída: não é apenas uma propriedade simples, é uma ligação de identificador.
A ligação (variável) é definida antes da execução da primeira linha de código (consulte "Quando varacontece" abaixo).
Observe que no IE8 e versões anteriores, a propriedade criada em windownão é enumerável (não aparece nas for..ininstruções). No IE9, Chrome, Firefox e Opera, é enumerável.
# 1.1 let a = 0;
Isso cria uma variável global que não é uma propriedade do objeto global. Isso é algo novo a partir do ES2015.
Em termos de especificação, ele cria uma ligação de identificador no Declarative Environment Record para o ambiente global, em vez do objeto Environment Record. O ambiente global é o único a ter uma divisão Ambiente Record, um para todo o material antigo que se passa o objeto global (o objeto Ambiente Record) e outro para todo o material novo ( let, conste as funções criados por class) que não fazer vá no objeto global.
A ligação é criada antes da execução de qualquer código passo a passo em seu bloco anexo (neste caso, antes da execução de qualquer código global), mas não é acessível de maneira alguma até que a execução passo a passo chegue à letinstrução. Quando a execução atinge a letinstrução, a variável fica acessível. (Veja "Quando lete constacontece" abaixo.)
# 1.2 const a = 0;
Cria uma constante global, que não é uma propriedade do objeto global.
consté exatamente como letexceto que você deve fornecer um inicializador (a = valueparte), e você não pode alterar o valor da constante uma vez que é criado. Nos bastidores, é exatamente assim, letmas com uma bandeira na ligação do identificador dizendo que seu valor não pode ser alterado. O uso constfaz três coisas para você:
- Torna um erro de tempo de análise se você tentar atribuir à constante.
- Documenta sua natureza imutável para outros programadores.
- Permite que o mecanismo JavaScript seja otimizado com base em que não será alterado.
# 2 a = 0;
Isso cria uma propriedade no objeto global implicitamente . Como é uma propriedade normal, você pode excluí-la. Eu recomendo não fazer isso, pois pode não estar claro para quem ler seu código posteriormente. Se você usar o modo estrito do ES5, fazer isso (atribuir a uma variável inexistente) é um erro. É uma das várias razões para usar o modo estrito.
E, curiosamente, novamente no IE8 e versões anteriores, a propriedade criada não é enumerável (não aparece nas for..ininstruções). Isso é estranho, principalmente considerando o número 3 abaixo.
# 3 window.a = 0;
Isso cria uma propriedade explicitamente no objeto global, usando o windowglobal que se refere ao objeto global (em navegadores; alguns ambientes que não são de navegador têm uma variável global equivalente, como globalno NodeJS). Como é uma propriedade normal, você pode excluí-la.
Essa propriedade é enumerável, no IE8 e versões anteriores, e em todos os outros navegadores que tentei.
# 4 this.a = 0;
Exatamente como o nº 3, exceto que estamos referenciando o objeto global em thisvez do global window. Porém, isso não funcionará no modo estrito, porque no código global do modo estrito thisnão há uma referência ao objeto global (ele tem o valor undefined).
Excluindo propriedades
O que quero dizer com "excluindo" ou "removendo" a? Exatamente isso: Removendo a propriedade (inteiramente) por meio da deletepalavra-chave:
window.a = 0;
display("'a' in window? " + ('a' in window)); // displays "true"
delete window.a;
display("'a' in window? " + ('a' in window)); // displays "false"
deleteremove completamente uma propriedade de um objeto. Você não pode fazer isso com as propriedades adicionadas windowindiretamente via var, o deleteé silenciosamente ignorado ou gera uma exceção (dependendo da implementação do JavaScript e se você está no modo estrito).
Aviso : IE8 novamente (e presumivelmente mais cedo, e IE9-IE11 no modo "compatibilidade" quebrado): não permitirá que você exclua propriedades do windowobjeto, mesmo quando lhe for permitido. Pior, isso gera uma exceção quando você tenta ( tente esta experiência no IE8 e em outros navegadores). Portanto, ao excluir do windowobjeto, você deve estar na defensiva:
try {
delete window.prop;
}
catch (e) {
window.prop = undefined;
}
Isso tenta excluir a propriedade e, se uma exceção for lançada, ela fará a próxima melhor coisa e definirá a propriedade undefined.
Isso se aplica apenas ao windowobjeto e apenas (tanto quanto eu sei) ao IE8 e versões anteriores (ou IE9-IE11 no modo "compatibilidade" quebrado). Outros navegadores estão bem com a exclusão de windowpropriedades, sujeitas às regras acima.
Quando varacontece
As variáveis definidas por meio da varinstrução são criadas antes da execução de qualquer código passo a passo no contexto de execução e, portanto, a propriedade existe bem antes da varinstrução.
Isso pode ser confuso, então vamos dar uma olhada:
display("foo in window? " + ('foo' in window)); // displays "true"
display("window.foo = " + window.foo); // displays "undefined"
display("bar in window? " + ('bar' in window)); // displays "false"
display("window.bar = " + window.bar); // displays "undefined"
var foo = "f";
bar = "b";
display("foo in window? " + ('foo' in window)); // displays "true"
display("window.foo = " + window.foo); // displays "f"
display("bar in window? " + ('bar' in window)); // displays "true"
display("window.bar = " + window.bar); // displays "b"
Exemplo ao vivo:
display("foo in window? " + ('foo' in window)); // displays "true"
display("window.foo = " + window.foo); // displays "undefined"
display("bar in window? " + ('bar' in window)); // displays "false"
display("window.bar = " + window.bar); // displays "undefined"
var foo = "f";
bar = "b";
display("foo in window? " + ('foo' in window)); // displays "true"
display("window.foo = " + window.foo); // displays "f"
display("bar in window? " + ('bar' in window)); // displays "true"
display("window.bar = " + window.bar); // displays "b"
function display(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
document.body.appendChild(p);
}
Como você pode ver, o símbolo fooé definido antes da primeira linha, mas o símbolo barnão é. Onde está a var foo = "f";declaração, há realmente duas coisas: definir o símbolo, o que acontece antes da execução da primeira linha de código; e fazendo uma atribuição a esse símbolo, o que acontece onde a linha está no fluxo passo a passo. Isso é conhecido como " variçamento" porque a var foopeça é movida ("içada") para a parte superior do escopo, mas a foo = "f"peça é deixada em seu local original. (Veja Pobre mal entendidovar no meu pequeno blog anêmico.)
Quando lete constacontecer
lete constsão diferentes de varduas maneiras. A maneira que é relevante para a pergunta é que, embora a ligação que eles definem seja criada antes da execução de qualquer código passo a passo, ela não estará acessível até que a instrução letou constseja alcançada.
Então, enquanto isso é executado:
display(a); // undefined
var a = 0;
display(a); // 0
Isso gera um erro:
display(a); // ReferenceError: a is not defined
let a = 0;
display(a);
As outras duas maneiras que diferem lete que não são realmente relevantes para a questão são:constvar
varsempre se aplica a todo o contexto de execução (em todo código global, ou durante todo código de função na função de onde ele aparece), mas lete constse aplicam apenas dentro do bloco onde eles aparecem. Ou seja, vartem a função (ou global) escopo, mas lete consttem escopo de bloco.
recorrente var a no mesmo contexto é inofensivo, mas se você tiver let a(ou const a), ter outro let aou a const aou a var aé um erro de sintaxe.
Aqui está um exemplo demonstrando que let e constentra em vigor imediatamente no bloco antes que qualquer código desse bloco seja executado, mas não está acessível até a instrução letou const:
var a = 0;
console.log(a);
if (true)
{
console.log(a); // ReferenceError: a is not defined
let a = 1;
console.log(a);
}
Observe que o segundo console.logfalha, em vez de acessar o ade fora do bloco.
Fora do tópico: Evite sobrecarregar o objeto global ( window)
O windowobjeto fica muito, muito cheio de propriedades. Sempre que possível, é altamente recomendável não adicionar à bagunça. Em vez disso, embrulhe seus símbolos em um pequeno pacote e exporte no máximo um símbolo para o windowobjeto. (Frequentemente não exporto nenhum símbolo para o windowobjeto.) Você pode usar uma função para conter todo o seu código, a fim de conter seus símbolos, e essa função pode ser anônima, se você quiser:
(function() {
var a = 0; // `a` is NOT a property of `window` now
function foo() {
alert(a); // Alerts "0", because `foo` can access `a`
}
})();
Nesse exemplo, definimos uma função e a executamos imediatamente (a ()no final).
Uma função usada dessa maneira é freqüentemente chamada de função de escopo . As funções definidas na função de escopo podem acessar variáveis definidas na função de escopo porque são fechamentos sobre esses dados (consulte: Encerramentos não são complicados no meu pequeno blog anêmico).