JavaScript Hoisting - Apa yang bergerak dan apa yang kekal

mekanisme penambahbaikan JavaScript adalah seperti penetapan permainan panggung. Sebelum Kod berjalan (dalam "Peringkat Penciptaan"), JavaScript akan menaikkan semua perisytiharan ke bahagian atas skopnya, sama seperti kakitangan panggung memindahkan alat peraga ke kedudukan yang ditentukan sebelum tirai dibangkitkan. Satu -satunya perbezaan ialah hanya pernyataan yang dibangkitkan, dan permulaannya belum diperbaiki.

Menurut spesifikasi ECMAScript, tingkah laku ini sebenarnya adalah sebahagian daripada penciptaan "persekitaran leksikal" yang diselaraskan dalam peringkat penciptaan JavaScript. Tetapi janganlah kita terlalu teknikal, ingatlah bahawa JavaScript akan "mengimbas" sebelum menjalankan kod.

penambahbaikan

var

Dalam contoh ini, pernyataan

<code class="language-javascript">console.log(x); // 输出：undefined
var x = 5;
console.log(x); // 输出：5</code>

dipromosikan ke bahagian atas skop, tetapi inisialisasi

belum diperbaiki. Inilah sebabnya output pertama var x bukannya membuang ralat. Pembolehubah ada, tetapi ia belum diberikan. x = 5 console.log(x) dan undefined kawasan mati sementara (TDZ) x

Dalam contoh ini, pernyataan let telah diperbaiki, tetapi ia terletak di kawasan mati sementara (TDZ) sebelum permulaan. Cuba akses const sebelum permulaan akan membawa kepada

. Tingkah laku ini berbeza daripada ,

<code class="language-javascript">console.log(y); // 抛出ReferenceError: Cannot access 'y' before initialization
let y = 10;
console.log(y); // 输出：10</code>

hanya akan kembali

dalam keadaan yang sama. let y y ReferenceError Ini juga termasuk apa -apa kandungan yang menggunakan pengisytiharan atau var, tentu saja, juga termasuk fungsi. var undefined

Kawasan Mati Sementara (TDZ)

Bercakap tentang kawasan mati sementara, ini adalah di mana let dan const mengisytiharkan sebelum permulaan. Berbeza dengan apabila

kembali

sebelum akses awal, kenyataan moden ini akan disalahpahami. Spesifikasi ECMAScript merujuk kepada tingkah laku ini sebagai "semantik rantau mati sementara", tetapi saya menyebutnya "JavaScript menjadikan kita jujur."

contoh yang sedikit sukar

let const Apa yang berlaku di sini? Perisytiharan fungsional telah diperbaiki, jadi kita boleh memanggilnya terlebih dahulu. Tetapi bagaimana dengan ? Ia masih kekal di tempatnya. Inilah sebabnya lawatan var akan memberi kami undefined, dan kami cuba membacanya sebelum skrip siap.

Perangkap Deklarasi Tuntutan

<code class="language-javascript">function setupEventHandler() {
  handleClick(); // 可运行！

  const config = {
    debug: true,
  };

  function handleClick() {
    if (config?.debug) {
      // 未定义！
      console.log("Debug mode");
    }
  }
}

setupEventHandler();</code>

Cara untuk memperbaiki kelas tidak sama.

handleClick config Walaupun kelas diperbaiki, mereka masih berada di "zon mati sementara" sebelum definisi mereka dinilai. Ini bermakna anda tidak boleh mengaksesnya sebelum anda mengisytiharkannya. handleClick config undefined ingat, kenyataan itu dipindahkan ke bahagian atas, tetapi permulaannya tidak berubah.

Atas ialah kandungan terperinci JavaScript Hoisting - Apa yang bergerak dan apa yang kekal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!