JavaScript Hoisting Dijelaskan untuk Meningkatkan Kemahiran Pengekodan Anda

JavaScript ialah bahasa yang sering berkelakuan dengan cara yang boleh mengelirukan pendatang baru. Satu kelakuan sedemikian ialah mengangkat, konsep yang setiap pembangun JavaScript harus faham untuk menulis kod yang lebih boleh diramal. Dalam artikel ini, kami akan meneroka apa itu angkat, cara ia berfungsi dengan pembolehubah dan fungsi serta cara anda boleh mengelakkan perangkap yang berkaitan dengannya.

Apakah itu Mengangkat?

Hoisting merujuk kepada gelagat lalai JavaScript untuk mengalihkan pengisytiharan (tetapi bukan permulaan) ke bahagian atas skopnya. Ini berlaku semasa fasa penyusunan sebelum kod dilaksanakan. Ini bermakna anda boleh menggunakan pembolehubah dan fungsi sebelum ia benar-benar diisytiharkan dalam kod anda.

Contoh:

console.log(myVar); // undefined
var myVar = 5;

Dalam contoh ini, anda mungkin menjangkakan ReferenceError kerana myVar digunakan sebelum ia diisytiharkan. Walau bagaimanapun, disebabkan oleh pengangkatan, apa yang sebenarnya berlaku ialah pengisytiharan var myVar dialihkan ke bahagian atas skopnya, manakala tugasan (myVar = 5) kekal di tempatnya. Secara dalaman, JavaScript mentafsirkannya sebagai:

var myVar;
console.log(myVar); // undefined
myVar = 5;

Disebabkan ini, myVar ditakrifkan tetapi belum ditetapkan apabila console.log berjalan, itulah sebabnya ia mengeluarkan tidak ditentukan.

Angkat dan Pembolehubah

Mari kita pecahkan cara angkat berfungsi dengan pelbagai jenis pembolehubah: var, let dan const.

1. var Mengangkat

Dengan var, kedua-dua pengisytiharan dan pembolehubah dinaikkan. Walau bagaimanapun, hanya pengisytiharan yang dipindahkan, bukan tugasan.

console.log(a); // undefined
var a = 10;

Pengisytiharan var a dinaikkan, tetapi tugasan berlaku kemudian, jadi a tidak ditentukan apabila dilog.

2. let and const Hoisting

Pembolehubah yang diisytiharkan dengan let dan const juga dinaikkan, tetapi ia tidak dimulakan kepada undefined seperti var. Sebaliknya, mereka memasuki Zon Mati Sementara (TDZ) dari permulaan skop mereka sehingga pengisytiharan ditemui.

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;

Di sini, b dinaikkan, tetapi ia tidak tersedia sehingga baris pengisytiharan sebenar dilaksanakan, yang membawa kepada ReferenceError.

Tingkah laku yang sama digunakan untuk const, dengan peraturan tambahan bahawa pembolehubah const mesti dimulakan pada masa pengisytiharan.

Pengangkatan dan Fungsi

Pengisytiharan fungsi dinaikkan sepenuhnya, bermakna kedua-dua nama fungsi dan badan dialihkan ke bahagian atas skop. Ini membolehkan anda memanggil fungsi sebelum ia diisytiharkan.

Contoh Pengisytiharan Fungsi:

greet(); // "Hello, World!"

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

Di sini, ucapan pengisytiharan fungsi dinaikkan sepenuhnya, jadi fungsi boleh dipanggil walaupun sebelum kod mencapai definisinya.

Ekspresi Fungsi dan Mengangkat

Ekspresi fungsi, walau bagaimanapun, tidak dinaikkan dengan cara yang sama. Memandangkan ia dianggap sebagai tugasan, hanya pengisytiharan pembolehubah yang dinaikkan—bukan definisi fungsi.

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

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

Dalam kes ini, salam pembolehubah dinaikkan, tetapi ia ditetapkan tidak ditentukan semasa proses pengangkatan. Itulah sebabnya memanggil greet() sebelum tugasan melemparkan TypeError.

Mengelakkan Perangkap Angkat

Untuk mengelakkan kekeliruan yang disebabkan oleh pengangkatan, ikuti amalan terbaik ini:

1. Isytiharkan pembolehubah di bahagian atas skopnya – Walaupun pengangkatan menggerakkan pengisytiharan ke atas, amalan yang baik untuk mengisytiharkannya pada permulaan skop masing-masing. Ini menjadikan kod anda lebih mudah dibaca dan boleh diramal.

2. Gunakan let dan const bukannya var – Pembolehubah yang diisytiharkan dengan let dan const adalah berskop blok, yang menjadikan tingkah laku angkat lebih jelas dan kurang terdedah kepada pepijat. Ia juga mengurangkan kemungkinan merujuk pembolehubah secara tidak sengaja sebelum permulaannya.

3. Atur pengisytiharan fungsi – Isytihar fungsi anda sebelum menggunakannya untuk mengelakkan bergantung pada tingkah laku angkat.

Kesimpulan

Hoisting ialah salah satu daripada banyak keanehan JavaScript, tetapi memahami cara ia berfungsi boleh membantu anda menulis kod yang lebih bersih dan kurang terdedah kepada ralat. Ingat bahawa semasa kedua-dua pengisytiharan fungsi dan pembolehubah dinaikkan, ia berkelakuan berbeza. Berpegang pada let dan const over var, dan pastikan kod anda teratur untuk mengelakkan kejutan.

Dengan mengambil berat tentang pengangkatan, anda boleh menjadikan kod JavaScript anda lebih mudah diramal dan lebih mudah diselenggara.

Atas ialah kandungan terperinci JavaScript Hoisting Dijelaskan untuk Meningkatkan Kemahiran Pengekodan Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!