Memahami skop dalam JavaScript

Topik ini telah dibincangkan berkali-kali, namun, saya ingin bercakap tentang apakah skop (menggunakan JavaScript) dari sudut masalah yang ingin ditangani.

Apakah masalah yang sebenarnya diselesaikan oleh skop?

Apabila aplikasi bertambah dalam saiz, ia juga bertambah dalam kerumitan - skop ialah alat untuk mengurus kerumitan sedemikian.

Coupling vs decoupling

Mari kita berpura-pura bahawa kita mempunyai jejari pembolehubah global yang ditetapkan kepada 7 dan fungsi createSpecialButton() yang mengembalikan butang "istimewa":

let radius = 7;

function createSpecialButton(radius) {
  return <button radius={radius}>Click Me!</button>
}

const button = createSpecialButton(radius);

Fungsi ini mengembalikan butang dengan jejari tertentu, yang dalam kes ini ditetapkan kepada 7. Buat masa ini, tiada masalah dengan kod, kerana kita tahu jejari ditetapkan dan oleh itu tahu apa yang akan dihasilkan oleh butang itu. nampak macam. Walau bagaimanapun, apa yang berlaku apa yang kita tambah dalam dua lagi fungsi yang kedua-duanya bergantung pada pembolehubah jejari? Kod kami kini kelihatan seperti ini:

let radius = 7;

function createSpecialButton() {
  return <button radius={radius}>Click Me!</button>
}

function profileButton() {
  radius = 10;
  return <button radius={radius}>Click Me!</button>
}

function registrationButton() {
  radius = 16;
  return <button radius={radius}>Click Me!</button>
}

const profileButton = profileButton();
const registrationButton = registrationButton();
const button = createSpecialButton();

Selepas membuat perubahan ini, apakah nilai jejari apabila memanggil createSpecialButton()? Jika anda meneka 16 , anda betul.

Hanya dengan menambah dua fungsi tambahan, kami telah meningkatkan kerumitan kod kami dengan banyak, dan kini hidup dalam dunia yang berbilang, tidak berkaitan, kepingan kod bergantung pada kebergantungan yang sama. Sekarang, bayangkan ini adalah aplikasi timbunan penuh yang jauh lebih besar - ia akan menjadi sukar untuk membuat alasan tentang asal usul keadaan tertentu dan cara membetulkan pepijat apabila ia muncul.

Untuk membetulkannya, kita boleh menentukan pembolehubah jejari berasingan untuk setiap fungsi:

function createSpecialButton() {
  const radius = 7;
  return <button radius={radius}>Click Me!</button>
}

function profileButton() {
  const radius = 10;
  return <button radius={radius}>Click Me!</button>
}

function registrationButton() {
  const radius = 16;
  return <button radius={radius}>Click Me!</button>
}

const profileButton = profileButton();
const registrationButton = registrationButton();
const button = createSpecialButton();

Anda mungkin melihat perubahan ini dan berkata "baik, ok, tetapi kini terdapat lebih banyak kod - itu nampaknya tidak betul". Betul, terdapat lebih banyak kod, namun kurang kod tidak lebih baik jika ia menghasilkan kod yang kurang boleh diselenggara - perubahan yang kami buat meningkatkan kebolehselenggaraan kod kami, dan itu sentiasa menjadi perkara yang baik.

Jenis skop dalam JavaScript

Skop Global

Skop global boleh diakses oleh semua perkara di seluruh aplikasi anda. Jika anda menulis apl Node.JS, anda mungkin tidak akan berfungsi atau menghadapi skop global. Walau bagaimanapun, jika anda bekerja dalam apl web, anda boleh meletakkan pengisytiharan dalam skop global dengan menggunakan teg skrip atau menggunakan tetingkap.SESUATU.

Sebagai contoh, menggunakan teg skrip, anda mungkin melakukan sesuatu seperti ini:

<script>
  let username = "Garrett";
</script>

Selain itu, MDN menyatakan takrifan "skop global" mereka sebagai "Skop lalai untuk semua kod yang dijalankan dalam mod skrip." Saya rasa contoh di atas ialah perkara yang mereka rujuk.

Semasa menggunakan objek global tetingkap, anda mungkin melakukan sesuatu seperti ini:

  window.username = "Garrett";

Skop Modul

Jika anda bekerja dalam projek Node.JS, skop modul ialah perkara yang anda akan gunakan pada tahap tertinggi. Setiap fail dengan sambungan .js (atau .ts) ialah modul yang berasingan, bermakna paling banyak pengisytiharan anda akan boleh diakses oleh semua perkara dalam fail tertentu, melainkan anda mengeksportnya secara eksplisit.

Sebagai contoh, dalam user.ts, kedua-dua fungsi boleh mengakses nama pembolehubah.

// user.ts

const name = "Garrett";

function greet() {
  console.log("Hello, ", name)
}

function greetAgain() {
  console.log("Hello again, ", name)
}

Walau bagaimanapun, dalam versi user.ts ini, hanya accessName() boleh mengakses nama pembolehubah:

// user.ts

function greet() {
  const name = "Garrett";
  console.log("Hello, ", name)
}

function greetAgain() {
  console.log("Hello again, ", name)
}

Perhatikan bahawa dalam kedua-dua modul ini, tiada apa-apa yang dieksport. Dalam erti kata lain, kod dalam modul lain tidak mempunyai cara untuk mengetahui tentang kod ini dan oleh itu tidak boleh mengimport dan menggunakannya. Kita boleh mengubahnya:

// user.ts

export function greet(name: string) {
  console.log("Hello, ", name)
}

Kini, kedua-dua fungsi dieksport, dan dengan itu boleh digunakan oleh modul lain. Ini secara teknikalnya berbeza daripada konsep skop global yang kami bincangkan lebih awal, tetapi ia serupa kerana kami menyediakan kod untuk keseluruhan aplikasi dengan cara mengimportnya dari satu modul ke modul yang lain.

Skop Fungsi

Kami sebenarnya telah melihat skop fungsi. Lihat kod di bawah (ia adalah kod yang sama daripada salah satu coretan di atas):

// user.ts

function greet() {
  const name = "Garrett";
  console.log("Hello, ", name)
}

function greetAgain() {
  console.log("Hello again, ", name)
}

Cuba jalankan ini - greetAgain() akan menghadapi ralat kerana pembolehubah nama yang cuba dibaca hanya wujud dalam konteks (iaitu “skop”) greet().

Nota: anda mungkin melihat ini dirujuk sebagai "skop tempatan".

Skop Blok

Skop blok adalah sesuatu yang menarik kerana ia hanya berfungsi dengan jenis pembolehubah yang lebih baharu - khususnya, let dan const, bukan var. Mari lihat.

{
  let firstName = "Garrett";
  const lastName = "Love";
  var fullName = "Garrett Love";
  // firstName and lastName CAN be accessed here
  // fullName CAN be accessed here
}

// firstName and lastName CANNOT be accessed here
// fullName CAN STILL be accessed here

Dalam contoh di atas, kita dapat melihat bahawa 1) Meletakkan kod dalam {} mencipta blok kod. 2) Pembolehubah yang ditakrifkan menggunakan let dan const hanya boleh diakses dalam blok kod tersebut. 3) Pembolehubah yang dibuat dengan var tidak mengikut peraturan skop blok, kerana ia masih boleh diakses di luar {}.

Nota: JavaScript moden menggunakan let dan const untuk perisytiharan berubah-ubah dan bukan var.

Pengisytiharan hendaklah dibuat dalam skop terkecil yang diperlukan

Sebagai penutup, ingat bahawa skop ialah alat untuk mengurus kerumitan dalam kod kami, dan semakin tinggi tahap skop yang anda letakkan pengisytiharan, semakin banyak kerumitan yang terdapat dalam kod anda, jadi sebaiknya anda menyasarkan pengisytiharan kepada diletakkan dalam skop terkecil yang diperlukan.

Atas ialah kandungan terperinci Memahami skop dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!