Menguasai Skop dan Skop Leksikal dalam JavaScript

Skop dan Skop Leksikal dalam JavaScript

Memahami skop dan skop leksikal adalah asas untuk menulis kod JavaScript yang cekap dan bebas ralat. Konsep ini menentukan cara pembolehubah diakses dan tempat ia tersedia dalam kod anda.

1. Skop dalam JavaScript

Skop merujuk kepada konteks pelaksanaan semasa, yang menentukan keterlihatan dan kebolehcapaian pembolehubah. JavaScript mempunyai tiga jenis skop:

A. Skop Blok

• Pembolehubah yang diisytiharkan dengan let dan const adalah berskop blok, bermakna ia boleh diakses hanya dalam blok yang ditakrifkan.
• Diperkenalkan dalam ES6.

Contoh:

{
  let a = 10;
  const b = 20;
  console.log(a, b); // Output: 10, 20
}
console.log(a); // Error: a is not defined

B. Skop Fungsi

• Pembolehubah yang diisytiharkan dengan var adalah berskop fungsi. Ia boleh diakses dalam keseluruhan fungsi di mana ia diisytiharkan.
• Tidak menghormati sempadan blok.

Contoh:

function testFunctionScope() {
  if (true) {
    var x = 10; // Function-scoped
  }
  console.log(x); // Output: 10
}
testFunctionScope();

C. Skop Global

• Pembolehubah yang diisytiharkan di luar mana-mana fungsi atau blok berada dalam skop global dan boleh diakses di mana-mana dalam program.

Contoh:

var globalVar = "I am global";
console.log(globalVar); // Output: I am global

2. Skop Leksikal

Skop leksikal bermaksud skop pembolehubah ditentukan oleh kedudukannya dalam kod sumber. Fungsi dilaksanakan menggunakan rantai skop yang ada semasa ia ditakrifkan, bukan apabila ia digunakan.

A. Rantaian Skop

Rantai skop ialah hierarki skop yang digunakan oleh JavaScript untuk menyelesaikan rujukan pembolehubah. Jika pembolehubah tidak ditemui dalam skop semasa, pembolehubah itu kelihatan dalam skop luar, berterusan sehingga mencapai skop global.

Contoh:

function outer() {
  let outerVar = "I'm outer";

  function inner() {
    console.log(outerVar); // Accesses the outer scope
  }

  inner();
}
outer();
// Output: I'm outer

B. Fungsi Bersarang

Fungsi dalaman mempunyai akses kepada pembolehubah dalam fungsi luarnya disebabkan skop leksikal.

Contoh:

function outerFunction() {
  let outerVariable = "Outer";

  function innerFunction() {
    let innerVariable = "Inner";
    console.log(outerVariable); // Outer
    console.log(innerVariable); // Inner
  }

  innerFunction();
}
outerFunction();

3. Contoh Praktikal

A. Mengakses Pembolehubah Skop Luar

function createMultiplier(multiplier) {
  return function (value) {
    return value * multiplier; // Accesses 'multiplier' from outer scope
  };
}

const double = createMultiplier(2);
console.log(double(5)); // Output: 10

B. Skop Leksikal dalam Penutup

Penutupan bergantung pada skop leksikal untuk mengingati pembolehubah dari persekitaran luarnya.

Contoh:

function outerFunction() {
  let count = 0;
  return function () {
    count++;
    console.log(count);
  };
}

const counter = outerFunction();
counter(); // Output: 1
counter(); // Output: 2

4. Kesilapan Biasa dengan Skop

A. Melupakan let dan const

Pembolehubah yang diisytiharkan tanpa let, const atau var menjadi pembolehubah global.

{
  let a = 10;
  const b = 20;
  console.log(a, b); // Output: 10, 20
}
console.log(a); // Error: a is not defined

B. Skop Sekat dengan var

Menggunakan var di dalam blok membawa kepada hasil yang tidak dijangka.

function testFunctionScope() {
  if (true) {
    var x = 10; // Function-scoped
  }
  console.log(x); // Output: 10
}
testFunctionScope();

C. Membayangkan

Pembolehubah yang diisytiharkan dalam skop bersarang boleh membayangi (mengatasi) pembolehubah dalam skop luar.

var globalVar = "I am global";
console.log(globalVar); // Output: I am global

5. Perbezaan Antara Skop dan Skop Leksikal

function outer() {
  let outerVar = "I'm outer";

  function inner() {
    console.log(outerVar); // Accesses the outer scope
  }

  inner();
}
outer();
// Output: I'm outer

Atas ialah kandungan terperinci Menguasai Skop dan Skop Leksikal dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!