JavaScript のスコープとスコープ チェーンの説明
JavaScript では、Scope は、コードのどの部分で変数や関数にアクセスする方法とアクセスかを定義します。簡単に言えば、スコープはコードの安全性と可読性を向上させるのに役立ちます。したがって、変数と関数にはスコープ内でのみアクセスでき、スコープ外にはアクセスできません。
このチュートリアルでは、さまざまなタイプのスコープについて説明します。
JavaScript のグローバル スコープ
グローバルに定義された変数と関数は、 グローバル スコープを持つすべてのブロックと関数の外側にあることを意味します。コード内のどこからでも、グローバル スコープを持つすべての変数と関数にアクセスできます。
＃＃＃文法＃＃＃ユーザーは、次の構文に従ってグローバル スコープの変数を定義できます。
リーリーここでは、グローバル変数
globalが関数の外で宣言されているため、グローバル スコープを持ちます。次に、ローカル変数 b を宣言し、グローバル変数 global の値をそれに割り当てることにより、関数 func 内でアクセスします。 ＃＃＃例＃＃＃ この例では、グローバル スコープを持つグローバル変数を定義します。
func()という関数内でアクセスし、関数から値を返します。
出力では、func() 関数がグローバル変数の値である 20 を返していることがわかります。 リーリー ローカル/関数スコープ
ローカル スコープは関数スコープとも呼ばれます。関数内で定義された変数には関数スコープ/ローカルスコープがあります。関数の外で変数にアクセスすることはできません。
＃＃＃文法＃＃＃以下の構文に従って、変数と関数のローカル スコープを理解できます -
リーリーここ
local_varfunc()
関数の内部には関数スコープがあるため、その外部からはアクセスできません。
＃＃＃例＃＃＃この例では、 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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7343
9
1627
14
1352
46
1265
25
1210
29
JavaScriptの文字列文字を交換します
Mar 11, 2025 am 12:07 AM
JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi
カスタムGoogle検索APIセットアップチュートリアル
Mar 04, 2025 am 01:06 AM
このチュートリアルでは、カスタムGoogle検索APIをブログまたはWebサイトに統合する方法を示し、標準のWordPressテーマ検索関数よりも洗練された検索エクスペリエンスを提供します。 驚くほど簡単です！検索をyに制限することができます
独自のAjax Webアプリケーションを構築します
Mar 09, 2025 am 12:11 AM
それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました
例JSONファイルの例
Mar 03, 2025 am 12:35 AM
この記事シリーズは、2017年半ばに最新の情報と新鮮な例で書き直されました。 このJSONの例では、JSON形式を使用してファイルに単純な値を保存する方法について説明します。 キー価値ペア表記を使用して、あらゆる種類を保存できます
8見事なjQueryページレイアウトプラグイン
Mar 06, 2025 am 12:48 AM
楽なWebページレイアウトのためにjQueryを活用する：8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。 この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます
＆＃x27; this＆＃x27; JavaScriptで？
Mar 04, 2025 am 01:15 AM
コアポイント これは通常、メソッドを「所有」するオブジェクトを指しますが、関数がどのように呼び出されるかに依存します。 現在のオブジェクトがない場合、これはグローバルオブジェクトを指します。 Webブラウザでは、ウィンドウで表されます。 関数を呼び出すと、これはグローバルオブジェクトを維持しますが、オブジェクトコンストラクターまたはそのメソッドを呼び出すとき、これはオブジェクトのインスタンスを指します。 call（）、apply（）、bind（）などのメソッドを使用して、このコンテキストを変更できます。これらのメソッドは、与えられたこの値とパラメーターを使用して関数を呼び出します。 JavaScriptは優れたプログラミング言語です。数年前、この文はそうでした
ソースビューアーでjQueryの知識を向上させます
Mar 05, 2025 am 12:54 AM
jQueryは素晴らしいJavaScriptフレームワークです。ただし、他のライブラリと同様に、何が起こっているのかを発見するためにフードの下に入る必要がある場合があります。おそらく、バグをトレースしているか、jQueryが特定のUIをどのように達成するかに興味があるからです
モバイル開発用のモバイルチートシート10個
Mar 05, 2025 am 12:43 AM
この投稿は、Android、BlackBerry、およびiPhoneアプリ開発用の有用なチートシート、リファレンスガイド、クイックレシピ、コードスニペットをコンパイルします。 開発者がいないべきではありません！ タッチジェスチャーリファレンスガイド（PDF） Desigの貴重なリソース
