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 プレゼンテーション層フレームワーク (デモツール) - 初めての体験

推薦する

iframe でページを開く方法

解決:リンクのターゲット属性値をターゲット フレームワーク名と同じに設定するだけです。具体的な手順:...

Linuxの貼り付けコマンドの使い方

01. コマンドの概要貼り付けコマンドは各ファイルを列ごとに結合します。これは、2 つの異なるファイ...

Confluence と jira-software を Docker にデプロイする方法

バージョン: セントロス==7.2 jdk==1.8 合流==6.15.4 jira-ソフトウェア=...

複数ページ通信を実現する JavaScript の sharedWorker の詳細な例

こんなことがありました。今日はGitHubで遊んでいました。最初はログインせずにいくつかのページを閲...

Vueはテーマ切り替えのための複数のアイデアを実装します

目次テーマを動的に変更する最初の方法: 動的コンポーネント2番目の方法はルーティング分離です要約する...

Linux インストール Apache サーバー構成プロセス

袋を用意するインストールApacheがすでにインストールされているかどうかを確認するrpm -qa ...

Mysqlがデータベースに接続するときのホストとユーザーのマッチングルールについての簡単な説明

--データベースに接続するとき、ホストとユーザーのマッチングルール公式ドキュメント: https:/...

Linux exa コマンド (ls よりも優れたファイル表示エクスペリエンス)

インストールREADMEに従ってインストールしてくださいドキュメントには、exa は Rust で実...

ElementUI el-select の過剰なデータに対する解決策についての簡単な説明

目次1. シナリオの説明2. 解決策オプションが多すぎる el-select コンポーネントの解決策...

Linux CentOS インストール JDK および Tomcat チュートリアル

まずJDKをダウンロードします。ここではjdk-8u181-linux-x64.tar.gzを使用し...

Golang を使って Docker API を実際に操作する

目次SDKのインストールローカル Docker の管理コンテナの実行バックグラウンドでコンテナを実行...

CentOS 7.0 (mysql-5.7.21) で複数の MySQL インスタンスを起動する方法

設定手順Linux システム: CentOS-7.0 MySQL バージョン: 5.7.21 Lin...

layui をベースにしたログインページの実装

この記事の例では、ログインページを実装するためのlayuiの具体的なコードを参考までに共有しています...

Linux で毎日データベースの自動バックアップを設定する方法

この記事では、Centos7.6 システムと Oracle11g を例に挙げます。 1. まずデータ...

MySQL のロックとトランザクションの簡単な分析

MySQL 自体はファイルシステムに基づいて開発されましたが、ロックの存在が異なります。データベース...