JavaScript でのホイスティングを理解する-jsチュートリアル-php.cn

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

WBOY

リリース： 2024-07-27 07:02:02

オリジナル

470 人が閲覧しました

Understanding Hoisting in JavaScript

ホイスティングは、JavaScript の基本的な概念の 1 つであり、新しい開発者を混乱させることがよくあります。ただし、一度理解すると、JavaScript コードの作成とデバッグに非常に役立ちます。この記事では、ホイスティングの謎を解き明かし、その仕組みを説明し、その効果を示す例を示します。

ホイスティングとは何ですか?

JavaScript では、ホイスティングとは、コンパイル段階で変数と関数の宣言が、それらを含むスコープ (グローバルスコープまたは関数スコープ) の先頭に移動、または「ホイスト」される動作です。これは、コード内で実際に宣言される前に、変数や関数を使用できることを意味します。

変数のホイスト

変数の巻き上げから始めましょう。次のコードを考えてみましょう:

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

ログイン後にコピー

宣言前に myVar 変数が使用されているにもかかわらず、エラーは発生しません。代わりに、未定義がコンソールに記録されます。これは、myVar の宣言がスコープの先頭に引き上げられているにもかかわらず、その割り当てがそのまま残っているために発生します。上記のコードは次のように解釈されます:

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

ログイン後にコピー

巻上機能

関数宣言もホイストされます。次の例を考えてみましょう:

greet(); // Output: Hello!

function greet() {
  console.log('Hello!');
}

ログイン後にコピー

greet 関数は宣言前に呼び出されますが、正しく動作します。これは、関数宣言がスコープの先頭に引き上げられるためです。コードは次のように解釈されます:

function greet() {
  console.log('Hello!');
}

greet(); // Output: Hello!

ログイン後にコピー

Let 宣言と Const 宣言

ES6 の導入により、let キーワードと const キーワードは、var と同じ方法ではホイストされない、ブロックスコープの変数を提供します。ただし、それらの宣言は依然としてホイストされていますが、ブロックの開始から宣言に遭遇するまで「一時的デッドゾーン」(TDZ) 内に残ります。宣言の前にこれらにアクセスすると、ReferenceError が発生します。

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

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

ログイン後にコピー

実践例

例 1: var を使用した変数のホイスティング

function hoistExample() {
  console.log(message); // Output: undefined
  var message = 'Hoisting in JavaScript';
  console.log(message); // Output: Hoisting in JavaScript
}

hoistExample();

ログイン後にコピー

例 2: 関数のホイスティング

hoistedFunction(); // Output: This function is hoisted!

function hoistedFunction() {
  console.log('This function is hoisted!');
}

ログイン後にコピー

例 3: let と const を使用した時間的デッドゾーン

function tdzExample() {
  console.log(tempVar); // ReferenceError: Cannot access 'tempVar' before initialization
  let tempVar = 'Temporal Dead Zone';
}

tdzExample();

ログイン後にコピー