2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

JavaScriptのコールスタックを理解する

Last updated at Posted at 2021-11-14

JavaScriptエンジンはコールスタックという仕組みを通して、JavaScriptがどのように実行されたか追跡しています。

コールスタックとは

実行中のコードが辿ってきたコンテキストの積み重ねのこと

言い換えると、JavaScriptエンジンがどのような経路を辿ってコードに辿り着いたのか記録しているものです。

コード例

function a() {}
function b() {
  a();
}
function c() {
  b();
}
c();

上記コードは、まず関数c( )が実行されて、その中で関数b( )が実行されます。さらに関数b( )の中で関数a( )が実行されます。

この時、生成されるコンテキストの順番は以下のようになります。

1. グローバルコンテキストが生成される。
2. cの関数がよばれる際に、cのコンテキストが生成される。
3. cの関数の中でbの関数がよばれ、bのコンテキストが生成される。
4. bの関数の中でaの関数がよばれ、aのコンテキストが生成される。

このようなコンテキストの積み重ねのことをコールスタックと呼びます。

コールスタックの特徴

コールスタックの特徴として、**LIFO(Last In, First Out)があります。
LIFOとは
「後入れ先出し」**のことで、後から入ったコンテキストが先に実行されて消滅します。

コンテキストを積む順番

グローバルコンテキスト ⇨ cのコンテキスト ⇨ bのコンテキスト ⇨ aのコンテキスト

実行する順番:

aのコンテキスト ⇨ bのコンテキスト ⇨ cのコンテキスト ⇨ グローバルコンテキスト

まとめ

JavaScriptエンジンはコールスタックという仕組みを通して、JavaScriptがどのように実行されたか追跡しています。

コンテキストが積まれた際、最初に実行されるのはaのコンテキストであり、常にコールスタックの一番上に積まれているコンテキストが実行中のコンテキストになります。

そして、aの処理が終わるとaのコンテキストが消滅し、bの関数へと移ります。そして、bの処理が終わるとbのコンテキストが消滅し、cの関数へと移ります。

最終的にグローバルの処理が全て完了した時点でグローバルコンテキストが消滅します。

参考資料

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?