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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

PHPz

Sep 07, 2023 am 09:25 AM

解释 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 id="Scope-Chain-in-JavaScript-i">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 サイトの他の関連記事を参照してください。

声明

この記事はtutorialspointで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript：ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

See all articles