JavaScript：コールスタックとそのサイズの魔法

こんにちは、Khabrovites！

問題を解決するために再帰を使用したほとんどの開発者は、このエラーを見てきました。

 RangeError: Maximum call stack size exceeded. 
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

しかし、すべての開発者が「コールスタックサイズ」の意味とこのサイズについて考えたわけではありませんか？そしてそれを測定する方法は？

メモリを直接操作する言語を使用する人はこの質問に簡単に答えることができると思いますが、一般的なフロントエンド開発者はおそらく初めてそのような質問をします。さて、それを理解してみましょう！

多くの人は、ブラウザが呼び出しの数を正確に制限していると信じていますが、そうではありません。この記事では、実際にどのように機能するかを簡単な例で示します。

何を言ってるんだ、作者？

この記事では、実行スタック、実行コンテキストなどの概念を理解することが重要です。それが何であるかわからない場合は、それについて読むことをお勧めします。このリソースには、このトピックに関する十分な記事がすでにあります。例 -https：//habr.com/ru/company/ruvds/blog/422089/

このエラーはいつ発生しますか？

簡単な例を見てみましょう-再帰的に自分自身を呼び出す関数。

const func = () => {
    func();
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

このような関数を呼び出そうとすると、前述のコンソール/ターミナルにエラーが表示されます。

しかし、エラーが発生する前に関数が実行された回数を見るとどうなるでしょうか。

Chrome DevTools 2021. . .

:

let i = 0;

const func = () => {
  i++;

  func();
};

try {
  func();
} catch (e) {
  //          
  console.log(i);
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

13914. , , , 14 .

, . , :

let i = 0;

const func = () => {
  let someVariable = i + 1;
  i++;

  func();
};

try {
  func();
} catch (e) {
  console.log(i);
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , someVariable



  . , , . 12523 . , . , , , .

? ? , , ?!

- . . , , - . -, , , ? , ? : 

let i = 0;

const func = () => {
  let a = i + 1;
  let b = a + 1;
  let c = b + 1;
  let d = c + 1;
  let e = d + 1;
  i++;

  func();
};

try {
  func();
} catch (e) {
  console.log(i);
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, . , - 8945. , . , . , .

Execution Stack (Call Stack) - . . , . , , . . , , .

. -   . - , . Call Stack (Execution Stack), , Execution Context - ( this). , , "" , , . Execution Context, , . "" , .

. , ? , , Chrome?

-

, , (, ). Execution Stack, . N, K. X.

- , ( ) :

SizeOfVar - , .

, , , :

, , , .

- . , .

. - N SizeOfVar. N - , SizeOfVar? , , , "number", , , .

- " JavaScript 64- . 8 , 64/8 = 8 ." - . 8 . , N.

:

N, : N 72. 72 .

, N = 72 , , Chrome ... 1002128 . . , .

- , , ? , , 7 'number'. 

: , (72 + 7 * 8) , 128. 1002128 128 ... 7829! , 7829 !  ...

. 3. , . , , , - . - .



, , ExecutionStack Chrome 72 , - .



!

. .  . 45606 . 39905 . NodeJS Chrome . JavaScript. 

?

, Object? 

let i = 0;

const func = () => {
  const a = {
    key: i + 1,
  };
  i++;

  func();
};

try {
  func();
} catch (e) {
  console.log(i);
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. 12516. , . JS' - . , .

? ? *?

, . , . , , . , .

:

• .

  
  
  
  
  

• .

  
  
  
  
  

• "" , .

  
  
  
  
  

• .

  
  
  
  
  

: "number" , , ?