実行コンテキストとは

コードを実行する際の文脈・状況
→コードがどのような状況で実行されているのかということ

ブラウザ上でコードを実行した場合にはwindowオブジェクトとthisがJavaScriptエンジンによって準備されます。
コードが実行されている状態によってコンテキストが変わってくるので、これらを含めたものを実行コンテキストと表現します。

実行コンテキストの種類

実行コンテキストには以下の３つ種類があります。

グローバルコンテキスト
関数コンテキスト
evalコンテキスト

なお、evalコンテキストについては、evalという関数自体が非推奨であるため、本記事では扱いません。

基本的にはこの３つのコンテキストが存在します。

グローバルコンテキスト

グローバルコンテキスト内でコードを実行しているときには以下の３つが使えます。

実行中のコンテキスト内の変数と関数
グローバルオブジェクト
this

実際のコードで確認してみます。

index.html

<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

上記はindex.html内でmain.jsを読み込んでいます。
このmain.jsの直下に書かれたコードが実行される環境がグローバルコンテキストになります。

そして、main.jsの直下に書かれた変数と関数のことを、グローバルコンテキスト内の変数と関数と呼びます。

main.js

const a = 'グローバルコンテキスト内の変数';

function b() {
 console.log('グローバルコンテキスト内の関数')
};

関数コンテキスト

関数が実行されているときに生み出されるコンテキストのこと

関数コンテキスト内でコードを実行しているときには以下の5つが使えます。

実行中のコンテキスト内の変数と関数
arguments
super
this
外部変数

const a = '外部変数';

function b() {
 console.log(this, arguments, a);

 const c = '関数コンテキスト内の変数';

 function d() {
  console.log('関数コンテキスト内の関数');
 }
};

funciton b()の{　}の中が、関数コンテキストです。
※superは少し特殊で、この場合は使えません。

外部変数とは、関数の外で宣言された変数のことを指します。

まとめ

グローバルコンテキスト：JavaScriptファイル内直下の実行環境
関数コンテキスト：関数の宣言の{ }で囲われている時のコードの実行環境

参考資料