JavaScriptスコープについての簡単な説明

JavaScriptスコープについての簡単な説明

1. 範囲

一般的に、プログラム コード内で使用される名前は常に有効で使用可能であるとは限らず、名前の使用可能範囲を制限するコードの範囲が名前のスコープとなります。スコープを使用すると、プログラム ロジックの局所性が向上し、プログラムの信頼性が高まり、名前の競合が減少します。

JavaScript (es6 以前) には 2 種類のスコープがあります。

  • グローバルスコープ
  • ローカルスコープ(関数スコープ)
  • ES6 以降ではブロックレベルのスコープも存在しますが、これについては後ほど詳しく説明します。

1. グローバルな範囲

すべてのコード ( scriptタグ全体) が実行される環境または個別の js ファイルに適用されます。

2. ローカルスコープ

関数に作用するコード環境はローカル スコープです。 関数に関連しているため、関数スコープとも呼ばれます。

例えば:

  (i=0;i<100;i++とします){
       合計 += i;
   }

2. 変数のスコープ

JavaScript では、変数はそのスコープに応じて 2 つのタイプに分けられます。

  • グローバル変数
  • ローカル変数

1. グローバル変数

グローバルスコープで宣言された変数は、グローバル変数 (関数外で定義された変数) と呼ばれます。
グローバル変数は、コード内のどこでも使用できます。グローバル スコープで var を使用して宣言された変数は、グローバル変数です。特別な場合、関数内で var を使用せずに宣言された変数もグローバル変数です (推奨されません)。

2. ローカル変数

ローカルスコープで宣言された変数はローカル変数(関数内で定義された変数)と呼ばれます。
ローカル変数は関数内でのみ使用できます。関数内でvarで宣言された変数はローカル変数です。関数のパラメータは実際にはローカル変数です。

3. グローバル変数とローカル変数の違い

  • グローバル変数:どこでも使用でき、ブラウザが閉じられたときにのみ破棄されるため、より多くのメモリを消費します。
  • ローカル変数:関数内でのみ使用されます。ローカル変数は、その変数が含まれるコード ブロックが実行されると初期化されます。コード ブロックが終了すると破棄されるため、メモリ領域をさらに節約できます。

3. スコープチェーン

内部関数が外部関数の変数にアクセスできるというメカニズムに従って、内部関数がアクセスできるデータを決定するためにチェーン検索が使用されます。これをスコープ チェーンと呼びます。

  • コードである限り、少なくとも1つのスコープがある
  • 関数内に記述されたローカルスコープ
  • 関数内に関数がある場合、このスコープ内に別のスコープを作成できます。

例:次のコードを分析して結果を判断します。

関数f1() {
    var 数値 = 123;
    関数f2() {
        コンソールログ(数値);
    }
    f2();
}
var 数値 = 456;
f1();

分析は以下の図に示されています。

最終結果は次のようになります: 123

同様に、変数の最終値も近接原理を採用することで見つけることができます。

JavaScriptスコープの詳細に関するこの記事はこれで終わりです。JavaScript スコープに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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

<<:  HTML 終了タグの問題と W3C 標準

>>:  impress.js プレゼンテーション層フレームワーク (デモツール) - 初めての体験

推薦する

リンクをクリックしたときにファイルのダウンロードダイアログボックスをポップアップ表示するには、HTML で href を使用します。

今日、新しい技を学びました。あまりやったことがなかったので、今まで知りませんでした...目的: リン...

HTML検証 HTML検証

HTML 検証はHTML 検証を指します。これは、HTML ドキュメントを分析し、標準の HTML ...

Mysql の 2 つのテーブル間の結合クエリの 4 つの状況の概要

一般的に言えば、より完全な結果を得るためには、2 つ以上のテーブルから結果を取得する必要があります。...

tbodyタグの魔法はテーブルコンテンツの表示を高速化します

他の人のウェブページを保存して見たことがあると思いますが、特にdwで開くと、多くのウェブページに&l...

MySQLは外部SQLスクリプトファイルのコマンドを実行します

目次1. SQLコマンドを含むSQLスクリプトファイルを作成する2. SQLスクリプトファイルを実行...

Tomcatの全体構造の簡単な紹介

Tomcat は Web コンテナとして広く知られています。Java を学び始めたときから現在の仕事...

JavaScript における var、let、const の違いの詳細な説明

目次グローバル変数として可変ホイスト一時的なデッドゾーンブロックスコープ重複したステートメント宣言さ...

ファイル書き込みを使用して Linux アプリケーションをデバッグする方法

Linux ではすべてがファイルなので、Android システム自体は Linux + Java だ...

幅と高さが可変の要素を中央に配置するための CSS ソリューション

1. 水平中央公開コード: html: <div class="parent&quo...

HarborをベースにしたDocker専用倉庫の構築方法

目次1. ハーバーの紹介1. ハーバーが民間倉庫を建設3. 港湾の維持管理4. Harborユーザー...

VMware Workstation での VMware vSphere のセットアップ (グラフィック チュートリアル)

VMware vSphere は、業界をリードする最も信頼性の高い仮想化プラットフォームです。 v...

Vueは、サイドナビゲーションバーをタブページに関連付けるサンプルコードを実装します。

目次テクノロジースタック効果分析するテクノロジースタックサイドバー用Antdtabは要素を使用します...

MySQL 全体または単一のテーブルデータのエクスポート

単一のテーブルをエクスポートするmysqldump -u ユーザー -p db名 テーブル名 >...

Vue プロジェクトを使用して複数のプロキシを構成する際の注意事項

Vue プロジェクトの開発プロセスでは、ローカル デバッグの利便性のため、通常、vue.config...

Docker を使用して Spring Boot をデプロイする方法

Docker テクノロジの開発により、マイクロサービスの実装にさらに便利な環境が提供されます。Doc...