機能と可変環境はJavaScriptでどのように働きますか?👀

私は、あなたが前に機能を持っていたということを知っています。しかし、あなたは本当に機能がどのように機能の背後にJavascriptで動作しますか？

JavaScriptはどのように機能と変数環境を扱いますか？

一緒にそれを見つけましょう.
以下に私たちは非常に小さなシンプルなプログラムがあります.はい、これは読書にわずか数分であなたの心を吹くつもりです.

var x = 1;
a();
console.log(x);

function a() {
  var x = 10;
  console.log(x);
}

開発者コンソールを開き、キーボードショートカットCtrl - Shift J(Windowsで)またはCtrlオプションJを使用します.コンソールタブでは、JavaScriptが上記のプログラムを実行すると、これを見ることができます.

今まで、あなたがしたすべては、あなたがすでに知っていたものでありえました.しかし、本当の楽しみは、現在始まっています.
1行目にデバッガを置きましょう.

ここでJavaScriptはプログラムのグローバル実行コンテキストを作成します.これは、コールスタックにプッシュされ、コントロールは1行目です.
おお、待てグローバル実行コンテキストとは何か?次に読んでください.
グローバル実行コンテキストには2つのコンポーネントがあります.
1 -変数環境相もメモリフェーズと呼ばれます.
2 -コード実行段階.
変数環境変数では、JavaScriptは変数と関数にメモリを割り当てます.変数のために、それはキーワード'未定義'を割り当てます、そして、機能のために、それはその機能体自体をメモリとして割り当てます.
また、コード実行フェーズでは、JavaScriptはプログラム行を順番に実行します.
これがクリアされました.…を読む.
私たちのプログラムでは、制御は1行目です.JavaScriptは' x 'と' a 'に割り当てられ、関数本体を割り当てられています.
デバッガを2行目にし、デバッガの再生ボタンをクリックします.

その行1が実行されたので、JavaScriptは値1を変数xに割り当てました.
デバッガを6行目にし、デバッガの再生ボタンをクリックしましょう.

ここでJavaScriptは関数a ()の新しい実行コンテキストを作成しました.これは呼び出しスタックにプッシュされます.そして、a ()に制御を行います.これはここで終わりません.JavaScriptはまた、関数a ()に対して新しいローカルメモリとグローバルメモリを作成しました.
メモリ・フェーズに関しては、JavaScriptはキーワード'未定義'を関数a ()のローカルメモリに存在する変数に割り当てた.
デバッガを7行目にし、デバッガの再生ボタンをクリックします.
JavaScriptはローカルメモリ内の変数Xを探し、変数xに値' 10 'を割り当てます.

デバッガを3行目にし、デバッガの再生ボタンをクリックしましょう.

呼び出しスタックでは、関数Aの実行コンテキストがポップされ、現在の3行目がグローバル実行コンテキストに戻ることに注意してください.
今すぐコンソールタブを開くと、下の行が表示されます.

今度はデバッガ再生ボタンをクリックします.

JavaScriptは残りのプログラムを実行しました.グローバルメモリ内の変数xを探し、変数xに値' 1 'を割り当てます.そして今、グローバル実行コンテキストがスタックからポップされた.コールスタックが空です.
コンソールのタブに頭をつけ、下の行が表示されます.

このように、機能と可変環境はJavaScriptで一緒に働きます.
あなたは、吹き飛ばされませんでしたか?
ハハ!私は、これが全く驚くべきものであるということを知っています.
あなたがこれまでにそれを作ったならば、あなたはちょうど学びました

コンソールでデバッガを使用する方法.

JavaScriptが機能と変数で動作する方法
環境.

コールスタックの仕組み.

機能呼び出しが舞台裏で行われる方法.

あなたがこのブログから何かを学んだならば、あなたがブログについて感じたものについてのようにコメントして、コメントしてください.