Memahami Hoisting dalam JavaScript: Panduan Komprehensif

Mengangkat dalam JavaScript

Mengangkat ialah tingkah laku di mana pembolehubah dan pengisytiharan fungsi dialihkan (atau "diangkat") ke bahagian atas skop yang mengandungi (sama ada skop global atau skop fungsi) sebelum kod dilaksanakan. Ini bermakna anda boleh menggunakan pembolehubah dan fungsi sebelum ia benar-benar diisytiharkan dalam kod.

Mengangkat dalam Pembolehubah

var

• Pembolehubah yang diisytiharkan dengan var dinaikkan ke bahagian atas skopnya, tetapi nilainya tidak dimulakan sehingga titik dalam kod tempat tugasan berlaku.

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

biarkan dan const

• Pembolehubah yang diisytiharkan dengan let dan const juga dinaikkan tetapi diletakkan dalam "zon mati sementara" sehingga pengisytiharannya dicapai. Mengaksesnya sebelum diisytiharkan akan mengakibatkan ReferenceError.

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

// block scope
{
  let x = 5;
}

console.log(x); // ReferenceError: x is not defined

Mengangkat dalam Fungsi

Fungsi Tradisional

• Pengisytiharan fungsi dinaikkan sepenuhnya, bermakna pengisytiharan dan badan fungsi dialihkan ke bahagian atas skop. Ini membolehkan anda memanggil fungsi sebelum pengisytiharannya dalam kod.

sayHello(); // "Hello!"
function sayHello() {
  console.log("Hello!");
}

• Sebaliknya, ungkapan fungsi (di mana fungsi ditugaskan kepada pembolehubah) hanya dinaikkan sebagai pembolehubah, jadi memanggilnya sebelum pembolehubah dimulakan akan mengakibatkan tidak ditentukan atau TypeError.

greet(); // TypeError: greet is not a function
var greet = function () {
  console.log("Hi!");
};

greet(); // ReferenceError: Cannot access 'one' before initialization
let greet = function () {
  console.log("Hi!");
};

Fungsi Anak Panah

• Sebaliknya, ungkapan fungsi (di mana fungsi ditugaskan kepada pembolehubah) hanya dinaikkan sebagai pembolehubah, jadi memanggilnya sebelum pembolehubah dimulakan akan mengakibatkan tidak ditentukan atau TypeError.

greet(); // TypeError: greet is not a function
var greet = () => {
  console.log("Hi!");
};

greet(); // ReferenceError: Cannot access 'one' before initialization
let greet = function () {
  console.log("Hi!");
};

Zon Mati Sementara (TDZ)

Zon mati sementara (TDZ) wujud untuk pembolehubah yang diisytiharkan menggunakan let dan const kerana JavaScript direka untuk menghalang anda daripada mengakses pembolehubah ini sebelum ia diisytiharkan dan dimulakan.

Mengapa var dan let, const berkelakuan berbeza dalam mengangkat

• Ia adalah kerana evolusi sejarah dalam JavaScript.
• Pada mulanya, JavaScript direka untuk pengguna yang bukan pembangun, dan penggunaan teras utama JavaScript adalah untuk menambahkan elemen interaktif kecil pada halaman web.
• Jadi var hanya menyokong skop berfungsi. Juga pada masa itu, tiada skop blok.
• Tetapi dalam evolusi JavaScript kemudian, ia menjadi lebih rumit untuk bekerja dengan var dan membetulkan pepijat.
• Jadi untuk menjadikan JavaScript berdaya saing dengan bahasa moden yang lain, lebih banyak ciri telah ditambahkan seperti let, const, fungsi anak panah, kaedah ES6, dll.

Mengapa var tidak dikemas kini seperti let dan const

• Ia adalah kerana keserasian ke belakang.
• Pada masa itu, JavaScript digunakan secara meluas oleh banyak perusahaan, jadi mengemas kini atau membuat perubahan dalam ciri sedia ada akan menyebabkan pecahnya pangkalan kod.
• Oleh itu, ciri moden telah ditambah secara individu.

Soalan Temuduga Biasa

• Apakah yang diangkat dalam JavaScript?
• Apa yang dinaikkan dalam JavaScript, dan apa yang tidak?
• Apakah perbezaan antara var, let dan const berkenaan dengan angkat?
• Apakah zon mati temporal (TDZ) dalam JavaScript?
• Bolehkah anda menerangkan angkat dengan pengisytiharan fungsi berbanding ungkapan fungsi?
• Apakah yang di angkat dalam modul ES6?
• Mengapa kita harus mengelak daripada bergantung pada pengangkatan dalam kod dunia sebenar?

Ringkasan

• Hoisting ialah gelagat lalai dalam JavaScript di mana pengisytiharan pembolehubah dan fungsi dialihkan ke bahagian atas skop masing-masing semasa fasa penyusunan.
• Hoisting berfungsi hanya untuk pembolehubah yang diisytiharkan dengan var dan fungsi tradisional, bukan untuk fungsi let, const dan anak panah.
• Hanya pengisytiharan fungsi yang dinaikkan, jadi fungsi tradisional berfungsi, tetapi jika fungsi itu ditetapkan kepada pembolehubah, ia tidak akan boleh dipanggil sehingga ia ditakrifkan.
• Sebab mengapa fungsi var dan tradisional dinaikkan tetapi fungsi let, const dan anak panah tidak adalah kerana pada peringkat awal, JavaScript kebanyakannya digunakan untuk interaksi UI yang kecil.
• Tetapi kemudian, kerana JavaScript digunakan secara meluas untuk membina aplikasi oleh perusahaan, ia menjadi lebih sukar untuk membetulkan pepijat hanya dengan skop global.
• Jadi dalam kemas kini masa hadapan, kebimbangan yang lebih selamat telah ditangani.
• Selain itu, mengemas kini ciri sedia ada akan mempunyai pangkalan kod yang rosak, jadi ciri baharu ditambahkan secara berasingan.

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