[コアJavaScript]02実行コンテキスト

実行コンテキストとは?

コードを実行する環境情報を含むオブジェクト.

JavaScriptには、次のものが含まれます。

実行コンテキストがアクティブなときに宣言された変数を上に引く(起動する)

.

外部環境情報および

この値を設定するなどの操作を行うと、他の言語では発見できない特殊な現象が発生します.

スタックとキュー

スタック(stack):缶のようなデータ構造の入口が1つしかありません.最後に蓄積したデータは最初に取り出すことができる.
キュー(queue):入口の両側に開いていて、パイプのようなデータ構造です.データ蓄積の順に処理する.

同じ環境でコードを実行する場合、

必要な環境情報を収集し、コンテキストを整理する

をコールスタックに積み上げ、

は、最上位のコンテキストに関連するコードを実行することによって、コード全体の環境および順序を保証する.

グローバル空間、eval()関数、関数実行、ブロック(ES 6+)を含む実行コンテキストの方法を編成することができる.

JavaScriptコードを初めて実行すると、

グローバルコンテキストは、コールスタックに含まれる.(コード内部に個別の実行コマンドがなくても、最上位スペースはブラウザで自動的に実行されるので、JavaScriptファイルを開くとグローバルコンテキストがアクティブになることは理解できます.)

グローバルコンテキストに関連するコードを順番に行い、A関数を呼び出し、その関数の環境情報を収集し、実行コンテキストを生成し、callスタックに入れる.

コールスタックの上部にA関数実行コンテキストが配置されています.グローバルコンテキストに関連するコードの実行を一時停止し、A関数の実行コンテキストに関連するコードを順次実行します.

A関数の実行が終了すると、A関数の実行コンテキストは呼び出しスタックから削除され、その後、一時停止したグローバルコンテキストのコードが実行される.

グローバルコンテキストも、実行が完了するとcallスタックから削除され、callスタックは何も残っていない状態で終了します.

収集実行コンテキストについて

VariableEnvironment:現在のコンテキストの識別子+外部環境情報について.宣言すると、変更はLexicalEnvironmentのスナップショットに反映されません.

environmentRecord (snapshot)

outerEnvironmentReference (snapshot)

LexicalEnvironment:当初はVariableEnvironmentと同じでしたが、変更はリアルタイムで反映されます.

environmentRecord

outerEnvironmentReference

ThisBinding:この識別子によって表示されるターゲットオブジェクト.
環境レコードには、現在のコンテキストに関連するコードの識別子情報(パラメータ名、関数宣言、変数名など)が格納されます.コンテキスト全体で最初から最後までブラウズし、順番に収集します.
グローバル実行コンテキストは、JavaScriptによって駆動される環境によって個別に提供されるオブジェクトグローバルオブジェクトを使用し、変数オブジェクトを作成するのではありません.
「前述したように、JavaScriptエンジンは、コードが実行される前に、この環境内のすべてのコード変数名を理解しています.」Javascriptエンジンが識別子を最上位レベルに引き上げ、実際のコードを実行すると考えても、解釈コードには問題はありません.ここからハウスティンという概念が考えられます.

がんばって

ハウステンは変数情報を収集する過程の仮想概念の代わりにより理解しやすい方法である.
私はコードでハウスティンを表現して、あなたをもっと理解しやすくします.このコードは、実際のエンジンがこのような変換プロセスを経たのではなく、理解しやすいようにしています.

function a () {
  console.log(b);
  
  var b = 'bbb';
  console.log(b);
  
  function b () { }
  console.log(b);
}
a();

上記のコードのみで説明すると、コンソールに1が表示されます.「エラーor未定義2.」bbb' 3. b関数は予想される出力になる.でも間違っています.選ばれるから

a関数を実行すると、a関数の実行コンテキストが生成されます.変数名と関数宣言の情報が上に移動します.(ハウステンボス)

変数は、宣言子と付与子を分離し、宣言子のみを昇格させ、関数宣言は関数全体を昇格させる.

説明に従ってコードを再表現します.

function a () {
  var b; // 수집 대상 1. 변수는 선언부만 끌어올린다.
  function b () { } // 수집 대상 2. 함수 선언은 전체를 끌어올린다.
  
  console.log(b);
  b = 'bbb';
  console.log(b);
  console.log(b);
}
a();

ここで,エスケープ終了時の関数宣言は,関数名として宣言された変数に関数が割り当てられていると考えられる.
次のコードで簡単に理解してください.

function a () {
  var b; 
  var b = function b () { } // 함수명으로 선언한 변수에 함수를 할당.
  
  console.log(b);
  b = 'bbb';
  console.log(b);
  console.log(b);
}
a();

上の予想の答えは1です.「エラーor未定義2.」bbb' 3. b関数ですが、実際には1です.b関数2.'bbb' 3. '「bbb」の動作が表示されます.

関数宣言文と関数式

関数宣言
1.関数定義子のみが存在し、個別の割当てコマンドは存在しない
2.関数名を定義する必要があります.
3.みんなを応援します.
関数式
1.定義された関数を個別の変数に割り当てます.
2.関数名があってもよいし、なくてもよい.
(定義された関数名:名前付き関数式、未定義:匿名関数式)
3.変数は宣言子のみを昇格させ、分配子は元の位置に保持します.
4.記名関数式は外部から関数名として呼び出すことができず、関数名は関数内部からのみアクセスできます.

// 함수를 정의하는 세 가지 방식
function a () { ... } // 함수 선언문. 함수명 a가 곧 변수명.
a(); // 실행 ok.

var b = function () { ... } // 익명 함수 표현식. 변수명 b가 곧 함수명.
b(); // 실행 ok.
                     
var c = function d() { ... }
c(); // 실행 ok.
d(); // 에러!

環境レコードには、現在のコンテキストに関連するコードの識別子情報(パラメータ名、関数宣言、変数名など)が格納されます.もう一度説明を復習する.起動時に変数と関数宣言を上部にドラッグします.すなわち、関数宣言は全体的に明るくなり、関数式は変数宣言子のみが明るくなります.
関数宣言を使用してコードを記述する場合は、宣言の前に呼び出すことができますが、関数式は宣言の後に呼び出すことができます.
同じ変数名に異なる値を割り当てると、後で割り当てられた値は以前に割り当てられた値を上書きします.
同じ変数名で関数宣言文を使用してコードを記述すると、その後割り当てられた関数が上書きされて実行され、エラーが発生する可能性があります.

Takeaway

今日は実行コンテキストとブートを学びました.簡単ですが、紛らわしいところが多いようです.しかし,概念を理解すると,コードを見る視野が広くなったような気がする.
特に,関数宣言文と関数式では強い衝撃を受けた.この概念を知らずに今の業界に入って、好きなようにコードを書くとしたら?...あなたはきっと恐ろしい間違いを見たに違いない.
そのような間違いを経験する前に、これらの概念を身につけることができてよかったです.