TLDR
JavaScriptには字句（静的とも呼ばれます）のスコープとクロージャーがあります。これは、ソースコードを見ることで識別子のスコープを知ることができることを意味します。
4つのスコープは次のとおりです。
- グローバル-すべてから見える
- 関数-関数（およびそのサブ関数とブロック）内で可視
- ブロック-ブロック（およびそのサブブロック）内に表示されます
- モジュール-モジュール内で表示
グローバルスコープとモジュールスコープの特別な場合を除いて、変数はvar（関数スコープ）、let（ブロックスコープ）、const（ブロックスコープ）を使用して宣言されます。他のほとんどの形式の識別子宣言は、strictモードでブロックスコープを持っています。
概観
スコープは、識別子が有効であるコードベースの領域です。
字句環境は、識別子名とそれに関連付けられた値の間のマッピングです。
スコープは、リンクされた字句環境のネストから形成され、ネストの各レベルは、祖先実行コンテキストの字句環境に対応しています。
これらのリンクされた字句環境は、スコープ「チェーン」を形成します。識別子の解決は、一致する識別子をこのチェーンに沿って検索するプロセスです。
識別子の解決は、一方向にのみ行われます。つまり、外側です。このようにして、外部の字句環境は内部の字句環境を「見る」ことができません。
JavaScriptで識別子のスコープを決定するには、3つの適切な要素があります。
- 識別子の宣言方法
- 識別子が宣言された場所
- あなたはしているかどうかをstrictモードまたは非strictモード
識別子を宣言する方法のいくつか：
var、letおよびconst- 関数パラメーター
- Catchブロックのパラメーター
- 関数宣言
- 名前付き関数式
- グローバルオブジェクトの暗黙的に定義されたプロパティ（つまり
var、非厳密モードでは欠落）
import ステートメントeval
一部の場所識別子は宣言できます。
- グローバルコンテキスト
- 関数本体
- 通常のブロック
- 制御構造の上部（ループ、if、whileなど）
- 制御構造体
- モジュール
宣言スタイル
var
を使用しvar て宣言された識別子は、グローバルコンテキストで直接宣言されている場合を除いて、関数スコープを持っています。この場合、グローバルオブジェクトのプロパティとして追加され、グローバルスコープがあります。での使用には別のルールがありますeval関数でのます。
レットアンドコンスト
を使用letして宣言され、ブロックスコープを持つ識別子const グローバルコンテキストで直接宣言されている場合を除い。この場合、グローバルスコープがあります。
注：let、constおよびvar すべての掲揚されています。これは、それらの定義の論理的な位置が、それらを包含するスコープ（ブロックまたは関数）の最上位であることを意味します。ただし、変数はuseing宣言let及びconst読み出しまたは制御は、ソースコード内の宣言のポイントを通過するまでに割り当てることはできません。暫定期間は、一時的な不感帯として知られています。
function f() {
function g() {
console.log(x)
}
let x = 1
g()
}
f() // 1 because x is hoisted even though declared with `let`!
関数パラメーター名
関数パラメーター名のスコープは関数本体です。これには少し複雑なことに注意してください。デフォルトの引数として宣言された関数は、パラメーターリストを閉じますた関数は、関数の本体ではなく、ます。
関数宣言
関数宣言には、strictモードではブロックスコープ、non-strictモードでは関数スコープがあります。注：非厳格モードは、さまざまなブラウザーの風変わりな履歴実装に基づく複雑な緊急ルールのセットです。
名前付き関数式
名前付き関数式は、それ自体にスコープが設定されます（たとえば、再帰の目的で）。
グローバルオブジェクトの暗黙的に定義されたプロパティ
非厳密モードでは、グローバルオブジェクトがスコープチェーンの最上位にあるため、グローバルオブジェクトの暗黙的に定義されたプロパティにはグローバルスコープがあります。厳密モードでは、これらは許可されません。
評価
ではeval、文字列、使用して宣言された変数は、var現在のスコープに配置された、または、もしされますevalグローバルオブジェクトのプロパティとして、間接的に使用されます。
例
以下は、名前ためにReferenceErrorがスローされますx、yおよびz機能のは意味の外側を持っていませんf。
function f() {
var x = 1
let y = 1
const z = 1
}
console.log(typeof x) // undefined (because var has function scope!)
console.log(typeof y) // undefined (because the body of the function is a block)
console.log(typeof z) // undefined (because the body of the function is a block)
次のコードはyand zに対してReferenceErrorをスローしますが、に対しては表示されません。これはx、の可視性がxブロックによって制約されていないためです。制御構造のボディを定義するブロックが好きif、forそしてwhile、同様に振る舞います。
{
var x = 1
let y = 1
const z = 1
}
console.log(x) // 1
console.log(typeof y) // undefined because `y` has block scope
console.log(typeof z) // undefined because `z` has block scope
以下でxは、var関数のスコープがあるため、ループの外側に表示されます。
for(var x = 0; x < 5; ++x) {}
console.log(x) // 5 (note this is outside the loop!)
...この動作のためvar、ループで使用して宣言された変数を閉じる場合は注意が必要です。変数のインスタンスは1つだけですx宣言されており、論理的にループの外側に配置されています。
次の例では5、5回印刷5しconsole.log、ループの外側で6回印刷します。
for(var x = 0; x < 5; ++x) {
setTimeout(() => console.log(x)) // closes over the `x` which is logically positioned at the top of the enclosing scope, above the loop
}
console.log(x) // note: visible outside the loop
ブロックスコープであるundefinedため、次のように出力されxます。コールバックは非同期で1つずつ実行されます。以下のための新しい行動letの各無名関数は、名前の異なる変数の上に閉じていることを変数手段x（それはで行われているだろうとは異なりvar）、および整数そう0を通じて4印刷されて：
for(let x = 0; x < 5; ++x) {
setTimeout(() => console.log(x)) // `let` declarations are re-declared on a per-iteration basis, so the closures capture different variables
}
console.log(typeof x) // undefined
以下はReferenceErrorの可視性がxブロックによって制約されていないため、をスローしません。ただし、undefined変数が初期化されていないために出力されます（ifステートメントのため）。
if(false) {
var x = 1
}
console.log(x) // here, `x` has been declared, but not initialised
forを使用してループの先頭で宣言された変数は、ループletの本体をスコープとしています。
for(let x = 0; x < 10; ++x) {}
console.log(typeof x) // undefined, because `x` is block-scoped
のReferenceError可視性がxブロックによって制約されているため、次のコードはをスローします。
if(false) {
let x = 1
}
console.log(typeof x) // undefined, because `x` is block-scoped
を使用して宣言された変数var、letまたはconstすべてモジュールにスコープされた変数：
// module1.js
var x = 0
export function f() {}
//module2.js
import f from 'module1.js'
console.log(x) // throws ReferenceError
以下はvar、グローバルコンテキスト内で使用して宣言された変数がプロパティとしてグローバルオブジェクトに追加されるため、グローバルオブジェクトのプロパティを宣言します。
var x = 1
console.log(window.hasOwnProperty('x')) // true
letそしてconstグローバルな文脈でグローバルオブジェクトにプロパティを追加、まだグローバルスコープを持っていません。
let x = 1
console.log(window.hasOwnProperty('x')) // false
関数パラメーターは、関数本体で宣言されていると見なすことができます。
function f(x) {}
console.log(typeof x) // undefined, because `x` is scoped to the function
Catchブロックのパラメーターは、catch-block本文にスコープされます。
try {} catch(e) {}
console.log(typeof e) // undefined, because `e` is scoped to the catch block
名前付き関数式のスコープは式自体に限定されます。
(function foo() { console.log(foo) })()
console.log(typeof foo) // undefined, because `foo` is scoped to its own expression
非厳密モードでは、グローバルオブジェクトの暗黙的に定義されたプロパティはグローバルにスコープされます。厳密モードでは、エラーが発生します。
x = 1 // implicitly defined property on the global object (no "var"!)
console.log(x) // 1
console.log(window.hasOwnProperty('x')) // true
非厳密モードでは、関数宣言には関数スコープがあります。厳密モードでは、ブロックスコープがあります。
'use strict'
{
function foo() {}
}
console.log(typeof foo) // undefined, because `foo` is block-scoped
内部での仕組み
スコープは、識別子が有効であるコードの字句領域として定義されます。
JavaScriptでは、すべての関数オブジェクトに、実行コンテキストの字句環境[[Environment]]への参照である隠し参照があります。それが作成され（スタックフレーム）ます。
関数を呼び出すと、隠し[[Call]]メソッドが呼び出されます。このメソッドは、新しい実行コンテキストを作成し、新しい実行コンテキストと関数オブジェクトの字句環境の間のリンクを確立します。これは[[Environment]]、関数オブジェクトの値を、新しい実行コンテキストの字句環境の外部参照フィールドにコピーすることによって行われます。
新しい実行コンテキストと関数オブジェクトの字句環境の間のこのリンクは、クロージャと呼ばれることに注意してください。
したがって、JavaScriptでは、スコープは外部参照によって「チェーン」でリンクされた字句環境を介して実装されます。この字句環境のチェーンはスコープチェーンと呼ばれ、識別子の解決はチェーンを検索することで行われます、一致する識別子のをます。
見つけるより。
