SlideShare une entreprise Scribd logo
1  sur  18
The anatomy of ECMA 262-3 #1

Execution Context
김훈민
프론트엔드개발팀 / UIT 개발실
2014.01.16
#1 Execution Context

10. Execution context
“When control is transferred to ECMAScript executable code, control is entering
an execution context. Active execution contexts logically form a stack. The top
execution context on this logical stack is the running execution context”
…
ECMA-262-3

제어가 실행 코드를 만나면 실행 콘텍스트로 들어간다.
여러 개의 실행 콘텍스트는 논리적으로 스택의 형태를 구성한다.
#1 Execution Context

10.2 Entering An Execution context
“When control enters an execution context, the scope chain is created and
initialised, variable instantiation is performed, and the this value is determined.
The initialization of the scope chain, variable instantiation, and the determination
of the this value depend on the type of code being entered.”
ECMA-262-3

실행 콘텍스트로 제어가 이동 하면 스코프 체인 생성, 변수 초기화를 하고 this
값을 결정한다. 세부 과정은 실행 콘텍스트에 전달한 코드의 종류에 따라서 다
르다.
#1 Execution Context

10.1.2 Types of Executable code
•

Global code is source text that is treated as an ECMAScript Program. …(생

•

Eval code is the source text supplied to the built-in eval function. More

•

략)

precisely, if the parameter to the built-in eval function is a string, it is treated
as an ECMAScript Program. …(생략)
Function code is source text that is parsed as part of a FunctionBody. The
function code of a particular FunctionBody does not include any source text
that is parsed as part of a nested FunctionBody. …(생략)
ECMA-262-3
전역 코드(Global code), Eval 코드(Eval Code), 함수 코드(Function Code)가
있다.
#1 Execution Context

Execution context…?
실행 콘텍스트, 실행 문맥이라고도 함.
ECMAScript에 정의된 추상적인 개념으로 코드가 실행되는 환경을 의미.

“모든 Javascript 코드는 실행 콘텍스트 안에서 돌아간다.”
#1 Execution Context

제어가 ECMAScript 코드를 만나면 실행 콘텍스트를 생성한다.

Control

실행 콘텍스트
(Execution context)
#1 Execution Context

생성한 실행 콘텍스트는 논리적으로 스택의 형태를 구성한다.

Execution context stack

작동중인 실행 문맥 - 3
(Execution context)

실행 문맥 - 2
(Execution context)
실행 문맥 - 1
(Execution context)
#1 Execution Context

실행 콘텍스트는 스코프 체인 생성, 변수 초기화, this 값을 결정한다.

ExecutionContext = {
실행 콘텍스트
(Execution context)

}

초기화 과정은 실행 코드의 종류에 따라서 다르다.

변수, 함수, 매개변수 생성
스코프 체인 생성,
this 바인딩,
…
#1 Execution Context

Executable Code…?
하나의 실행 콘텍스트에서 처리되는 JavaScript 코드의 단위.
ECMA-262는 실행 코드를 3가지로 분류.
•

전역 코드( Global code)
ECMAScript 프로그램이 최초에 실행하는 소스 텍스트

•

함수 코드( Function code)
함수 몸체의 부분으로 해석할 수 있는 소스 텍스트

•

Eval 코드( Eval code)

내장 eval 함수에 넘겨진 소스 텍스트
#1 Execution Context

전역 코드(Global code)
• 전역 코드는 프로그램 수준에서 실행
• Js 파일을 로딩하거나 지역 인라인 코드를 만났을 때 Javascript 엔진이 최초로 읽어 들이는
코드
• 처음 시작 시, 실행 콘텍스트 스택(ECSTack)에는 오직 전역 콘텍스트만 존재
Control
Execution context stack

전역 콘텍스트
(Global context)
#1 Execution Context

전역 코드(Global code)의 범위
함수 몸체 안의 코드는 전역 코드에 포함되지 않는다.
#1 Execution Context

함수 코드(Function code)
함수 실행 코드를 만나면 새로운 실행 콘텍스트를 생성하여 ECStack에 넣는다.

Execution
context stack

person 함수 실행 콘텍스트
(Function execution context)
전역 콘텍스트
(Global context)

Control
#1 Execution Context

함수 코드(Function code)
역시 함수 내부 중첩 함수의 코드는 함수 코드에 포함되지 않는
다.
#1 Execution Context

함수 코드(Function code)

Execution
context stack

getFirstName 함수 실행 콘텍스트
(Function execution context)
person 함수 실행 콘텍스트
(Function execution context)
전역 콘텍스트
(Global context)

Control
#1 Execution Context

eval 코드(eval code)
eval 코드에는 호출 콘텍스트(calling context)라는 개념이 존재
#1 Execution Context

Execution context stack

Execution context stack
작동중인 실행 문맥
(Eval context)

실행 문맥 - 2

(Function execution context)

실행 문맥 - 1

(Function execution context)

전역 실행 문맥
(Global context)
#1 Execution Context

더 자세한 내용은…
•

원문 : http://dmitrysoshnikov.com/ecmascript/chapter-1-execution-contexts/

•

번역 : http://huns.me/%EB%B2%88%EC%97%AD-ecma-262-3-in-detailchapter-1-execution-contexts/
Thank you.

Contenu connexe

En vedette

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by HubspotMarius Sescu
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTExpeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsPixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 

En vedette (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

Anatomy of js_2014_execution_context

  • 1. The anatomy of ECMA 262-3 #1 Execution Context 김훈민 프론트엔드개발팀 / UIT 개발실 2014.01.16
  • 2. #1 Execution Context 10. Execution context “When control is transferred to ECMAScript executable code, control is entering an execution context. Active execution contexts logically form a stack. The top execution context on this logical stack is the running execution context” … ECMA-262-3 제어가 실행 코드를 만나면 실행 콘텍스트로 들어간다. 여러 개의 실행 콘텍스트는 논리적으로 스택의 형태를 구성한다.
  • 3. #1 Execution Context 10.2 Entering An Execution context “When control enters an execution context, the scope chain is created and initialised, variable instantiation is performed, and the this value is determined. The initialization of the scope chain, variable instantiation, and the determination of the this value depend on the type of code being entered.” ECMA-262-3 실행 콘텍스트로 제어가 이동 하면 스코프 체인 생성, 변수 초기화를 하고 this 값을 결정한다. 세부 과정은 실행 콘텍스트에 전달한 코드의 종류에 따라서 다 르다.
  • 4. #1 Execution Context 10.1.2 Types of Executable code • Global code is source text that is treated as an ECMAScript Program. …(생 • Eval code is the source text supplied to the built-in eval function. More • 략) precisely, if the parameter to the built-in eval function is a string, it is treated as an ECMAScript Program. …(생략) Function code is source text that is parsed as part of a FunctionBody. The function code of a particular FunctionBody does not include any source text that is parsed as part of a nested FunctionBody. …(생략) ECMA-262-3 전역 코드(Global code), Eval 코드(Eval Code), 함수 코드(Function Code)가 있다.
  • 5. #1 Execution Context Execution context…? 실행 콘텍스트, 실행 문맥이라고도 함. ECMAScript에 정의된 추상적인 개념으로 코드가 실행되는 환경을 의미. “모든 Javascript 코드는 실행 콘텍스트 안에서 돌아간다.”
  • 6. #1 Execution Context 제어가 ECMAScript 코드를 만나면 실행 콘텍스트를 생성한다. Control 실행 콘텍스트 (Execution context)
  • 7. #1 Execution Context 생성한 실행 콘텍스트는 논리적으로 스택의 형태를 구성한다. Execution context stack 작동중인 실행 문맥 - 3 (Execution context) 실행 문맥 - 2 (Execution context) 실행 문맥 - 1 (Execution context)
  • 8. #1 Execution Context 실행 콘텍스트는 스코프 체인 생성, 변수 초기화, this 값을 결정한다. ExecutionContext = { 실행 콘텍스트 (Execution context) } 초기화 과정은 실행 코드의 종류에 따라서 다르다. 변수, 함수, 매개변수 생성 스코프 체인 생성, this 바인딩, …
  • 9. #1 Execution Context Executable Code…? 하나의 실행 콘텍스트에서 처리되는 JavaScript 코드의 단위. ECMA-262는 실행 코드를 3가지로 분류. • 전역 코드( Global code) ECMAScript 프로그램이 최초에 실행하는 소스 텍스트 • 함수 코드( Function code) 함수 몸체의 부분으로 해석할 수 있는 소스 텍스트 • Eval 코드( Eval code) 내장 eval 함수에 넘겨진 소스 텍스트
  • 10. #1 Execution Context 전역 코드(Global code) • 전역 코드는 프로그램 수준에서 실행 • Js 파일을 로딩하거나 지역 인라인 코드를 만났을 때 Javascript 엔진이 최초로 읽어 들이는 코드 • 처음 시작 시, 실행 콘텍스트 스택(ECSTack)에는 오직 전역 콘텍스트만 존재 Control Execution context stack 전역 콘텍스트 (Global context)
  • 11. #1 Execution Context 전역 코드(Global code)의 범위 함수 몸체 안의 코드는 전역 코드에 포함되지 않는다.
  • 12. #1 Execution Context 함수 코드(Function code) 함수 실행 코드를 만나면 새로운 실행 콘텍스트를 생성하여 ECStack에 넣는다. Execution context stack person 함수 실행 콘텍스트 (Function execution context) 전역 콘텍스트 (Global context) Control
  • 13. #1 Execution Context 함수 코드(Function code) 역시 함수 내부 중첩 함수의 코드는 함수 코드에 포함되지 않는 다.
  • 14. #1 Execution Context 함수 코드(Function code) Execution context stack getFirstName 함수 실행 콘텍스트 (Function execution context) person 함수 실행 콘텍스트 (Function execution context) 전역 콘텍스트 (Global context) Control
  • 15. #1 Execution Context eval 코드(eval code) eval 코드에는 호출 콘텍스트(calling context)라는 개념이 존재
  • 16. #1 Execution Context Execution context stack Execution context stack 작동중인 실행 문맥 (Eval context) 실행 문맥 - 2 (Function execution context) 실행 문맥 - 1 (Function execution context) 전역 실행 문맥 (Global context)
  • 17. #1 Execution Context 더 자세한 내용은… • 원문 : http://dmitrysoshnikov.com/ecmascript/chapter-1-execution-contexts/ • 번역 : http://huns.me/%EB%B2%88%EC%97%AD-ecma-262-3-in-detailchapter-1-execution-contexts/