TLDR
JavaScript memiliki ruang lingkup dan penutupan leksikal (juga disebut statis). Ini berarti Anda dapat memberi tahu ruang lingkup pengidentifikasi dengan melihat kode sumber.
Keempat lingkup tersebut adalah:
- Global - terlihat oleh segalanya
- Fungsi - terlihat dalam suatu fungsi (dan subfungsi dan bloknya)
- Blok - terlihat dalam blok (dan sub-bloknya)
- Modul - terlihat dalam modul
Di luar kasus khusus lingkup global dan modul, variabel dideklarasikan menggunakan var(lingkup fungsi), let(lingkup blok) dan const(lingkup blok). Sebagian besar bentuk lain dari pernyataan pengidentifikasi memiliki cakupan blok dalam mode ketat.
Gambaran
Lingkup adalah wilayah basis kode tempat pengidentifikasi valid.
Lingkungan leksikal adalah pemetaan antara nama pengidentifikasi dan nilai yang terkait dengannya.
Lingkup terbentuk dari sarang yang terhubung dari lingkungan leksikal, dengan setiap tingkat dalam sarang bersesuaian dengan lingkungan leksikal dari konteks eksekusi leluhur.
Lingkungan leksikal yang terhubung ini membentuk "rantai" lingkup. Resolusi pengidentifikasi adalah proses pencarian di sepanjang rantai ini untuk pengidentifikasi yang cocok.
Resolusi pengidentifikasi hanya terjadi dalam satu arah: luar. Dengan cara ini, lingkungan leksikal luar tidak dapat "melihat" ke dalam lingkungan leksikal dalam.
Ada tiga faktor yang bersangkutan dalam memutuskan lingkup dari sebuah identifier dalam JavaScript:
- Bagaimana pengidentifikasi dinyatakan
- Di mana pengidentifikasi diumumkan
- Apakah Anda dalam mode ketat atau mode tidak ketat
Beberapa cara pengidentifikasi dapat dinyatakan:
var, letdanconst- Parameter fungsi
- Tangkap parameter blok
- Deklarasi fungsi
- Ekspresi fungsi yang dinamai
- Properti yang didefinisikan secara implisit pada objek global (mis. Hilang
vardalam mode non-ketat)
import pernyataaneval
Beberapa pengidentifikasi lokasi dapat dinyatakan:
- Konteks global
- Fungsi tubuh
- Blok biasa
- Bagian atas struktur kontrol (mis. Loop, if, while dll)
- Kontrol struktur tubuh
- Modul
Gaya Deklarasi
var
Pengidentifikasi yang dideklarasikan menggunakan var lingkup fungsi , terpisah dari ketika mereka dideklarasikan secara langsung dalam konteks global, dalam hal ini mereka ditambahkan sebagai properti pada objek global dan memiliki cakupan global. Ada aturan terpisah untuk penggunaannya dalam evalfungsi.
biarkan dan const
Pengidentifikasi dideklarasikan menggunakan letdan const memiliki cakupan blok , selain dari ketika mereka dinyatakan secara langsung dalam konteks global, dalam hal ini mereka memiliki lingkup global.
Catatan: let, constdan var semua mengangkat . Ini berarti bahwa posisi logis dari definisi mereka adalah bagian atas dari ruang lingkup yang dilampirkan (blok atau fungsi). Namun, variabel dinyatakan menggunakan letdan consttidak dapat dibaca atau ditugaskan sampai kontrol telah melewati titik pernyataan dalam kode sumber. Periode sementara dikenal sebagai zona mati temporal.
function f() {
function g() {
console.log(x)
}
let x = 1
g()
}
f() // 1 because x is hoisted even though declared with `let`!
Nama parameter fungsi
Nama parameter fungsi dicakup ke badan fungsi. Perhatikan bahwa ada sedikit kerumitan dalam hal ini. Fungsi yang dideklarasikan sebagai argumen default menutup daftar parameter , dan bukan badan fungsi.
Deklarasi fungsi
Deklarasi fungsi memiliki ruang lingkup blok dalam mode ketat dan ruang lingkup fungsi dalam mode non-ketat. Catatan: mode non-ketat adalah seperangkat aturan yang muncul berdasarkan pada implementasi historis unik dari browser yang berbeda.
Ekspresi fungsi yang dinamai
Ekspresi fungsi yang dinamai dicakup untuk dirinya sendiri (mis. Untuk tujuan rekursi).
Properti yang didefinisikan secara implisit pada objek global
Dalam mode non-ketat, properti yang didefinisikan secara implisit pada objek global memiliki cakupan global, karena objek global berada di bagian atas rantai cakupan. Dalam mode ketat ini tidak diizinkan.
eval
Dalam evalstring, variabel yang dideklarasikan menggunakan varakan ditempatkan dalam lingkup saat ini, atau, jika evaldigunakan secara tidak langsung, sebagai properti pada objek global.
Contohnya
Berikut ini akan melempar ReferenceError karena nama x, ydan ztidak memiliki arti di luar fungsi f.
function f() {
var x = 1
let y = 1
const z = 1
}
console.log(typeof x) // undefined (because var has function scope!)
console.log(typeof y) // undefined (because the body of the function is a block)
console.log(typeof z) // undefined (because the body of the function is a block)
Berikut ini akan melempar ReferenceError untuk ydan z, tetapi tidak untuk x, karena visibilitas xtidak dibatasi oleh blok. Blok yang menentukan tubuh struktur kontrol seperti if, fordan while, berperilaku sama.
{
var x = 1
let y = 1
const z = 1
}
console.log(x) // 1
console.log(typeof y) // undefined because `y` has block scope
console.log(typeof z) // undefined because `z` has block scope
Berikut ini, xterlihat di luar loop karena varmemiliki lingkup fungsi:
for(var x = 0; x < 5; ++x) {}
console.log(x) // 5 (note this is outside the loop!)
... karena perilaku ini, Anda harus berhati-hati dalam menutup variabel yang dideklarasikan menggunakan vardalam loop. Hanya ada satu instance variabelx dideklarasikan di sini, dan itu duduk secara logis di luar loop.
Cetakan berikut 5, lima kali, dan kemudian mencetak 5untuk keenam kalinya di console.logluar loop:
for(var x = 0; x < 5; ++x) {
setTimeout(() => console.log(x)) // closes over the `x` which is logically positioned at the top of the enclosing scope, above the loop
}
console.log(x) // note: visible outside the loop
Cetakan berikut undefinedkarena xdiblok-blok. Callback dijalankan satu per satu secara tidak sinkron. Perilaku baru untuk letvariabel berarti bahwa setiap fungsi anonim ditutup melalui variabel yang berbeda bernama x(tidak seperti yang akan dilakukan dengan var), dan bilangan bulat 0melalui 4dicetak.
for(let x = 0; x < 5; ++x) {
setTimeout(() => console.log(x)) // `let` declarations are re-declared on a per-iteration basis, so the closures capture different variables
}
console.log(typeof x) // undefined
Berikut ini TIDAK akan melempar ReferenceErrorkarena visibilitas xtidak dibatasi oleh blok; Namun, itu akan mencetak undefinedkarena variabel belum diinisialisasi (karena ifpernyataan).
if(false) {
var x = 1
}
console.log(x) // here, `x` has been declared, but not initialised
Variabel yang dideklarasikan di bagian atas forloop menggunakan letscoped ke badan loop:
for(let x = 0; x < 10; ++x) {}
console.log(typeof x) // undefined, because `x` is block-scoped
Berikut ini akan melempar ReferenceErrorkarena visibilitas xdibatasi oleh blok:
if(false) {
let x = 1
}
console.log(typeof x) // undefined, because `x` is block-scoped
Variabel yang dideklarasikan menggunakan var, letatau constsemuanya dicakup dalam modul:
// module1.js
var x = 0
export function f() {}
//module2.js
import f from 'module1.js'
console.log(x) // throws ReferenceError
Berikut ini akan mendeklarasikan properti pada objek global, karena variabel yang dideklarasikan menggunakan vardalam konteks global, ditambahkan sebagai properti ke objek global:
var x = 1
console.log(window.hasOwnProperty('x')) // true
letdan constdalam konteks global tidak menambahkan properti ke objek global, tetapi masih memiliki cakupan global:
let x = 1
console.log(window.hasOwnProperty('x')) // false
Parameter fungsi dapat dianggap dideklarasikan di badan fungsi:
function f(x) {}
console.log(typeof x) // undefined, because `x` is scoped to the function
Parameter blok tangkap dicakup ke badan blok tangkap:
try {} catch(e) {}
console.log(typeof e) // undefined, because `e` is scoped to the catch block
Ekspresi fungsi yang dinamai hanya mencakup ekspresi itu sendiri:
(function foo() { console.log(foo) })()
console.log(typeof foo) // undefined, because `foo` is scoped to its own expression
Dalam mode non-ketat, properti yang didefinisikan secara implisit pada objek global memiliki cakupan global. Dalam mode ketat Anda mendapatkan kesalahan.
x = 1 // implicitly defined property on the global object (no "var"!)
console.log(x) // 1
console.log(window.hasOwnProperty('x')) // true
Dalam mode non-ketat, deklarasi fungsi memiliki cakupan fungsi. Dalam mode ketat mereka memiliki ruang lingkup blok.
'use strict'
{
function foo() {}
}
console.log(typeof foo) // undefined, because `foo` is block-scoped
Cara kerjanya di bawah tenda
Lingkup didefinisikan sebagai wilayah leksikal kode tempat pengidentifikasi valid.
Dalam JavaScript, setiap fungsi-objek memiliki [[Environment]]referensi tersembunyi yang merupakan referensi ke lingkungan leksikal dari konteks eksekusi (stack frame) di mana ia dibuat.
Ketika Anda memanggil suatu fungsi, [[Call]]metode tersembunyi disebut. Metode ini menciptakan konteks eksekusi baru dan membangun tautan antara konteks eksekusi baru dan lingkungan leksikal dari objek-fungsi. Itu melakukan ini dengan menyalin [[Environment]]nilai pada objek-fungsi, ke referensi luar bidang pada lingkungan leksikal dari konteks eksekusi baru.
Perhatikan bahwa tautan ini antara konteks eksekusi baru dan lingkungan leksikal dari objek fungsi disebut closure .
Jadi, dalam JavaScript, ruang lingkup diimplementasikan melalui lingkungan leksikal yang dihubungkan bersama dalam "rantai" oleh referensi luar. Rantai lingkungan leksikal ini disebut rantai lingkup, dan resolusi pengidentifikasi terjadi dengan mencari rantai untuk pengidentifikasi yang cocok.
Cari tahu lebih lanjut .
