JavaScript の静的スコープと動的スコープを例を使って説明します

JavaScript の静的スコープと動的スコープを例を使って説明します

序文

記事の冒頭で、いくつかの概念を学びましょう。

  • スコープ: 「You Don't Know JS」では、スコープとは、エンジンが現在のスコープとネストされたサブスコープ内の識別子名に基づいて変数を検索する方法を管理する一連のルールであると指摘しています。簡単に言えば、スコープは変数の検索方法を指定します。
  • 静的スコープ: レキシカル スコープとも呼ばれる関数のスコープは、関数が定義されたときに決定されます。簡単に言えば、コードを書くときに変数とブロック スコープを記述する場所によって決定されます。
  • 動的スコープ: 関数のスコープは、関数が呼び出されたときに決定されます。

静的スコープと動的スコープ

JavaScript は静的スコープを使用し、関数定義の場所によって関数のスコープが決まります。

静的スコープと動的スコープの違いを理解するために例を見てみましょう。

var val = 1;
関数テスト() {
    コンソールログ(val);
}
関数バー() {
    var val = 2;
    テスト();
}

バー();
// 消す? ? ?

上記のコードでは:

  • まずグローバル変数valを定義し、それに1という値を割り当てます。
  • 関数textを宣言します。関数は変数valの値を印刷します。
  • 関数barを宣言し、関数内でローカル変数valを定義し、それに値2を割り当て、関数内でtest()関数を実行します。
  • bar()関数を実行する

静的スコープ実行プロセス

テスト関数を実行するときは、まずテスト関数内に変数 val があるかどうかを確認します。ない場合は、関数が定義されている場所に沿って検索し、前のレイヤーのコード内を検索して、値が 1 であるグローバル変数 val を見つけます。

スコープの検索は、実行時に常に最も内側のスコープから開始され、最初に一致する識別子が見つかるまで外側に移動します。

関数が呼び出される場所や呼び出される方法に関係なく、そのスコープは関数が定義されている場所によってのみ決定されます。

動的スコープ実行プロセス

test関数が実行されると、まず関数内からval変数が検索されます。見つからない場合は、呼び出し関数のスコープ、つまりbar関数のスコープからval変数が検索されます。そのため、印刷結果は2になります。

エクササイズ

静的スコープを理解し、消化するための 3 つの演習を見てみましょう。スコープは関数が定義されている場所によって決まります。

練習1

変数a = 1
関数fn1(){
    関数fn3(){
        変数a = 4
        fn2()
    }
    変数a = 2
    fn3を返す
}
関数fn2(){
    コンソールログ(a)
}
var fn = fn1()
関数()

上記のコードでは:

  • まずグローバル変数aを定義し、それに1という値を割り当てます。
  • 関数fn1を宣言し、関数内で関数fn3を宣言し、ローカル変数aを定義し、値2を割り当て、値fn3関数を返します。
  • fn3関数はローカル変数aを定義し、それに4の値を割り当て、fn2()を実行します。
  • 関数fn2を宣言します。関数の機能は、aの値を印刷することです。
  • fnにはfn1()の戻り値が割り当てられます。
  • fn() を実行します (fn3 関数を実行するのと同等)

質問を行う前に、静的スコープの概念を理解する必要があります。この問題では、fn2 はグローバルに定義されています。変数 a が fn2 で見つからない場合、fn1 および fn3 とは関係なくグローバルに検索され、1 が出力されます。

練習2

変数a = 1
関数fn1(){
    関数fn2(){
        コンソールログ(a)
    }
    関数fn3(){
        変数a = 4
        fn2()
    }
    変数a = 2
    fn3を返す
}
var fn = fn1()
関数()

fn2 は関数 fn1 内で定義されているため、fn2 内に変数 a がない場合、関数 fn3 とは関係のない fn1 内で検索されます。fn1 内で見つからない場合は、最初に一致する識別子が見つかるまで、fn1 が定義されている前のレベル (グローバル) 内で検索されます。この問題では、fn1で変数aを見つけて2を出力します。

練習3

var a = 1;
関数fn1(){
    関数fn3(){
        関数fn2(){
            コンソールログ(a)
        }
        var a;
        fn2()
        = 4
    }
    変数a = 2
    fn3を返す
}
var fn = fn1()
関数()

この問題では、fn2 は関数 fn3 で定義されています。変数 a が fn2 で見つからない場合、まず fn3 を検索します。それでも見つからない場合は、fn1 を検索します。この問題では、変数 a は fn3 にありますが、fn2() の実行時に a に値が割り当てられていないため、undefined が出力されます。

要約する

JavaScript の静的スコープに関しては、関数定義の場所によって関数のスコープが決まるという 1 つの文だけを覚えておく必要があります。疑問に遭遇したときは、他のコードに惑わされないでください。

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

以下もご興味があるかもしれません:
  • JavaScript 上級プログラミング: 変数とスコープ
  • JavaScript スコープチェーンの基本原理のグラフィカルな説明
  • Javascript のスコープとクロージャの詳細
  • JS の難しさ 同期と非同期、スコープとクロージャ、プロトタイプとプロトタイプ チェーンの詳細な説明
  • Vue.js スロットにおけるスコープ付きスロットの使用法の詳細な説明
  • js 実行コンテキストとスコープの概要
  • JS のスコープの問題に関する考えと共有

<<:  Tomcat を使用して IntelliJ IDEA によってデプロイされたプロジェクトの場所はどこですか?

>>:  大きな MySQL テーブルに列を追加する方法

推薦する

Ubuntu 20.04 ファイアウォール設定の簡単なチュートリアル (初心者)

序文ますます便利になった今日のインターネット社会では、さまざまなインターネット ランサムウェア ウイ...

CSS における px、em、rem、pt の特徴、違い、変換について詳しく説明します。

コンセプト紹介: 1. px (ピクセル):仮想的な長さの単位で、コンピュータ システムのデジタル画...

nginx のフロントエンドとバックエンドに同じドメイン名を設定する方法

この記事では、主にnginxのフロントエンドとバックエンドに同じドメイン名を設定する方法を紹介し、皆...

Reactイベントバインディングの詳細な説明

1. 何ですかreactアプリケーションでは、イベント名はキャメルケース形式で記述されます。たとえ...

React 高階コンポーネント HOC 使用方法の概要

HOCを紹介する一文高階コンポーネント (HOC) とは何ですか? 公式ドキュメントによると、「高階...

MySQL コマンドを使用してインデックスを作成、削除、およびクエリする方法の紹介

MySQL データベース テーブルでは、インデックスを作成、表示、再構築、削除できるため、クエリ速度...

Tomcatディレクトリ構造の詳細な説明

目次ディレクトリ構造binディレクトリconfディレクトリlibディレクトリwebapps ディレク...

CSS のサイズと幅と高さのブラウザ解釈の違いに対する解決策

まずは例を見てみましょうコードをコピーコードは次のとおりです。 <!DOCTYPE html ...

各グループの最新データを取得するためにMySQLベースのグループを実装する

序文:グループ化関数はグループ内の最初のデータを取得しますが、各グループ内の最新のデータを取得する必...

Windows で MySQL 5.6 を 5.7 にアップグレードする方法

前面に書かれたMySQL をアップグレードする方法には、インプレース アップグレードと論理アップグレ...

一般的な Linux ツール vi/vim の完全版

なぜvimを学ぶのかLinuxには多数の設定ファイルがあるため、Linuxには多くのテキスト処理ツー...

MySQL 5.7.9 シャットダウン構文例の詳細な説明

mysql-5.7.9 では、ついにシャットダウン構文が提供されます。以前は、MySQL データベー...

Linuxプロセス通信におけるFIFOの実装

FIFO通信(先入れ先出し)関連のないプロセス間の通信を可能にする FIFO 名前付きパイプ。パイプ...

Expressを使用してプロジェクトを自動的にビルドするNode.jsのプロセス全体

1. Expressライブラリとジェネレータをインストールするcmdを開いて、次のコマンドを入力しま...

docker コマンド例外「権限が拒否されました」の解決方法

Linuxシステムでは、dockerを新しくインストールし、次のようなコマンドを入力します。dock...