ホームページ > 記事 > ウェブフロントエンド > JavaScript のスコープとスコープ チェーンの説明
JavaScript のスコープとスコープ チェーンの説明
- PHPz転載
- 2023-09-07 09:25:02935ブラウズ
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 サイトの他の関連記事を参照してください。