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

推薦する

CSSスクロールバースタイル設定の実装

Webkit スクロールバー スタイルのリセット1. スクロールバーには、スクロールバー ボタンとト...

HTML タグ マーキーはさまざまなスクロール効果を実現します (JS 制御なし)

ページの自動スクロール効果は JavaScript で実現できますが、今日偶然、JS 制御なしでさま...

React における setState の同期または非同期の問題の理解

目次1. setState は同期的ですか?非同期ですか? 2. 非同期的に動作する1. React...

Linux カーネルの copy_{to, from}_user() に関する考察

目次1. copy_{to,from}_user() とは何か1. copy_{to,from}_u...

HTML テーブル マークアップ チュートリアル (1): テーブルの作成

<br />これは 123WORDPRESS.COM が提供する一連のチュートリアルです...

CSS モジュールソリューション

CSS のモジュール ソリューションは、JS のモジュール ソリューションと同じくらい多く存在すると...

jQueryは画像の強調表示を実現します

ページ上の画像を強調表示することは非常に一般的です。ここでは、jQuery を使用して画像を強調表示...

Dockerコンテナ起動時に固定IPを設定する実装

Dockerインストール後のネットワークタイプ [root@insure updev]# docke...

VueはEChartsを使用して折れ線グラフと円グラフを実装します

バックエンド管理プロジェクトを開発する場合、バックエンドのユーザーデータをカウントし、折れ線グラフや...

Linux rpm および yum コマンドとその使用法の詳細な説明

RPM パッケージ管理インターネット ダウンロード パッケージのパッケージ化およびインストール ツー...

一般的な Dockerfile コマンドの使用方法の紹介

目次01 CM 02 エントリーポイント03 ワークディレクトリ04 環境05 ユーザー06巻07 ...

MySQL パフォーマンス チューニングについて知っておくべき 15 個の重要な変数 (要約)

序文: MYSQL は最も人気のある WEB バックエンド データベースです。最近、NOSQL がま...

Photoshop を使って Web ワイヤーフレームを作成する方法

この投稿では、通知、画像とビデオ、フォーム フィールド、タイトル、段落、箇条書きリスト、ナビゲーショ...

cocoscreatorプレハブの詳しい説明

目次プレハブプレハブの作り方プレハブの役割1. 同じタイプのノードをバッチで作成する2. 特定の時間...

Dockerは公式Redisイメージをインストールし、パスワード認証を有効にします

参考: Docker 公式 Redis ドキュメント1. 特別なバージョン要件がある場合は、redi...