Let w JavaScript

ECMAScript 2015

ECMAScript 2015 wprowadził dwa ważne nowe kluczowe słowa w JavaScript:let i const.

Te dwa kluczowe słowa w JavaScript oferują zasięg blokowy (Block Scope) zmienne (i stałe).

Przed ES2015 JavaScript miał tylko dwa typy zasięgu:Zasięg globalnyiZasięg funkcji.

Zasięg globalny

GlobalnyZmienne deklarowane (poza funkcją) mająZasięg globalny.

Przykład

var carName = "porsche";
// Kodeks tutaj może używać carName
function myFunction() {
  // Kodeks tutaj może używać carName
}

Spróbuj sam

GlobalnyZmienne mogą być dostępne w dowolnym miejscu programu JavaScript.

Zasięg funkcji

LokalnyZmienne deklarowane (w funkcji) mająZasięg funkcji.

Przykład

// Kodeks tutaj nie może używać carName
function myFunction() {
  var carName = "porsche";
  // code here CAN use carName
}
// Kodeks tutaj nie może używać carName

Spróbuj sam

LokalnyZmienne są dostępne tylko w funkcji, w której zostały zadeklarowane.

Zasięg blokowy JavaScript

przez var Zmienne deklarowane przez kluczowe słowa nie mają zasięgu blokowegoZasięg.

W bloku {} Zmienne deklarowane wewnątrz bloku są dostępne z zewnątrz bloku.

Przykład

{ 
  var x = 10; 
}
// Tutaj można używać x

Przed ES2015 JavaScript nie miał zasięgu blokowego.

Można użyć let Kluczowe słowa deklarują zmienne o zasięgu blokowym.

W bloku {} Zmienne deklarowane wewnątrz bloku nie są dostępne z zewnątrz bloku:

Przykład

{ 
  let x = 10;
}
// Tutaj nie można używać x

Ponowne deklarowanie zmiennych

Użycie var Kluczowe słowa ponownego deklarowania zmiennej mogą powodować problemy.

Ponowne deklarowanie zmiennej w bloku również ponownie deklaruje zmienne poza blokiem:

Przykład

var x = 10;
// Tutaj x wynosi 10
{ 
  var x = 6;
  // Tutaj x wynosi 6
}
// Tutaj x wynosi 6

Spróbuj sam

Użycie let Kluczowe słowa ponownego deklarowania zmiennej rozwiązują ten problem.

Ponowne deklarowanie zmiennej w bloku nie ponownie deklaruje zmiennej poza blokiem:

Przykład

var x = 10;
// Tutaj x wynosi 10
{ 
  let x = 6;
  // Tutaj x wynosi 6
}
// Tutaj x wynosi 10

Spróbuj sam

Wspierane przeglądarki

Internet Explorer 11 i wcześniejsze wersje nie wspierają w pełni let kluczowe słowa.

Poniższa tabela definiuje pierwszą w pełni wspieraną let Przeglądarka wersji kluczowych:

Chrome 49 IE / Edge 12 Firefox 44 Safari 11 Opera 36
Marzec 2016 roku Lipiec 2015 roku Styczeń 2015 roku Wrzesień 2017 roku Marzec 2016 roku

Zasięg pętli

Użycie w pętli var:

Przykład

var i = 7;
for (var i = 0; i < 10; i++) {
  // Niektóre instrukcje
}
// Tutaj, i wynosi 10

Spróbuj sam

Użycie w pętli let:

Przykład

let i = 7;
for (let i = 0; i < 10; i++) {
  // Niektóre instrukcje
}
// Tutaj i wynosi 7

Spróbuj sam

W pierwszym przykładzie, zmienna używana w pętli var Zmienna poza pętlą została ponownie zadeklarowana.

W drugim przykładzie, zmienna używana w pętli let Zmienna nie została ponownie zadeklarowana poza pętlą.

Jeśli w pętli używa się let Deklaracja zmiennej i oznacza, że zmienna i jest widoczna tylko w pętli.

Zasięg funkcji

Przy deklaracji zmiennych wewnątrz funkcji, używa się var i let są bardzo podobne.

Mają one wszystkieZasięg funkcji:

function myFunction() {
  var carName = "porsche";   // Zasięg funkcji
}
function myFunction() {
  let carName = "porsche";   // Zasięg funkcji
}

Zasięg globalny

Jeśli deklaracja znajduje się poza blokiem, to var i let są bardzo podobne.

Mają one wszystkieZasięg globalny:

var x = 10;       // Zasięg globalny
let y = 6;       // Zasięg globalny

Zmienne globalne w HTML

W przypadku użycia JavaScript, globalny zasięg to środowisko JavaScript.

W HTML, globalny zasięg to obiekt window.

przez var Zmienne globalne zdefiniowane przez słowa kluczowe należą do obiektu window:

Przykład

var carName = "porsche";
// Tego kodu można używać window.carName

Spróbuj sam

przez let Zmienne globalne zdefiniowane przez słowa kluczowe nie należą do obiektu window:

Przykład

let carName = "porsche";
// Tego kodu nie można używać window.carName

Spróbuj sam

Ponowne deklarowanie

Dozwolone w dowolnym miejscu programu var Ponowne deklarowanie zmiennych JavaScript:

Przykład

var x = 10;
// Teraz, x wynosi 10
var x = 6;
// Teraz, x wynosi 6

Spróbuj sam

w tym samym zasięgu, lub w tym samym bloku, poprzez let ponowne deklarowanie var Zmienne nie są dozwolone:

Przykład

var x = 10;       // Dozwolone
let x = 6;       // Nie dozwolone
{
  var x = 10;   // Dozwolone
  let x = 6;   // Nie dozwolone
}

w tym samym zasięgu, lub w tym samym bloku, poprzez let ponowne deklarowanie let Zmienne nie są dozwolone:

Przykład

let x = 10;       // Dozwolone
let x = 6;       // Nie dozwolone
{
  let x = 10;   // Dozwolone
  let x = 6;   // Nie dozwolone
}

w tym samym zasięgu, lub w tym samym bloku, poprzez var ponowne deklarowanie let Zmienne nie są dozwolone:

Przykład

let x = 10;       // Dozwolone
var x = 6;       // Nie dozwolone
{
  let x = 10;   // Dozwolone
  var x = 6;   // Nie dozwolone
}

w różnych zasięgach lub blokach, poprzez let Ponowne deklarowanie zmiennych jest dozwolone:

Przykład

let x = 6;       // Dozwolone
{
  let x = 7;   // Dozwolone
}
{
  let x = 8;   // Dozwolone
}

Spróbuj sam

Hoisting

przez var Deklarowane zmienne będąHoistingdo góry. Jeśli nie wiesz, co to jest "Hoisting", naucz się tego rozdziału o Hoisting.

Możesz używać zmiennej przed jej deklaracją:

Przykład

// W tym miejscu, możesz używać carName
var carName;

Spróbuj sam

przez let Zdefiniowane zmienne nie są przenoszone na szczyt.

w deklaracji let Użycie zmiennej przed jej deklaracją spowoduje błąd ReferenceError.

Zmienne pozostają w "czasie martwym" od początku bloku, aż do deklaracji:

Przykład

// W tym miejscu, nie możesz używać carName
let carName;