JavaScript のスコープとスコープチェーンの説明-jsチュートリアル-php.cn

JavaScript のスコープとスコープチェーンの説明

PHPz

リリース： 2023-09-07 09:25:02

転載

1007 人が閲覧しました

解释 JavaScript 中的作用域和作用域链

JavaScript では、Scope は、コードのどの部分で変数や関数にアクセスする方法とアクセスかを定義します。簡単に言えば、スコープはコードの安全性と可読性を向上させるのに役立ちます。したがって、変数と関数にはスコープ内でのみアクセスでき、スコープ外にはアクセスできません。

このチュートリアルでは、さまざまなタイプのスコープについて説明します。

JavaScript のグローバルスコープ

グローバルに定義された変数と関数は、 グローバル スコープを持つすべてのブロックと関数の外側にあることを意味します。コード内のどこからでも、グローバルスコープを持つすべての変数と関数にアクセスできます。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従ってグローバルスコープの変数を定義できます。

リーリー

ここでは、グローバル変数

global

が関数の外で宣言されているため、グローバルスコープを持ちます。次に、ローカル変数 b を宣言し、グローバル変数 global の値をそれに割り当てることにより、関数 func 内でアクセスします。 ＃＃＃例＃＃＃ この例では、グローバルスコープを持つグローバル変数を定義します。

func()

という関数内でアクセスし、関数から値を返します。

出力では、func() 関数がグローバル変数の値である 20 を返していることがわかります。 リーリー ローカル/関数スコープ

ローカルスコープは関数スコープとも呼ばれます。関数内で定義された変数には関数スコープ/ローカルスコープがあります。関数の外で変数にアクセスすることはできません。

＃＃＃文法＃＃＃

以下の構文に従って、変数と関数のローカルスコープを理解できます -

リーリー

ここ

local_var

func()

関数の内部には関数スコープがあるため、その外部からはアクセスできません。

＃＃＃例＃＃＃

この例では、 func() 関数を作成します。 func() 関数内で、ローカルスコープで local_var 変数を定義しました。これは、func() 関数内でのみアクセスできることを意味します。 func() 関数の外側で local_var にアクセスしようとすると、

local_var

が未定義であるためエラーがスローされることがわかります。このエラーを確認するには、コンソールを開く必要があります。

リーリー

ブロック範囲 JavaScript では、2 つの中括弧 ({ ….. }) を使用して block を定義できます。ブロックスコープとは、特定のブロック内で定義した変数は、ブロック内でのみアクセスでき、ブロック外ではアクセスできないことを意味します。 let

および

const

キーワードを使用して宣言された変数にはブロックスコープがあります。

＃＃＃文法＃＃＃ユーザーは次の構文に従って変数のブロックスコープを理解できます。 リーリー ここでは、特定のブロック内で定義しているため、中括弧の外側の block_var にはアクセスできません。

注

-

var

キーワードを使用して宣言された変数にはブロックスコープがありません。 ＃＃＃例＃＃＃ この例では、中括弧を使用してブロックを定義し、変数

num

を定義します。ブロックの内外でこの変数にアクセスしようとします。中括弧の外側の num はブロック内で定義しているため、アクセスできないことがわかります。リーリー 語彙範囲 字句スコープは静的スコープと同じです。 JavaScript では、入れ子関数を実行し、入れ子関数内の変数にアクセスしようとすると、まずローカルコンテキストで変数が検索されます。入れ子になった関数のローカルコンテキストで変数が見つからない場合は、関数の実行の親コンテキストで変数を見つけようとします。最後に、変数がグローバルコンテキストで見つからない場合、その変数は未定義とみなされます。

＃＃＃文法＃＃＃

ユーザーは次の構文に従って字句範囲を理解できます。

リーリー

上記の構文では、関数実行のスコープからparent_varにアクセスします。関数 log() はローカルスコープではparent_var を見つけられないため、関数が呼び出されるスコープ (つまり、グローバルスコープ) でそれを見つけようとします。 ＃＃＃例＃＃＃ この例では、内部に test() 関数とnested() 関数を定義します。さらに、nested() 関数内で global_var とparent_var にアクセスしています。 JavaScript はローカルコンテキストでこれら 2 つの変数を見つけられないため、最初にnested() 関数の実行コンテキストで検索し、次に test() 関数の実行コンテキストで検索します。

リーリー

スコープチェーン

用語が示すように、これはスコープチェーンです。たとえば、関数内に入れ子関数を定義するとします。この場合、ローカルスコープを持つことができ、ネストされた関数内で宣言された変数には、外側の関数ではアクセスできません。

したがって、スコープチェーンを作成しているため、これをスコープチェーンと呼びます。 ＃＃＃文法＃＃＃ ユーザーは次の構文に従ってスコープチェーンを理解できます。

リーリー＃＃＃例＃＃＃

この例では、inner() 関数は、outer() 関数のスコープ内にあります。つまり、outer() 関数の外で inner() 関数を呼び出すことはできません。 inner() 関数は、outer() 関数内にスコープチェーンを作成します。

<html>
   <body>
      <h2>Scope Chain in JavaScript </i></h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
         function outer() {
            var emp_name = "Shubham!";
            function inner() {
               var age = 22;
               output.innerHTML += ("The value of the emp_name is " + emp_name) +"<br/>";
               output.innerHTML += "The value of the age is " + age;
            }
            inner();
            
            // age can't be accessible here as it is the local scope of inner
         }
         outer();
      </script>
   </body>
</html>

ログイン後にコピー

在本教程中，我们讨论了 JavaScript 中的作用域和作用域链。我们讨论了全局、局部/函数、块和词法作用域。在上一节中，我们了解了作用域链在 Javascript 中的工作原理。

以上がJavaScript のスコープとスコープチェーンの説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。