Memahami JavaScript Hoisting: Panduan Mudah

Jika anda baru menggunakan JavaScript, anda mungkin menghadapi situasi yang mengelirukan di mana pembolehubah kelihatan tidak ditentukan atau ralat seperti ReferenceError muncul secara tidak dijangka. Ini selalunya boleh dikesan kembali kepada konsep yang dikenali sebagai angkat. Tetapi apakah itu angkat, dan bagaimanakah ia mempengaruhi kod anda?

Dalam panduan ini, kami akan memecahkan konsep angkat dan cara ia berfungsi dalam JavaScript. Pada akhirnya, anda akan faham sebab pengangkatan berlaku dan cara anda boleh mengelakkan kesilapan biasa.

Apakah itu Mengangkat?
Pengangkatan ialah tingkah laku JavaScript untuk memindahkan pembolehubah dan pengisytiharan fungsi ke bahagian atas skop mereka sebelum kod berjalan. Ini bermakna pengisytiharan (bukan tugasan) diproses semasa fasa penyediaan sebelum pelaksanaan sebenar kod anda.

JavaScript melalui fasa penciptaan terlebih dahulu, di mana ia memperuntukkan memori untuk pembolehubah dan fungsi. Walau bagaimanapun, cara ia mengendalikan fungsi dan pembolehubah sedikit berbeza.

Fungsi Mengangkat: Definisi Ditingkatkan Sepenuhnya
Fungsi yang diisytiharkan menggunakan kata kunci fungsi dinaikkan dengan definisi penuhnya. Ini membolehkan anda memanggil atau menggunakan fungsi sebelum pengisytiharan sebenar dalam kod.

Contohnya:

sum(5, 3); // Output: 8

function sum(a, b) {
  console.log(a + b);
}

Walaupun fungsi sum() dipanggil sebelum ia diisytiharkan dalam kod, ia berfungsi dengan sempurna kerana pengisytiharan fungsi dinaikkan ke bahagian atas skopnya semasa fasa penciptaan.

Pengangkat Pembolehubah: var, let dan const
Pengangkat boleh ubah berkelakuan berbeza daripada pengangkat fungsi, dan ia berbeza bergantung pada sama ada anda menggunakan var, let atau const.

1. var Pengisytiharan
Apabila anda mengisytiharkan pembolehubah menggunakan var, ia dinaikkan ke bahagian atas skopnya dengan nilai lalai undefined. Ini bermakna anda boleh mengakses pembolehubah sebelum pengisytiharannya, tetapi sehingga anda menetapkan nilai padanya, pembolehubah akan kekal tidak ditentukan.

console.log(city); // Output: undefined
var city = "New York";
console.log(city); // Output: "New York"

Dalam contoh ini, bandar dinaikkan dengan nilai yang tidak ditentukan pada mulanya. Setelah nilai "New York" diberikan, console.log() kedua mengeluarkan "New York" dengan betul.

2. let and const Deklarasi
Dengan let dan const, pembolehubah juga dinaikkan, tetapi ia tetap tidak dimulakan. Ini bermakna jika anda cuba mengaksesnya sebelum pengisytiharan mereka, anda akan mendapat ReferenceError.

console.log(name); // ReferenceError: Cannot access 'name' before initialization
let name = "John Doe";

Ralat ini berlaku kerana pembolehubah let dan const wujud dalam sesuatu yang dipanggil Zon Mati Temporal (TDZ) antara permulaan skopnya dan titik di mana ia sebenarnya diisytiharkan. Pada masa ini, anda tidak boleh merujuk pembolehubah.

Perbezaan Utama Antara let dan const
Kedua-dua let dan const berkelakuan sama dari segi angkat, tetapi const memerlukan anda untuk menetapkan nilai semasa pengisytiharan, manakala let membolehkan anda mengisytiharkan pembolehubah tanpa memberikan nilai dengan segera.

const name = "John Doe"; // Must be initialized
let age; // Can be declared without assignment

Mengangkat dalam Amalan
Mari lihat contoh yang menunjukkan kedua-dua fungsi dan pengangkat berubah dalam tindakan:

console.log(city); // Output: undefined
sum(3, 4);    // Output: 7

function sum(x, y) {
  console.log(x + y);
}

var city = "New York";
console.log(city); // Output: "New York"

Di sini, fungsi jumlah dinaikkan dengan definisi penuhnya, jadi ia boleh dipanggil sebelum fungsi diisytiharkan. Walau bagaimanapun, bandar itu dinaikkan dengan nilai undefined, yang menerangkan sebab console.log() pertama menghasilkan undefined. Setelah tugasan berlaku, console.log() kedua mengeluarkan nilai yang betul.

Petua untuk Mengelakkan Perangkap Angkat
Untuk mengelakkan isu yang disebabkan oleh pengangkatan, ikuti amalan terbaik ini:

1. - Gunakan let dan const bukannya var untuk mengelak daripada mengakses pembolehubah sebelum pengisytiharannya.
2. - Isytiharkan pembolehubah dan fungsi di bahagian atas skopnya untuk memastikan kod anda berkelakuan seperti yang diramalkan.

Rekap Konsep Pengangkat Utama

• Pengangkatan merujuk kepada gelagat JavaScript untuk memindahkan pengisytiharan ke bahagian atas skopnya sebelum kod dijalankan.
• Fungsi yang diisytiharkan dengan fungsi dinaikkan dengan definisi penuhnya, membolehkan ia digunakan sebelum ia diisytiharkan.
• Pembolehubah yang diisytiharkan dengan var dinaikkan dengan nilai lalai undefined, manakala pembolehubah yang diisytiharkan dengan let dan const kekal tidak dimulakan, menyebabkan ReferenceError jika diakses sebelum pengisytiharan.
• Zon Mati Sementara (TDZ) terpakai untuk membiarkan dan mengekalkan, menghalangnya daripada diakses sebelum ia dimulakan.

Dengan memahami pengangkatan, anda boleh mengelakkan isu biasa dalam JavaScript dan menulis kod yang lebih boleh diramal. Dengan amalan, konsep ini akan menjadi sifat kedua.

Atas ialah kandungan terperinci Memahami JavaScript Hoisting: Panduan Mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!