JS でのホイスティング (参照エラー!!)

JavaScript でのホイスティングを理解する

ホイスティングは JavaScript の最も基本的な概念の 1 つですが、初心者や熟練の開発者にとってさえ混乱の原因となる可能性があります。

このブログでは、ホイスティングをわかりやすく説明し、その仕組みを説明し、この概念を完全に理解するのに役立つ明確な例を提供します。

ホイスティングとは?

ホイスティングは、変数、関数、クラスの宣言がコンパイル段階でスコープの先頭に移動されるという JavaScript メカニズムです。

これは、これらの要素がコード内で実際に宣言される前に使用できることを意味します。

ただし、巻き上げの動作は var、let、const、関数、クラスごとに異なり、ここで混乱が生じることがよくあります

吊り上げの仕組み

JavaScript コードが実行されると、次の 2 つのフェーズが実行されます。

1. コンパイル フェーズ: このフェーズでは、エンジンは宣言をスコープの先頭にホイストします。

2. 実行フェーズ: コードはホイスティングのルールに従って 1 行ずつ実行されます。

さまざまな宣言のホイスティングルール

1. var

var で宣言された変数はホイストされますが、その値は初期化されません。初期化前は、未定義に設定されます。

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

1. let と const

let と const で宣言された変数もホイストされますが、Temporal Dead Zone (TDZ) に残ります。コード内でその宣言が見つかるまで、それらにアクセスすることはできません。

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. 機能

関数宣言は完全にホイストされます。つまり、関数の名前と本体の両方が先頭に移動されます。これにより、関数を宣言する前に関数を呼び出すことができます。

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

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

ただし、関数式の扱いは異なります。これらは、var、let、または const:
で宣言された変数のように動作します。

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

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

1. クラス

クラスはホイストされますが、let や const と同様に、Temporal Dead Zone に残ります。宣言される前にクラスにアクセスすることはできません。

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

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

時間的デッドゾーン (TDZ) を理解する

時間的デッド ゾーンは、スコープの開始点と変数が宣言されるポイントの間の期間です。この期間中、let 変数または const 変数にアクセスすると 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)

結論

ホイスティングを理解することは、クリーンで予測可能な JavaScript コードを作成するために重要です。最初は魔法のように思えるかもしれませんが、var、let、const、関数、クラスのルールを知っていれば、よくある落とし穴を避けることができます。明確さを確保し、エラーの可能性を減らすために、変数と関数は常にスコープの先頭で宣言してください。

コーディングを楽しんでください!

以上がJS でのホイスティング (参照エラー!!)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。