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

Scope	Lexical Scope
Refers to the context in which variables are accessible.	Refers to how the location of variables in the code determines scope.
Can be global, block, or function.	Depends on the structure of the code when it is written.
Dynamic during runtime.	Fixed during code definition.

Skop

---

Skop Leksikal

Merujuk kepada konteks di mana pembolehubah boleh diakses. Merujuk kepada cara lokasi pembolehubah dalam kod menentukan skop. Boleh bersifat global, sekat atau berfungsi. Bergantung pada struktur kod apabila ia ditulis. Dinamik semasa masa jalan. Ditetapkan semasa definisi kod.

6. Amalan Terbaik

Gunakan let dan const

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

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

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

: Sentiasa gunakan let dan const untuk mengelakkan pembolehubah global yang tidak dijangka.

1. 
   

   Meminimumkan Pembolehubah Global
:
2. Pembolehubah global boleh membawa kepada konflik penamaan. Bungkus kod dalam fungsi atau modul.

   
   

   Fahami Skop Leksikal
:

Manfaatkan penutupan dan skop leksikal untuk menulis kod yang lebih bersih dan cekap.

---

Ringkasan
• Skop mentakrifkan tempat pembolehubah boleh diakses, dengan tiga jenis: global, blok dan fungsi.
• Skop leksikal
memastikan fungsi sentiasa menggunakan skop di mana ia ditakrifkan.

Menguasai konsep ini adalah penting untuk menyahpepijat dan menulis kod JavaScript yang berkesan.

Hai, saya Abhay Singh Kathayat!

Saya seorang pembangun tindanan penuh dengan kepakaran dalam kedua-dua teknologi hadapan dan belakang. Saya bekerja dengan pelbagai bahasa pengaturcaraan dan rangka kerja untuk membina aplikasi yang cekap, berskala dan mesra pengguna. Jangan ragu untuk menghubungi saya melalui e-mel perniagaan saya: kaashshorts28@gmail.com.

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