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

推薦する

MySQL でデータベースを作成した後、ユーザー 'root'@'%' によるデータベース 'xxx' へのアクセスが拒否される問題を解決する

序文最近、仕事で問題が発生しました。データベースを作成した後、データベースに接続するときにエラーが発...

CentOS6.5にpython3.7をインストールする詳細な手順

1. Python 3をダウンロードする https://www.python.org/ftp/py...

nginx httpモジュールのデータ保存構造の概要

このセクションから、http モジュールの実装原理について説明します。http モジュールで非常に重...

WeChatアプレットコンポーネントライフサイクルの落とし穴の記録

通常、コンポーネントのライフサイクルは、ビジネス ロジックが始まる場所です。ビジネスシナリオが複雑で...

Navicat は CSV データを MySQL にインポートします

この記事では、Navicatを使用してcsvデータをmysqlにインポートする方法を参考までに紹介し...

フレックスレイアウトは、上下固定、中間スライドのレイアウトモードを実現します。

この記事では、主に、上下固定と中スライドレイアウトを実現するためのフレックスレイアウトのレイアウト方...

JS でパブリッシュ サブスクライブ モデルを作成する

目次1. シーン紹介2 コードの最適化2.1 ファンを増やす問題を解決する2.2 作品追加の問題を解...

Mysql 5.7.17 をインストールした後、MySQL にログインするチュートリアル

mysql-5.7.17 のインストールについては記事の下部で紹介されているので、参考にしてください...

MysqlクエリJSON結果に関連する関数の概要

JSON 形式のフィールドは、MySQL 5.7 で追加された新しい属性ですが、基本的には文字列とし...

Dockerモードで起動したTomcatのホームページにアクセスすると404エラーが発生する

シナリオ: docker で tomcat を起動すると (Alibaba Cloud からダウンロ...

http.server に基づく LAN サーバーの構築プロセスの分析

皆さんはこのような状況に遭遇したことがあるでしょうか。プロジェクトや研究開発を行う際に、緊急にファイ...

Docker デプロイメントサービスの落とし穴を登る過程の詳細

初めて書きます。自己紹介させてください...みなさんこんにちは。私はジャスミンです。なぜジャスミンと...

JS 非同期スタック トレース: await が Promise よりも優れている理由

概要async/await と Promise の基本的な違いは、await fn() は現在の関数...

大規模なMySQLデータベース用のマスタースレーブシステムを構築するアイデアを共有する

今週は戦争のように忙しかったです。他人に操られているような気がします。毎日朝早く出勤して夜遅く帰り、...