実行コンテキスト②
コンテキストとは？
コードが実行する時の文脈・状況 どんな状況で実行されているのか。。。
コードが実行されている状態によってコンテキストが変わってくるので、実行コンテキストと表現されています。
実行コンテキストは3種類あります！
- グローバルコンテキスト
- 宣言された変数・関数(グローバルコンテキスト内で)
- グローバルオブジェクト
- this
関数コンテキスト
- 宣言された変数・関数(関数コンテキスト内で)
- arguments
- this
- super(特殊な環境でのみ使用可能)
- 外部変数
evalコンテキスト
※ evalコンテキストはeval関数が非推奨なのでvarと同じくもう使わない傾向にあるそうです(><)ﾉ
参照
ちょっとサンプルコード書いてみます(ﾉ><)ﾉ
ちょっとわかりにくかったらすみません( ;ω; )
上がエディタ上で書いたコードで、下が実際に実行したconsoleの結果です！
何もブロックされていないとこに書かれてるのがグローバルコンテキストで、宣言された関数の{}の中に書かれているのが関数コンテキストで、関数コンテキストから見て、let foo や const foobar は外部変数になります。
関数コンテキストの外で定義されていますが、関数bar内でも使用することができます(><)ﾉ
実行コンテキスト①
JavaScriptのコードが実行されるまで
JSのコードはJSエンジンで実行されます。 そして、コード実行前にはJSエンジンで予め準備されているものがあります。
JSエンジン
- コード
- グローバルオブジェクト
- this
グローバルオブジェクトはブラウザ上ではWindowオブジェクトになります！ そのWindowオブジェクトの中にWeb APIs が含まれています。
実際にブラウザ上で確認してみました(><)ﾉ
適当にindex.htmlファイルとmain.jsファイルを作成し、main.jsには何もコード書いていない状態でindex.htmlファイルを開き、検証ツールでconsoleを出して
consoleの中にwindowと入力すると、windowオブジェクトがたくさん出てきました！
この中にはWeb APIs(ブラウザを操作するもの)も含まれています。
↑
main.jsファイルには何もコードが書かれていないけど、デベロッパーツールのconsoleにwindowと打つとwindowオブジェクトが表示されています
次に、 thisも打ってみると、同じようにwindowオブジェクトが表示されました。
thisはオブジェクトへの参照を保持しているそうなのですが、コンテキストによって、取得できる値は変わってきます！
ここでの大切なポイントは、
- JS実行前にはグローバルオブジェクトとthisが準備される
- ブラウザのグローバルオブジェクトはWindowオブジェクトとなる
そして、グローバルオブジェクトは JSエンジンによって生成されるコード内のどこからでもアクセスできるオブジェクトのことです ！
大事なことなのでメモメモ(><)ﾉ
JavaScriptエンジン
ブラウザとJavaScriptの関係性について
ブラウザにはいろいろな機能があります！
- User Interface(UI)
- ブラウザエンジン
- データストレージ
- レンダリングエンジン
- ネットワーク
- UIバックエンド
- JavaScriptエンジン
色々ある中の一つとして、JavaScriptが実行される環境を'JavaScriptエンジン'と言います！
この機能の上でJavaScriptは動作しています。
JavaScriptエンジンはブラウザによって種類が変わったりしていますが一番シェアが多いのは'V8'と呼ばれるものです。
- Chrome -> V8
- Firefox -> SpiderMonkey
- Edge -> Chakra / V8
- Safari -> JavaScriptCore
- Opere -> V8
このJavaScriptエンジン上で、ECMAScript(JavaScript)とWeb APIs(DOM API, Fetch API etc...)が提供されています。
ゆるっとブログ書いてくぞい！
こんにちは！
Webデザイン・Webフロントエンド勉強中のめありです！
illustrator/Photoshop/JavaScript をメインに勉強してるので、備忘録的な感じでゆるっと学習記録つけていきます
ゆるくてもいいから続けられるように頑張るぞい(ﾉ><)ﾉ✨
