目次
JavaScriptコード実行前に準備するもの
- グローバルオブジェクト（ブラウザ上ではWindowオブジェクトでWeb APIsが含まれる）
- this
JavaScriptエンジンの中で上記二つが準備される
Windowオブジェクト
イメージ：ブラウザがもってる個々のコードを実行しているタブ
タブ全体のウインドウを指すこともあったりとその都度調べながら使っていくのが吉
量多すぎ、、、
this
thisは別途記事にします。
コンテキスト
辞書的な意味は
文章などの前後の脈絡。文脈。コンテクスト
JS的には実行コンテキストのこと
コードを実行する際の文脈・状況
コンテキストの種類
- グローバルコンテキスト
- 関数コンテキスト
- evalコンテキスト（非推奨）
グローバルコンテキスト
- 実行中のコンテキスト内の変数・関数
- グローバルオブジェクト
- this
がグローバルコンテキスト内では使用可能
例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="main.js"> </script> </head> <body> </body> </html> |
main.jsの直下（ファイル内のコード）が実行コンテキスト
関数コンテキスト
- 実行中のコンテキスト内の変数・関数
- arguments
- super（特殊な環境でのみ使用可能）
- this
- 外部変数
例
|
1 2 3 4 5 6 7 |
let a = 0; function b() { console.log(arguments, this, a); } b(); |
function b()が呼ばれるbの中の事
外部変数はa
まとめ
- グローバルコンテキスト：JSファイル全体
- 関数コンテキスト：関数（function）の{}内のこと
コールスタック
実行中のコードがたどってきたコンテキストの積み重ね
|
1 2 3 4 5 6 7 8 |
function a() {} function b() { a(); } function c() { b(); } c(); |
コールスタックに積まれる順番
１：グローバルコンテキスト
２：c
３：b
４：a
常に一番上に積まれているもの（ここではa）が実行コンテキスト
コールスタックから消滅する順番
4⇒3⇒2⇒1
LIFO（後入れ先出し Last In First Out）
コールスタックの確認方法
開発者ツールのSources
ホイスティング
コンテキスト内で宣言した変数や関数の定義をコード実行前にメモリーに配置すること（宣言の巻き上げ）
例：var aなどで宣言した変数には最初undefind（未定義）が設定される（メモリ領域を確保）
初期値が設定されるのはvarのみ
let constは初期値は設定されない
コメント