JavaScript: Aufrufstapel und die Magie seiner Größe

Hallo Chabrowiten!

Die meisten Entwickler, die Rekursion verwendet haben, um ihre Probleme zu lösen, haben diesen Fehler gesehen:

 RangeError: Maximum call stack size exceeded. 
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Aber nicht jeder Entwickler hat darüber nachgedacht, was "Call Stack Size" bedeutet und wie groß diese Größe ist. Und wie misst man es?

Ich denke, diejenigen, die mit Sprachen arbeiten, die direkt mit dem Speicher arbeiten, können diese Frage leicht beantworten, aber ein typischer Front-End-Entwickler stellt sich höchstwahrscheinlich zum ersten Mal solche Fragen. Nun, versuchen wir es herauszufinden!

Viele Leute glauben, dass der Browser uns genau in der Anzahl der Anrufe begrenzt, aber das ist nicht der Fall. In diesem Artikel zeige ich Ihnen anhand einfacher Beispiele, wie es tatsächlich funktioniert.

Worüber sprichst du, Autor?

Für den Artikel ist es wichtig, Konzepte wie Execution Stack, Execution Context zu verstehen. Wenn Sie nicht wissen, was es ist, dann rate ich Ihnen, darüber zu lesen. Diese Ressource enthält bereits genügend gute Artikel zu diesem Thema. Beispiel -  https://habr.com/ru/company/ruvds/blog/422089/

Wann tritt dieser Fehler auf?

Nehmen wir ein einfaches Beispiel - eine Funktion, die sich rekursiv selbst aufruft.

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Wenn wir versuchen, eine solche Funktion aufzurufen, wird der oben erwähnte Fehler in der Konsole / im Terminal angezeigt.

Was aber, wenn Sie sich ansehen, wie oft die Funktion ausgeführt wurde, bevor der Fehler auftrat?

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" , , ?