일러스트레이션을 통한 JavaScript 호출 스택 이해

Feb 03 2023
Javascript의 함수는 어떻게 실행됩니까? 실행 순서는 무엇입니까? 실행 컨텍스트란 무엇입니까?
가장 간단한 단어로 호출 스택은 함수의 실행 순서를 제어하는 ​​스택입니다. 그게 다야.
freepik에서 Racool_studio 작성

가장 간단한 단어로 호출 스택은 함수의 실행 순서를 제어하는 ​​스택입니다. 그게 다야. 어떤 기능이 언제 실행될 것인지를 제어하는 ​​메커니즘입니다.

스택은 LIFO(후입선출) 형식의 데이터 구조입니다. 즉, 호출 스택에 마지막으로 입력된 함수가 가장 먼저 실행됩니다.
함수는 호출 스택 내부에 어떻게 들어가나요?

코드가 평가될 때 각 함수 실행은 호출 스택에 들어갑니다. 또 다른 흥미로운 질문(더욱 흥미로운)은 언제 함수가 호출 스택에서 빠져나오는가입니다. 이는 그것에 의해 트리거된 모든 함수 실행(있는 경우)이 완료되고 그 안에 있는 모든 코드 줄이 평가된 후에만 발생합니다.

사소한 경우

이 경우 내부의 코드 줄이 모두 실행되면 각 함수가 완료되는 것을 볼 수 있습니다.

작성자 이미지

더 흥미로운 사례

이 경우 다른 함수 내부에서 함수를 호출하게 됩니다.

이 경우 호출 스택에 표시되는 내용은 다음과 같습니다.

작성자 이미지

이 예에서는 '스택'이라는 용어를 더 잘 이해할 수 있습니다. 다른 함수 내부의 함수 호출 덕분에 우리는 그 '상자'가 어떻게 다른 하나의 위에 쌓이고 '상자'의 스택을 생성하는지 볼 수 있습니다.
각 상자는 그 안에 있는 코드를 실행합니다. 함수 호출이 있는 경우 내부에 새 '상자'가 생성됩니다. console.log와 같은 간단한 명령이 있으면 간단히 실행됩니다. 모든 코드 실행이 완료되면 '상자'가 스택을 떠납니다.

그 '상자'는 무엇입니까?

물어봐줘서 기뻐. 이러한 상자는 함수의 실행 컨텍스트입니다. 함수 호출이 발생할 때마다 새 함수 실행 컨텍스트가 생성됩니다. 실행 컨텍스트는 함수 내부에서 생성되거나 전달된 모든 멤버 및 선언을 보유하는 역할을 합니다.

이에 대한 예가 위의 애니메이션에 나와 있습니다. 함수는 callingToWitness매개변수를 가져옵니다. witnessNumber이 매개변수는 실행 컨텍스트에 보관됩니다. 이 함수가 여러 번 실행되는 것을 볼 수 있지만 컨텍스트는 매번 다릅니다.

이러한 실행 컨텍스트가 필요한 이유는 무엇입니까?

실행 컨텍스트에서 선언되지 않은 멤버를 인쇄하려고 하면 어떻게 될까요? 보자:

작성자 이미지

따라서 첫 번째 실행 컨텍스트는 일반 실행 컨텍스트이며 선언된 함수 외부에 있는 모든 코드를 보유합니다. 그 안에는 각 함수 실행에 대한 실행 컨텍스트가 표시됩니다.
위의 예에서 우리는 callWitness 함수가 실행되는 동안 실행 컨텍스트에 JudgeName 또는 proceduresName 이라는 멤버가 포함되지 않았지만 상위 실행 컨텍스트 중 하나에 해당 멤버가 있음을 알 수 있습니다. callWitness
함수 실행을 더 잘 이해해 보겠습니다 .

  1. 인쇄 whoAmI : 이 매개변수는 함수의 실행 범위와 각 조상의 실행 컨텍스트에서 선언됩니다. 함수 실행 컨텍스트에서 읽습니다. 우리는 항상 멤버가 선언된 가장 가까운 실행 컨텍스트를 찾을 것입니다. 이 경우 분명히 현재 함수의 실행 컨텍스트입니다.
  2. ProtectiveName 인쇄 : 이 매개변수는 함수 자체에서 선언되지 않았습니다. 기소 기능 에서 선언된 것을 볼 수 있습니다 . 이것은 우리 기능을 실행한 실행 컨텍스트이므로 우리 기능은 멤버를 읽을 수 있습니다.
  3. 인쇄 JudgeName : 이 매개 변수도 함수 자체에서 선언되지 않았습니다. 함수의 조상 중 하나인 일반 실행 컨텍스트에서 선언되었으므로 멤버를 읽을 수 있습니다.
Unsplash에 Didssph의 사진

제공된 예제가 호출 스택, 실행 순서 및 현재 실행되는 코드에 사용할 수 있는 매개 변수를 더 잘 이해하는 데 도움이 되었기를 바랍니다. 이제 실행 컨텍스트와 코드가 실행되는 순서를 이해하기 위한 강력한 기반이 생겼습니다.