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

推薦する

JavaScript フレームワーク デザイン パターンの詳細な説明

目次動画最優秀選手ムヴヴムVueのソーススパ mpa要素を作成するクラス要約する動画 Model(模...

js を使用してウォーターフォール効果を実現する

この記事の例では、滝の流れの効果を実現するためのjsの具体的なコードを参考までに共有しています。具体...

サーバー上で selenium+chromedriver を実行するための詳細なチュートリアル

1. はじめにSelenium を使用して Web サイトからデータをスクレイピングしたいのですが、...

Ubuntu 20.04は静的IPアドレスを設定します(異なるバージョンを含む)

Ubuntu 20.04はnetplanを通じてネットワークを管理するため、以前のバージョンとは少...

Vueのドラッグスクリーンショット機能を実装する簡単な方法

マウスをドラッグしてページのスクリーンショットを撮ります(指定した領域にスクリーンショットをドラッグ...

Windows 7 の mysql6.x で中国語の文字化けが発生する問題に対する完璧な解決策

1. コマンドラインでMySQLサービスを停止します: net stop mysql stop my...

Dockerイメージ内のnoneイメージ操作を削除する

普段はdocker buildコマンドでイメージを生成していますが、コードの更新が頻繁に行われるとn...

JavaScript配列をツリー構造に変換する方法

1. 需要バックエンドは、フロントエンドがツリー構造(重複データなし)に変換するためのデータを提供し...

背景位置パーセンテージ原則の詳細な説明

今日、誰かがコードを調整するのを手伝っていたとき、次のようなスタイルを見つけました。 背景位置: 5...

DockerにTomcat8をインストールする方法

1. dockerでtomcat8をインストールする1. Docker HubでTomcatイメージ...

Vueはvue-quill-editorリッチテキストエディタを使用し、画像をサーバーにアップロードします。

目次1. 準備2. グローバルコンポーネント quill-editor を定義する1. テンプレート...

CentOs システムで Python と yum をアンインストールするソリューション

事故の背景: 数日前、プロジェクトの必要性により、サーバーに python-mysql モジュールを...

vue-router 履歴モード サーバー側設定プロセス記録

歴史ルート履歴モードとは、HTML5 の履歴 API を使用してクライアント側ルーティングを実装する...

MySQL はどのようにしてデータの整合性を確保するのでしょうか?

オンライン ビジネスにとってデータの一貫性と整合性が重要であることは明らかです。データが失われないよ...

Nginx ロードバランシング/SSL 構成の実装

負荷分散とは何ですか?ドメイン名が複数の Web サーバーを指している場合は、nginx ロード バ...