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 ブラウザでサポートされているフォント)

推薦する

Web プロジェクトでの SQL インジェクションの防止

目次1. SQLインジェクションの概要2. SQLインジェクション攻撃の全体的な考え方SQLインジェ...

dockerでlnmp環境を構築する方法

プロジェクトディレクトリを作成する php ディレクトリをコピーする次のプロジェクト構造を作成します...

Tomcatにデプロイされたアプリケーションがフロントエンドページにアクセスできない問題について

最近、実践的なトレーニング プロジェクトを実行する際に ssm フレームワークを使用しました。プロジ...

JavaScript 配列のマージのケーススタディ

方法1: var a = [1,2,3]; var b = [4,5] b を連結します。 コンソー...

HTML マークアップ言語 - テーブルタグ

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

Windows Server 2016 に Oracle をインストールする方法

1. Oracle をインストールします。インターネット上には Oracle のインストール手順が多...

MySQL 8.0.12 クイックインストールチュートリアル

MySQL 8.0.12 のインストールには 2 日かかり、さまざまな問題が発生しました。以下にまと...

Vue3の状態管理の使用方法の詳細な説明

目次背景提供/注入共有状態の抽出データを提供するデータの挿入まとめ反応的な共有状態の抽出共有状態の使...

Docker を使用した Redis マスタースレーブレプリケーションの実践の詳細説明

目次1. 背景2. 操作手順3. Dockerをインストールする4. 主なサービス構成5. サービス...

Linux システム ディレクトリ sys、tmp、usr、var の詳細な説明。

Linux 初心者から Linux マスターへの成長の道: Linux システム ディレクトリ s...

MySQL のインデックスにおける NULL の影響についての詳細な説明

序文私は多くのブログを読み、弊社の DBA を含む多くの人々が、MySql では列に null が含...

uniapp プロジェクトで MQTT を使用する方法

目次1. uniappプラグインマーケットのリファレンスプラグイン2. 具体的な導入プロセス1. m...

vuex ベースのショッピングカート機能の実装

この記事の例では、ショッピングカート機能を実装するためのvuexの具体的なコードを参考までに共有して...

CentOS7 での mysql 5.7.23 のバイナリ インストール

インターネット上のインストール情報は不均一で、落とし穴だらけです。インストールにはかなりの労力がかか...

MySQL シリーズ 12 バックアップとリカバリ

目次チュートリアルシリーズ1. バックアップ戦略の説明1. バックアップの種類2. バックアップで考...