Rumah  >  Artikel  >  hujung hadapan web  >  Skop dan Pengangkatan dalam JavaScript - Diterangkan Secara Komprehensif

Skop dan Pengangkatan dalam JavaScript - Diterangkan Secara Komprehensif

Barbara Streisand
Barbara Streisandasal
2024-09-27 22:42:03950semak imbas

Scopes and Hoisting in JavaScript - Comprehensively Explained

Skop dalam JavaScript

Skop dalam JavaScript bermaksud kawasan dalam kod anda di mana pembolehubah atau fungsi tertentu boleh digunakan atau dilihat. Ia menentukan tempat anda mempunyai akses kepada nilai atau tindakan tertentu. Terdapat terutamanya dua jenis skop dalam JavaScript:

  1. Skop Global

  2. Skop Tempatan (Fungsi dan Skop Blok)

Skop Global

Apabila pembolehubah diisytiharkan di luar mana-mana fungsi atau blok, ia menjadi sebahagian daripada skop global. Ia boleh diakses dari mana-mana sahaja dalam kod.

let globalVar = "I'm global";

function printGlobalVar() {
  console.log(globalVar); // Accessible here
}

printGlobalVar(); // Output: I'm global
console.log(globalVar); // Output: I'm global

Dalam contoh ini, globalVar diisytiharkan di luar sebarang fungsi, yang menjadikannya pembolehubah global. Ini bermakna ia boleh diakses di mana-mana dalam kod, di dalam dan di luar fungsi. Apabila fungsi printGlobalVar() dipanggil, ia mencatatkan nilai globalVar kerana fungsi tersebut boleh mengakses skop global. Selepas itu, apabila kita log globalVar terus di luar fungsi, ia masih mencetak nilai yang sama kerana ia tersedia sepanjang program sebagai pembolehubah global. Pada asasnya, skop global membenarkan pembolehubah ini digunakan dan diakses di mana-mana dalam kod.

Skop Tempatan (Fungsi dan Skop Blok)

Pembolehubah yang ditakrifkan dalam fungsi atau blok (seperti gelung atau jika pernyataan) terhad kepada fungsi atau blok tersebut. Mereka tidak boleh diakses dari luar skop itu.

Skop Fungsi: Pembolehubah yang diisytiharkan di dalam fungsi hanya boleh diakses dalam fungsi itu.

function myFunction() {
  let localVar = "I'm local";
  console.log(localVar); // Output: I'm local
}

myFunction();
console.log(localVar); // Error: localVar is not defined

Skop Sekatan: Diperkenalkan dengan let dan const, skop blok digunakan pada pembolehubah yang diisytiharkan di dalam blok ({}), seperti gelung, bersyarat dan blok cuba-tangkap. Pembolehubah ini hanya boleh diakses dalam blok tersebut.

if (true) {
  let blockVar = "I'm block scoped";
  console.log(blockVar); // Output: I'm block scoped
}

console.log(blockVar); // Error: blockVar is not defined

Sebaliknya, pembolehubah yang diisytiharkan dengan var adalah berskop fungsi, bermakna ia dinaikkan ke bahagian atas fungsi atau secara global, walaupun diisytiharkan dalam blok.

Mengangkat dalam JavaScript

Hoisting ialah gelagat lalai JavaScript untuk memindahkan pengisytiharan ke bahagian atas skop kandungannya semasa fasa penyusunan. Ini bermakna pembolehubah dan pengisytiharan fungsi diproses sebelum sebarang kod dilaksanakan.

Pengangkatan Pembolehubah

Dalam kes pengisytiharan pembolehubah menggunakan var, pembolehubah dinaikkan, tetapi permulaannya tidak. Ini membawa kepada tingkah laku "tidak ditentukan" yang terkenal jika anda cuba mengakses pembolehubah sebelum ia dimulakan.

console.log(myVar); // Output: undefined
var myVar = "Hello";
console.log(myVar); // Output: Hello

Di sebalik tabir, enjin JavaScript melakukan ini:

var myVar;
console.log(myVar); // Output: undefined
myVar = "Hello";
console.log(myVar); // Output: Hello

Dalam contoh ini, JavaScript menaikkan pengisytiharan var myVar ke atas, jadi kod itu berkelakuan seolah-olah ia ditulis di atas. Output console.log pertama tidak ditentukan kerana pembolehubah diisytiharkan (diangkat) tetapi belum diberikan nilai. Selepas tugasan, console.log kedua mengeluarkan 5. Ini menunjukkan cara pengangkat berfungsi dengan var—pengisytiharan dinaikkan, tetapi nilai ditetapkan kemudian.

Untuk let dan const, semasa pengisytiharan dinaikkan, mereka tidak dimulakan sehingga kod itu mencapai baris itu, dan cuba mengaksesnya sebelum pengisytiharan membawa kepada ReferenceError.

console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization
let myLet = "Hello";

Pengangkatan Fungsi

Pengisytiharan fungsi dinaikkan sepenuhnya, bermakna anda boleh memanggil fungsi sebelum pengisytiharannya.

greet(); // Output: Hello, World!

function greet() {
  console.log("Hello, World!");
}

Fungsi ini dialihkan ke atas, jadi ia boleh dipanggil sebelum pengisytiharan.

Walau bagaimanapun, ungkapan fungsi menggunakan var, let atau const tidak dinaikkan dengan cara yang sama seperti pengisytiharan fungsi. Mereka berkelakuan seperti pembolehubah biasa dari segi angkat, yang bermaksud fungsi itu hanya tersedia selepas tugasan.

greet(); // Error: greet is not a function

var greet = function() {
  console.log("Hello!");
};

Dalam contoh di atas, salam dinaikkan sebagai pembolehubah var tetapi pada mulanya tidak ditentukan, jadi cuba memanggilnya sebelum tugasan menghasilkan ralat.

Skop dan Pengangkatan dalam Amalan

  • Skop global pembolehubah boleh diakses sepanjang keseluruhan skrip.

  • Skop setempat pembolehubah terhad kepada blok atau fungsi di mana ia diisytiharkan.

  • Hoisting membenarkan anda menggunakan fungsi dan pembolehubah sebelum pengisytiharannya, tetapi dengan pengehadan untuk ekspresi let, const dan fungsi.

Konsep ini adalah asas untuk memahami cara pembolehubah dan fungsi berkelakuan dalam JavaScript, dan menguasainya adalah penting untuk menulis kod yang jelas dan bebas pepijat.

Atas ialah kandungan terperinci Skop dan Pengangkatan dalam JavaScript - Diterangkan Secara Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn