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

推薦する

docker ベースで Prometheus+Grafana を構築する手順の詳細説明

1. プロメテウスの紹介Prometheus は、もともと SoundCloud によって開発された...

詳細なLinuxインストールチュートリアル

(Win7 システム) VMware 仮想マシンのインストール チュートリアルVMware は仮想マ...

jsフェッチ非同期リクエストの使用の詳細な例

目次非同期を理解するフェッチ(url)レスポンス.json() asyncとawaitを組み合わせる...

MySQL の日付と時刻の加算と減算のサンプル コード

目次1.MySQLは時間間隔を加算または減算します2. 日付を減算する最近、MySQL を見直してい...

初心者向けのHTMLタグネストルールの詳細なまとめ

最近、HTML を再度学習しており、これは HTML に対する新たな理解と言えます。これを過小評価し...

MySQL 接続クエリを本当に学びましたか?

1. 内部結合クエリの概要内部結合は、アプリケーションで非常に一般的な結合操作であり、通常はデフォ...

Linux で仮想コンソール セッションをロックする方法

共有システムで作業しているときは、他のユーザーが自分のコンソールを覗き込んで、自分が何をしているか見...

MySQL 基本チュートリアル パート 1 MySQL5.7.18 のインストールと接続チュートリアル

この記事から、MySQL を紹介し学習するための新しい一連の記事がスタートします。なぜ MySQL ...

Centos8 に nginx をインストールするための詳細なチュートリアル (画像とテキスト)

Nginx (「エンジン エックス」と発音) は、インターネット上の最大規模のサイトの負荷を処理す...

Node.js における npx コマンドの使用法とシナリオ分析

npx 使用チュートリアル今晩、 Vue-Cli勉強していたところ、ふと最新の@4.xxバージョンを...

CSS3を使用してボタンホバーフラッシュダイナミック特殊効果コードを実装する

CSS3 の列シリーズ属性を使用してウォーターフォールレイアウトを作成する方法を紹介しました。興味の...

MySQL データベースの基本的な SQL ステートメントの概要

この記事では、例を使用して、Mysql データベースの基本的な SQL ステートメントについて説明し...

IEのクラッシュバグ

コードをコピーコードは次のとおりです。 <スタイル タイプ="text/css&qu...

VueとFlask間の通信の実装

axiosをインストールして通信を実装するここでは、axios を使用して Vue フロントエンドと...

IDEA を使用して Tomcat を設定し、JSP ファイルを作成する方法

idea を使用して JSP ファイルを書き込む前に、jdk 環境 (ここでは説明しません) と対応...