SlideShare a Scribd company logo

Javascript Execution Context Flow

Download as PPTX, PDF
K
kang taehun

The document describes the execution context stack and how it manages execution contexts. It shows the global execution context and nested foo and bar execution contexts created by function calls. Each execution context contains a lexical environment, which maps identifiers to memory locations, and an environment record that holds variable bindings.

Engineering
1 of 18
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
window DOM Object XMLHttpRequest Web Storage Web Worker ...
실행 컨텍스트 스택 Global Execution Context
실행 컨텍스트 스택 Global Execution Context LexicalEnvironment Global Lexical Environment
실행 컨텍스트 스택 Global Execution Context LexicalEnvironment Global Lexical Environment GlobalEnvironmentRecord Object Environment Record BindingObject window x undefined foo <function object> ... ...
실행 컨텍스트 스택 Global Execution Context LexicalEnvironment Global Lexical Environment GlobalEnvironmentRecord Object Environment Record BindingObject window x undefined foo <function object> ... ... Declarative Environment Record y <uninitialized>
실행 컨텍스트 스택 Global Execution Context LexicalEnvironment Global Lexical Environment GlobalEnvironmentRecord Object Environment Record BindingObject window x undefined foo <function object> ... ... Declarative Environment Record y <uninitialized> [[GlobalThisValue]]
실행 컨텍스트 스택 Global Execution Context LexicalEnvironment Global Lexical Environment GlobalEnvironmentRecord OuterLexicalEnvironmentReference null Object Environment Record BindingObject window x undefined foo <function object> ... ... Declarative Environment Record y <uninitialized> [[GlobalThisValue]]
실행 컨텍스트 스택 Global Execution Context LexicalEnvironment Global Lexical Environment GlobalEnvironmentRecord OuterLexicalEnvironmentReference null Object Environment Record BindingObject window x 1 foo <function object> ... ... Declarative Environment Record y 2 [[GlobalThisValue]]
foo Execution Context LexicalEnvironment foo Lexical Environment
foo Execution Context LexicalEnvironment foo Lexical Environment FunctionEnvironmentRecord Function Environment Record a undefined arguments { 0: 20, length: 1, callee: foo} x undefined y <uninitialized> bar <function object> 매개변수 arguments 객체 함수 몸체에서 선언된 식별자
실행 컨텍스트 스택 Global Execution Context LexicalEnvironment Global Lexical Environment GlobalEnvironmentRecord OuterLexicalEnvironmentReference null Object Environment Record BindingObject window x 1 foo <function object> ... ... Declarative Environment Record y 2 [[GlobalThisValue]] foo Execution Context LexicalEnvironment foo Lexical Environment FunctionEnvironmentRecord Function Environment Record a undefined arguments { 0: 20, length: 1, callee: foo} x undefined y <uninitialized> bar <function object> [[ThisValue]]
실행 컨텍스트 스택 Global Execution Context LexicalEnvironment Global Lexical Environment GlobalEnvironmentRecord OuterLexicalEnvironmentReference null Object Environment Record BindingObject window x 1 foo <function object> ... ... Declarative Environment Record y 2 [[GlobalThisValue]] foo Execution Context LexicalEnvironment foo Lexical Environment FunctionEnvironmentRecord OuterLexicalEnvironmentReference Function Environment Record a undefined arguments { 0: 20, length: 1, callee: foo} x undefined y <uninitialized> bar <function object> [[ThisValue]]
실행 컨텍스트 스택 Global Execution Context LexicalEnvironment Global Lexical Environment GlobalEnvironmentRecord OuterLexicalEnvironmentReference null Object Environment Record BindingObject window x 1 foo <function object> ... ... Declarative Environment Record y 2 [[GlobalThisValue]] foo Execution Context LexicalEnvironment foo Lexical Environment FunctionEnvironmentRecord OuterLexicalEnvironmentReference Function Environment Record a 20 arguments { 0: 20, length: 1, callee: foo} x 3 y 4 bar <function object> [[ThisValue]]
실행 컨텍스트 스택 Global Execution Context LexicalEnvironment Global Lexical Environment GlobalEnvironmentRecord OuterLexicalEnvironmentReference null Object Environment Record BindingObject window x 1 foo <function object> ... ... Declarative Environment Record y 2 [[GlobalThisValue]] foo Execution Context LexicalEnvironment foo Lexical Environment FunctionEnvironmentRecord OuterLexicalEnvironmentReference Function Environment Record a 20 arguments { 0: 20, length: 1, callee: foo} x 3 y 4 bar <function object> [[ThisValue]] bar Execution Context LexicalEnvironment bar Lexical Environment FunctionEnvironmentRecord OuterLexicalEnvironmentReference Function Environment Record b undefined arguments { 0: 10, length: 1, callee: bar} z <uninitialized> [[ThisValue]]
실행 컨텍스트 스택 Global Execution Context LexicalEnvironment Global Lexical Environment GlobalEnvironmentRecord OuterLexicalEnvironmentReference null Object Environment Record BindingObject window x 1 foo <function object> ... ... Declarative Environment Record y 2 [[GlobalThisValue]] foo Execution Context LexicalEnvironment foo Lexical Environment FunctionEnvironmentRecord OuterLexicalEnvironmentReference Function Environment Record a 20 arguments { 0: 20, length: 1, callee: foo} x 3 y 4 bar <function object> [[ThisValue]] bar Execution Context LexicalEnvironment bar Lexical Environment FunctionEnvironmentRecord OuterLexicalEnvironmentReference Function Environment Record b 10 arguments { 0: 10, length: 1, callee: bar} z 5 [[ThisValue]]
실행 컨텍스트 스택 Global Execution Context LexicalEnvironment Global Lexical Environment GlobalEnvironmentRecord OuterLexicalEnvironmentReference null Object Environment Record BindingObject window x 1 foo <function object> ... ... Declarative Environment Record y 2 [[GlobalThisValue]] foo Execution Context LexicalEnvironment foo Lexical Environment FunctionEnvironmentRecord OuterLexicalEnvironmentReference [[ThisValue]] Function Environment Record a 20 arguments { 0: 20, length: 1, callee: foo} x 3 y 4 bar <function object>
실행 컨텍스트 스택 Global Execution Context LexicalEnvironment Global Lexical Environment GlobalEnvironmentRecord OuterLexicalEnvironmentReference null Object Environment Record BindingObject window x 1 foo <function object> ... ... Declarative Environment Record y 2 [[GlobalThisValue]]
실행 컨텍스트 스택

More Related Content

PDF
JavaScript Execution Context
Juan Medina
 
PPTX
JQuery selectors
chandrashekher786
 
PDF
JavaScript: Variables and Functions
Jussi Pohjolainen
 
PPTX
Java exception handling
BHUVIJAYAVELU
 
PDF
An Introduction to ReactJS
All Things Open
 
PPTX
Python datetime
sureshraj43
 
PPTX
Java 8 lambda
Manav Prasad
 
PDF
JavaScript - Chapter 11 - Events
WebStackAcademy
 
JavaScript Execution Context
Juan Medina
 
JQuery selectors
chandrashekher786
 
JavaScript: Variables and Functions
Jussi Pohjolainen
 
Java exception handling
BHUVIJAYAVELU
 
An Introduction to ReactJS
All Things Open
 
Python datetime
sureshraj43
 
Java 8 lambda
Manav Prasad
 
JavaScript - Chapter 11 - Events
WebStackAcademy
 

What's hot (20)

PDF
Fundamental JavaScript [UTC, March 2014]
Aaron Gustafson
 
PPSX
Javascript variables and datatypes
Varun C M
 
PDF
Python Generators
Akshar Raaj
 
PDF
React and redux
Mystic Coders, LLC
 
PDF
Xml parsing
Malintha Adikari
 
PDF
Python collections
Manusha Dilan
 
PPTX
Event In JavaScript
ShahDhruv21
 
ODP
Introduction to ReactJS
Knoldus Inc.
 
PPT
Introduction to Javascript
Amit Tyagi
 
PDF
Javascript Design Patterns
Lilia Sfaxi
 
PPTX
9. ES6 | Let And Const | TypeScript | JavaScript
pcnmtutorials
 
PDF
An introduction to React.js
Emanuele DelBono
 
PPTX
Javascript functions
Alaref Abushaala
 
PPTX
Dom
Rakshita Upadhyay
 
PDF
Introduction into ES6 JavaScript.
boyney123
 
DOCX
Java Code for Sample Projects Inheritance
jwjablonski
 
PDF
Workshop 21: React Router
Visual Engineering
 
PPTX
An Introduction to the DOM
Mindy McAdams
 
PPTX
Event handling
swapnac12
 
PPT
Effective Java - Enum and Annotations
Roshan Deniyage
 
Fundamental JavaScript [UTC, March 2014]
Aaron Gustafson
 
Javascript variables and datatypes
Varun C M
 
Python Generators
Akshar Raaj
 
React and redux
Mystic Coders, LLC
 
Xml parsing
Malintha Adikari
 
Python collections
Manusha Dilan
 
Event In JavaScript
ShahDhruv21
 
Introduction to ReactJS
Knoldus Inc.
 
Introduction to Javascript
Amit Tyagi
 
Javascript Design Patterns
Lilia Sfaxi
 
9. ES6 | Let And Const | TypeScript | JavaScript
pcnmtutorials
 
An introduction to React.js
Emanuele DelBono
 
Javascript functions
Alaref Abushaala
 
Dom
Rakshita Upadhyay
 
Introduction into ES6 JavaScript.
boyney123
 
Java Code for Sample Projects Inheritance
jwjablonski
 
Workshop 21: React Router
Visual Engineering
 
An Introduction to the DOM
Mindy McAdams
 
Event handling
swapnac12
 
Effective Java - Enum and Annotations
Roshan Deniyage
 
Ad

Recently uploaded (20)

PDF
Embodied AI: Ushering in the Next Era of Intelligent Systems
Yu Huang
 
PPTX
Construction Project Organization Group 2.pptx
vj5agdales
 
PDF
Operating System & Kernel Study Guide-1 - converted.pdf
mranoninvisib16
 
PPTX
FINAL REVIEW FOR COPD DIANOSIS FOR PULMONARY DISEASE.pptx
rubeshbme
 
PDF
keyrequirementskkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
mojeeburahmanwardak
 
PDF
composite construction of structures.pdf
AinieButt1
 
PDF
Mohammad Mahdi Farshadian CV - Prospective PhD Student 2026
Educational Group Mohammad Farshadian
 
PDF
Digital Logic Computer Design lecture notes
CHINNASUNKAIAH1
 
PDF
Mitigating Risks through Effective Management for Enhancing Organizational Pe...
IJAEMSJORNAL
 
PPTX
CH1 Production IntroductoryConcepts.pptx
RacemMellouli1
 
PPTX
Geodesy 1.pptx...............................................
abhi1361yadav
 
PPTX
UNIT-1 - COAL BASED THERMAL POWER PLANTS
Chandra Kumar S
 
PDF
BMEC211 - INTRODUCTION TO MECHATRONICS-1.pdf
ryankakungu
 
PPTX
MET 305 2019 SCHEME MODULE 2 COMPLETE.pptx
VinayB68
 
PPTX
web development for engineering and engineering
keshriji700
 
PPTX
Lesson 3_Tessellation.pptx finite Mathematics
quakeplayz54
 
PPT
Project quality management in manufacturing
BarMusaTetik
 
PPTX
Strings in CPP - Strings in C++ are sequences of characters used to store and...
sangeethamtech26
 
PDF
The CXO Playbook 2025 – Future-Ready Strategies for C-Suite Leaders Cerebrai...
Cerebraix Technologies
 
PPTX
M Tech Sem 1 Civil Engineering Environmental Sciences.pptx
ShriNRPrasad
 
Embodied AI: Ushering in the Next Era of Intelligent Systems
Yu Huang
 
Construction Project Organization Group 2.pptx
vj5agdales
 
Operating System & Kernel Study Guide-1 - converted.pdf
mranoninvisib16
 
FINAL REVIEW FOR COPD DIANOSIS FOR PULMONARY DISEASE.pptx
rubeshbme
 
keyrequirementskkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
mojeeburahmanwardak
 
composite construction of structures.pdf
AinieButt1
 
Mohammad Mahdi Farshadian CV - Prospective PhD Student 2026
Educational Group Mohammad Farshadian
 
Digital Logic Computer Design lecture notes
CHINNASUNKAIAH1
 
Mitigating Risks through Effective Management for Enhancing Organizational Pe...
IJAEMSJORNAL
 
CH1 Production IntroductoryConcepts.pptx
RacemMellouli1
 
Geodesy 1.pptx...............................................
abhi1361yadav
 
UNIT-1 - COAL BASED THERMAL POWER PLANTS
Chandra Kumar S
 
BMEC211 - INTRODUCTION TO MECHATRONICS-1.pdf
ryankakungu
 
MET 305 2019 SCHEME MODULE 2 COMPLETE.pptx
VinayB68
 
web development for engineering and engineering
keshriji700
 
Lesson 3_Tessellation.pptx finite Mathematics
quakeplayz54
 
Project quality management in manufacturing
BarMusaTetik
 
Strings in CPP - Strings in C++ are sequences of characters used to store and...
sangeethamtech26
 
The CXO Playbook 2025 – Future-Ready Strategies for C-Suite Leaders Cerebrai...
Cerebraix Technologies
 
M Tech Sem 1 Civil Engineering Environmental Sciences.pptx
ShriNRPrasad
 
Ad

Javascript Execution Context Flow

  • 3. 실행 컨텍스트 스택 Global Execution Context LexicalEnvironment Global Lexical Environment
  • 4. 실행 컨텍스트 스택 Global Execution Context LexicalEnvironment Global Lexical Environment GlobalEnvironmentRecord Object Environment Record BindingObject window x undefined foo <function object> ... ...
  • 5. 실행 컨텍스트 스택 Global Execution Context LexicalEnvironment Global Lexical Environment GlobalEnvironmentRecord Object Environment Record BindingObject window x undefined foo <function object> ... ... Declarative Environment Record y <uninitialized>
  • 6. 실행 컨텍스트 스택 Global Execution Context LexicalEnvironment Global Lexical Environment GlobalEnvironmentRecord Object Environment Record BindingObject window x undefined foo <function object> ... ... Declarative Environment Record y <uninitialized> [[GlobalThisValue]]
  • 7. 실행 컨텍스트 스택 Global Execution Context LexicalEnvironment Global Lexical Environment GlobalEnvironmentRecord OuterLexicalEnvironmentReference null Object Environment Record BindingObject window x undefined foo <function object> ... ... Declarative Environment Record y <uninitialized> [[GlobalThisValue]]
  • 8. 실행 컨텍스트 스택 Global Execution Context LexicalEnvironment Global Lexical Environment GlobalEnvironmentRecord OuterLexicalEnvironmentReference null Object Environment Record BindingObject window x 1 foo <function object> ... ... Declarative Environment Record y 2 [[GlobalThisValue]]
  • 10. foo Execution Context LexicalEnvironment foo Lexical Environment FunctionEnvironmentRecord Function Environment Record a undefined arguments { 0: 20, length: 1, callee: foo} x undefined y <uninitialized> bar <function object> 매개변수 arguments 객체 함수 몸체에서 선언된 식별자
  • 11. 실행 컨텍스트 스택 Global Execution Context LexicalEnvironment Global Lexical Environment GlobalEnvironmentRecord OuterLexicalEnvironmentReference null Object Environment Record BindingObject window x 1 foo <function object> ... ... Declarative Environment Record y 2 [[GlobalThisValue]] foo Execution Context LexicalEnvironment foo Lexical Environment FunctionEnvironmentRecord Function Environment Record a undefined arguments { 0: 20, length: 1, callee: foo} x undefined y <uninitialized> bar <function object> [[ThisValue]]
  • 12. 실행 컨텍스트 스택 Global Execution Context LexicalEnvironment Global Lexical Environment GlobalEnvironmentRecord OuterLexicalEnvironmentReference null Object Environment Record BindingObject window x 1 foo <function object> ... ... Declarative Environment Record y 2 [[GlobalThisValue]] foo Execution Context LexicalEnvironment foo Lexical Environment FunctionEnvironmentRecord OuterLexicalEnvironmentReference Function Environment Record a undefined arguments { 0: 20, length: 1, callee: foo} x undefined y <uninitialized> bar <function object> [[ThisValue]]
  • 13. 실행 컨텍스트 스택 Global Execution Context LexicalEnvironment Global Lexical Environment GlobalEnvironmentRecord OuterLexicalEnvironmentReference null Object Environment Record BindingObject window x 1 foo <function object> ... ... Declarative Environment Record y 2 [[GlobalThisValue]] foo Execution Context LexicalEnvironment foo Lexical Environment FunctionEnvironmentRecord OuterLexicalEnvironmentReference Function Environment Record a 20 arguments { 0: 20, length: 1, callee: foo} x 3 y 4 bar <function object> [[ThisValue]]
  • 14. 실행 컨텍스트 스택 Global Execution Context LexicalEnvironment Global Lexical Environment GlobalEnvironmentRecord OuterLexicalEnvironmentReference null Object Environment Record BindingObject window x 1 foo <function object> ... ... Declarative Environment Record y 2 [[GlobalThisValue]] foo Execution Context LexicalEnvironment foo Lexical Environment FunctionEnvironmentRecord OuterLexicalEnvironmentReference Function Environment Record a 20 arguments { 0: 20, length: 1, callee: foo} x 3 y 4 bar <function object> [[ThisValue]] bar Execution Context LexicalEnvironment bar Lexical Environment FunctionEnvironmentRecord OuterLexicalEnvironmentReference Function Environment Record b undefined arguments { 0: 10, length: 1, callee: bar} z <uninitialized> [[ThisValue]]
  • 15. 실행 컨텍스트 스택 Global Execution Context LexicalEnvironment Global Lexical Environment GlobalEnvironmentRecord OuterLexicalEnvironmentReference null Object Environment Record BindingObject window x 1 foo <function object> ... ... Declarative Environment Record y 2 [[GlobalThisValue]] foo Execution Context LexicalEnvironment foo Lexical Environment FunctionEnvironmentRecord OuterLexicalEnvironmentReference Function Environment Record a 20 arguments { 0: 20, length: 1, callee: foo} x 3 y 4 bar <function object> [[ThisValue]] bar Execution Context LexicalEnvironment bar Lexical Environment FunctionEnvironmentRecord OuterLexicalEnvironmentReference Function Environment Record b 10 arguments { 0: 10, length: 1, callee: bar} z 5 [[ThisValue]]
  • 16. 실행 컨텍스트 스택 Global Execution Context LexicalEnvironment Global Lexical Environment GlobalEnvironmentRecord OuterLexicalEnvironmentReference null Object Environment Record BindingObject window x 1 foo <function object> ... ... Declarative Environment Record y 2 [[GlobalThisValue]] foo Execution Context LexicalEnvironment foo Lexical Environment FunctionEnvironmentRecord OuterLexicalEnvironmentReference [[ThisValue]] Function Environment Record a 20 arguments { 0: 20, length: 1, callee: foo} x 3 y 4 bar <function object>
  • 17. 실행 컨텍스트 스택 Global Execution Context LexicalEnvironment Global Lexical Environment GlobalEnvironmentRecord OuterLexicalEnvironmentReference null Object Environment Record BindingObject window x 1 foo <function object> ... ... Declarative Environment Record y 2 [[GlobalThisValue]]