JavaScript ES 新機能ブロックスコープ

JavaScript ES 新機能ブロックスコープ

序文:

ブロックレベルのスコープについて学ぶ前に、スコープについて理解しておく必要があります。スコープとは、コード内のメンバーが機能する範囲のことです。

1. ブロックスコープとは何ですか?

いわゆるブロックレベル スコープとは、変数が宣言されているコード ブロックまたはサブコード ブロック内でのみ使用できることを意味します。 ECMAScript 2015より前のバージョンにはブロックレベルのスコープはありません。ECMAScript ECMAScript 2015JavaScriptでブロックレベルのスコープを有効にする let キーワードが提供されています。サンプルコードは次のとおりです。

/*
 * ブロックレベルスコープではletキーワードのみ使用可能* letキーワードはブロックレベルスコープを宣言できるだけでなく、グローバルスコープや関数スコープでも使用可能*/
// グローバルスコープ let a = 100; // グローバル変数 (function () {
  // 関数スコープ let b = 200; // ローカル変数 })()
(真)の場合{
  // ブロックスコープ let c = 300; // ローカル変数 }
コンソールログ(a); // 100
console.log(b); // 例外をスローします console.log(c); // 例外をスローします

2. ブロックスコープが必要なのはなぜですか?

ECMAScript 5はグローバル スコープと関数スコープのみがあり、ブロック スコープはありません。この状況にはいくつかの問題があります:

ローカル変数はグローバル変数を上書きする可能性がある

var v = 100;
(関数(){
  console.log(v); // 未定義 
  var v = 200;
})


ループ本体でカウントに使用される変数がグローバル変数としてリークされる

// ループ本体を定義します for (var v = 0; v < 10; v++) {
  console.log("これは for ループです"); // これは for ループです * 10
}
コンソール.log(v); // 10

ループが完了した後に変数が手動で解放されない場合、そのライフサイクルはスクリプトとともに存続し、メモリを占有します。

3. 関数宣言あり

ECMAScript5標準では、関数はグローバル スコープと関数スコープでのみ宣言でき、ブロック スコープでは宣言できないと規定されています。

ケース1:

(真)の場合{
  関数 f() {}
}


ケース2:

試す {
  関数 f() {}
} キャッチ(e) {
  // ...
}

上記の 2 つの関数宣言は、 ECMAScript5によれば不正です。

ECMAScript 2015標準では、ブロック レベルのスコープ内で関数を宣言することはvarキーワードを使用することに似ていると規定されており、現在のブロック レベルのスコープ外からはアクセスできないことを意味します。

{
  関数fun() {
    console.log('これは楽しい');
  }
}
fun(); // これは楽しい
// 上記は次の関数と同等です {
  var fn = 関数() {
    console.log('これはfnです');
  }
}
fn(); // これはfnです
// let キーワードを使用すると、ブロックスコープ外からはアクセスできません {
  f = 関数() {
    console.log('これはfです');
  }
}
f(); // ReferenceError の例外をスローします: f は定義されていません

JavaScript ESの新しいブロックレベルスコープ機能に関するこの記事はこれで終わりです。ES の新しいブロックレベルスコープ機能の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript の基礎: スコープ
  • JavaScript 上級プログラミング: 変数とスコープ
  • JavaScript スコープチェーンの基本原理のグラフィカルな説明
  • JavaScript の静的スコープと動的スコープを例を使って説明します
  • Javascript のスコープとクロージャの詳細
  • JS の難しさ 同期と非同期、スコープとクロージャ、プロトタイプとプロトタイプ チェーンの詳細な説明
  • JavaScriptスコープについての簡単な説明

<<:  スパンの最小高さを定義するソリューションは効果がありません

>>:  Web でよく使われるフォントの紹介 (iOS および Android ブラウザでサポートされているフォント)

推薦する

ECMAScriptにおけるプリミティブ値と参照値の詳しい説明

目次序文動的プロパティとは何ですか?値のコピー値の種類を決定する要約する序文これは JavaScri...

TypeScriptの基本型の詳細な説明

目次ブール型数値型文字列型文字列と数値を連結する未定義およびnull配列型タプル型列挙型あらゆるタイ...

ReactでuseStateを使用する詳細な例

使用状態useState は、関数コンポーネント内で呼び出すことで、コンポーネントに内部状態を追加し...

Vue3+Vantコンポーネントを使用してアプリの検索履歴機能を実装する(サンプルコード)

現在、新しいアプリプロジェクトを開発中です。私にとっても初めてのアプリ開発です。チームで調査と検討を...

MySQL データ操作 - DML ステートメントの使用

例示するDML(データ操作言語)とは、データベースの追加、削除、変更を行うための操作命令のことです。...

シンプルな加算計算機の JavaScript 実装

この記事では、参考までに、加算計算機を実装するためのJavaScriptの具体的なコードを紹介します...

JavaScript プリミティブデータ型シンボルの詳細な説明

目次導入説明名前の競合私有財産要約する導入シンボル変数を作成する最も簡単な方法は、Symbol() ...

Dockerは異常なコンテナ操作を排除する

この初心者は、Docker を学び始めたばかりの頃にこのような問題に遭遇しました。記録しておきます。...

CSS で要素を垂直方向に中央揃えする 7 つの方法

【1】中央の要素の幅と高さを知る絶対値 + 負のマージンコードの実装 .wrapBox5{ 幅: 3...

MySQL接続クエリの原理と応用

概要MySQL の最も強力な機能の 1 つは、データ取得を実行しながらテーブルを結合できることです。...

MySQL でコミットされていないトランザクション情報を見つける方法

少し前に、「ORACLE でコミットされていないトランザクションの SQL ステートメントを見つける...

基本構造、ドキュメント タイプ、ヘッダー、本文などの一般的な HTML 要素の概要。

1. 基本構造:コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBL...

Linux リモート開発に vs2019 を使用する方法

通常、Linux プログラムを開発する場合、次の 2 つのオプションがあります。 Linux上で直接...

MySQL ベストプラクティス: パーティションテーブルの基本タイプ

MySQL パーティションテーブルの概要MySQL の人気が高まるにつれて、MySQL に保存される...

nginxプロセスロックの実装の詳細な説明

目次1. nginxプロセスロックの役割2. エントリーレベルのロックの使用3. nginxプロセス...