MENANGKUNG DALAM JS (RALAT RUJUKAN!!)

Memahami Hoisting dalam JavaScript

Hoisting ialah salah satu konsep paling asas dalam JavaScript, namun ia boleh menjadi punca kekeliruan untuk pemula dan juga pembangun berpengalaman.

Dalam blog ini, kami akan membongkar misteri angkat, menerangkan cara ia berfungsi dan memberikan contoh yang jelas untuk membantu anda memahami konsep ini sepenuhnya.

Apakah itu Mengangkat?

Hoisting ialah mekanisme JavaScript di mana pengisytiharan pembolehubah, fungsi dan kelas dialihkan ke bahagian atas skopnya semasa fasa penyusunan.

Ini bermakna anda boleh menggunakan elemen ini sebelum ia benar-benar diisytiharkan dalam kod.

Walau bagaimanapun, angkat berfungsi secara berbeza untuk var, let, const, fungsi dan kelas, dan di sinilah kekeliruan sering timbul

Cara Pengangkat Berfungsi

Apabila kod JavaScript dilaksanakan, ia melalui dua fasa:

1. Fasa Penyusunan: Semasa fasa ini, enjin mengangkat pengisytiharan ke bahagian atas skopnya.

2. Fasa Pelaksanaan: Kod berjalan baris demi baris, menghormati peraturan angkat.

Peraturan Mengangkat untuk Pengisytiharan Berbeza

1. var

Pembolehubah yang diisytiharkan dengan var dinaikkan, tetapi nilainya tidak dimulakan. Sebelum permulaan, ia ditetapkan kepada tidak ditentukan.

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

1. biar dan const

Pembolehubah yang diisytiharkan dengan let dan const juga dinaikkan tetapi kekal dalam Zon Mati Sementara (TDZ). Mereka tidak boleh diakses sehingga pengisytiharan mereka ditemui dalam kod.

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

console.log(c); // ReferenceError: Cannot access 'c' before initialization
const c = 30;

1. Fungsi

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

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

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

Walau bagaimanapun, ungkapan fungsi dilayan secara berbeza. Mereka berkelakuan seperti pembolehubah yang diisytiharkan dengan var, let, atau const:

sayHi(); // ReferenceError: Cannot access 'sayHi' before initialization

const sayHi = function () {
    console.log("Hi!");
};

1. Kelas

Kelas dinaikkan tetapi kekal dalam Zon Mati Sementara, serupa dengan let dan const. Anda tidak boleh mengakses kelas sebelum ia diisytiharkan.

const obj = new MyClass(); // ReferenceError: Cannot access 'MyClass' before initialization

class MyClass {
    constructor() {
        this.name = "Class";
    }
}

Memahami Zon Mati Sementara (TDZ)

Zon Mati Temporal ialah tempoh antara permulaan skop dan titik di mana pembolehubah diisytiharkan. Dalam tempoh ini, sebarang akses kepada pembolehubah let atau const akan menimbulkan ReferenceError.

Key Takeaways

Declaration   Hoisted?       Behavior Before Initialization

var            Yes              undefined

let            Yes            ReferenceError (in TDZ)

const          Yes             ReferenceError (in TDZ)

Function Declaration  Yes       Fully hoisted, works before 
declaration

Function Expression  Partially (as var)   undefined or ReferenceError (if let/const)

Class           Yes              ReferenceError (in TDZ)

Kesimpulan

Memahami angkat adalah penting untuk menulis kod JavaScript yang bersih dan boleh diramal. Walaupun ia mungkin kelihatan seperti sihir pada mulanya, mengetahui peraturan untuk var, let, const, fungsi dan kelas akan membantu anda mengelakkan perangkap biasa. Sentiasa isytiharkan pembolehubah dan fungsi anda di bahagian atas skopnya untuk memastikan kejelasan dan mengurangkan kemungkinan ralat.

Selamat mengekod!

Atas ialah kandungan terperinci MENANGKUNG DALAM JS (RALAT RUJUKAN!!). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!