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

推薦する

MySQL のインデックスと制約の例文

外部キーテーブルの主キーがどのテーブルの外部キーであるかを照会する 選択 テーブル名、 列名、 制約...

Vuexの補助関数の使い方

目次マップ状態マップゲッターマップミューテーションマップアクション複数のモジュールマップ状態 ...

Nginx で Brotli 圧縮アルゴリズムを有効にする方法の例

Brotli は、Zopfli よりも 20 ~ 26% 高い圧縮率を実現できる新しいデータ形式です...

ウェブページの最も基本的なコード

◆お気に入りに追加例示するクリックすると、ブラウザのお気に入りメニューにウェブサイトが追加されます...

HTML の基本的な使用法には、リンク、スタイルシート、span、div などが含まれます。

1. リンクハイパーテキスト リンクは HTML において非常に重要です。基本的な形式は次のとおりで...

Linuxがすべてのコマンドをサポートしていない問題の解決策

Linux がすべてのコマンドをサポートしていない場合はどうすればいいですか?すべてのLinuxコマ...

ハイパーリンクの幅と高さを直接設定できない問題の解決策

幅と高さを直接使用することはできません。 display:block; または display:in...

波効果を作成するための CSS のトリック

純粋な CSS を使用して波の効果を実現することは、常に非常に困難でした。 波形曲線を実現するにはベ...

フォームを送信した後、別のファイルに移動する

<br />質問:特定のファイルにジャンプするには、HTML でどのように記述すればよい...

MySql におけるプロセス制御関数/統計関数/グループ化クエリの使用法の分析

これからの道のりは長く困難ですが、私は探求を続けます。また週末がやってきました。引き続き、皆さんと一...

ウェブデザイナーのための超便利なツール 50 選

ウェブデザイナーになるのは簡単ではありません。デザインやアーキテクチャを考慮するだけでなく、さまざま...

HTML におけるいくつかの特殊属性タグの使用法の紹介

以下の属性はブラウザとの互換性があまりありません。 1.transform:rotate(45度) ...

Centos8.2 クラウド サーバー環境に Tomcat8.5 をインストールするための詳細なチュートリアル

Tomcatをインストールする前に、まずJDK環境をインストールしてくださいLinux サーバー上で...

ab ツールを使用してサーバー上で API ストレス テストを実行します。

目次1 システムスループットの簡単な紹介2 試験方法2.1 クライアントテストツール2.1.1 GE...