πŸ“Ί Front End/- HTML,css,Javascript

[Javascript-Core] Execution Context, μ‹€ν–‰ λ¬Έλ§₯에 κ΄€ν•˜μ—¬ μ•Œμ•„λ³΄μž.

Wonit 2020. 7. 27. 18:01

Execution Context

μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” μ‹€ν–‰ν•  μ½”λ“œμ— ν•„μš”ν•œ ν™˜κ²½ 정보λ₯Ό λͺ¨μ€ 객체λ₯Ό λœ»ν•œλ‹€.


μ΄λŠ”, OSλ₯Ό ν•™μŠ΅ν•˜λ‹€κ°€ λ§ˆμ£Όν•˜κ²Œ λ˜λŠ” μ‹€ν–‰ λ¬Έλ§₯, μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ, μ΅μŠ€νμ…˜ μ»¨ν…μŠ€νŠΈμ™€ λ‹€λ“€ λ™μΌν•œ κ°œλ…μ΄λ‹€.

 

쑰금 μ‰½κ²Œ 이야기 ν•œλ‹€λ©΄


예λ₯Ό λ“€μ–΄μ„œ μš°λ¦¬κ°€

var a = 10;
function hello() {
  var b = "hello";
  return b;
}

와 같은 μ½”λ“œκ°€ μžˆλ‹€λ©΄ μ—¬κΈ°μ„œ 싀행에 ν•„μš”ν•œ ν™˜κ²½ μ •λ³΄λŠ”

 

var a = 10κ³Ό hello()ν•¨μˆ˜μ™€ var b = 'hello'κ°€ μžˆμ„ 것이닀.

 

μ‹λ³„μžμ™€ λ³€μˆ˜λ“±κ³Ό 같은 정보λ₯Ό 가리킀고 μžˆλŠ” 객체λ₯Ό μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλΌκ³  ν•œλ‹€.


이런 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” 콜 μŠ€νƒμ— μ˜ν•΄ μ‹€ν–‰ ν™˜κ²½μ— λŒ€ν•œ μˆœμ„œλ₯Ό 보μž₯ν•˜λŠ”λ°, 순차적으둜 μ½”λ“œλ₯Ό Interpreting ν•˜λ©΄μ„œ μ½œμŠ€νƒμ— μΆ”κ°€ν•œλ‹€.


κ·Έ 말은 즉, μ½œμŠ€νƒμ— κ°€μž₯ μœ„μ— μžˆλŠ” 뢀뢄이 μš°λ¦¬κ°€ ν˜„μž¬ μ‹€ν–‰ν•  μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμž„μ„ μ•Œ 수 μžˆλ‹€.

μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ 생기렀면?

그럼 μ–΄λ–€ 정보듀이 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ 될까?

 

ν•˜λ‚˜μ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό 보톡 μš°λ¦¬λŠ” μ „μ—­ 곡간, eval()ν•¨μˆ˜, 일반 ν•¨μˆ˜λ₯Ό ν•˜λ‚˜μ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλΌκ³  ν•˜λŠ”λ° μ „μ—­ 곡간과 eval()은 μ½”λ“œμ˜ 싀행이 λœλ‹€λ©΄ μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진이 μžλ™μ μœΌλ‘œ λ§Œλ“€κ²Œ λ˜λŠ” 것이닀.


ν•¨μˆ˜ μ»¨ν…μŠ€νŠΈλŠ” 일반적으둜 μš°λ¦¬κ°€ ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•œλ‹€λ©΄ ν•¨μˆ˜μ— λŒ€ν•œ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ 생겼닀고 λ³΄λŠ” 것이닀.


κ·Έλž˜μ„œ μš°λ¦¬κ°€ λ§Œλ“€κ²Œ 될 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” 일반 ν•¨μˆ˜λΏμ΄λ‹€.

μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό μœ„ν•΄ js 엔진이 κ°–λŠ” 객체

ν•˜λ‚˜μ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό μ‹€ν–‰ν•˜κΈ° μœ„ν•΄μ„œλŠ” jsκ°€ λ‹€μŒκ³Ό 같은 것듀을 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ ν™˜κ²½ 정보λ₯Ό 객체둜 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ— μ €μž₯ν•œλ‹€.

 

  1. variableEnvironment : ν˜„μž¬ μ»¨ν…μŠ€νŠΈμ˜ λ³€μˆ˜, μ‹λ³„μž 등을 졜초의 μƒνƒœμΈ μŠ€λƒ…μƒ·μœΌλ‘œ μ €μž₯ν•˜λŠ”λ°, Lexical으둜 μŠ€λƒ…μƒ·μ„ κ΅¬μ„±ν•œλ‹€.
  2. LexicalEnvironment : VariableEnvironment와 λ™μΌν•˜μ§€λ§Œ μ‹€μ‹œκ°„μœΌλ‘œ λ³€κ²½ 사항이 μ μš©λœλ‹€.
  3. ThisBinding : μ‹λ³„μžκ°€ 바라보아야할 λŒ€μƒ 객체λ₯Ό μ§€μ •ν•œλ‹€.

μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ ν™œμ„±ν™” λœλ‹€λ©΄

μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ ν™œμ„±ν™” 되면 2κ°€μ§€ 단계λ₯Ό λ§žμ΄ν•œλ‹€.

  1. Creation Phase
  2. Execution Phase

Creatino Phase에 λŒ€ν•΄μ„œλŠ” μ•„λž˜μ—μ„œ 이야기 ν•  뢀뢄이고, Execution PhaseλŠ” μ‹€μ œλ‘œ μ‹€ν–‰ν•˜λŠ” λ‹¨κ³„μ΄λ―€λ‘œ μΆ©λΆ„ν•œ μ„€λͺ…이 μ•„λ‹ˆλ”λΌλ„ μ‰½κ²Œ 이해할 수 μžˆλ‹€.

 

ν•˜μ§€λ§Œ Creation PhaseλŠ” 이해가 ν•„μš”ν•œ 뢀뢄이 쑰금 μžˆλ‹€. λ°”λ‘œ λ“€μ–΄κ°€λ³΄μž.

ExecutionContextES6 = {
  LexicalEnvironment = <ref. to LexicalEnvironment in memory>,
  VariableEnvironment = <ref. to VariableEnvironment in  memory>,
}

μœ„μ—μ„œ ThisBinding이 μƒλž΅λ˜μ—ˆλŠ”λ°, ES6μ—μ„œλŠ” LexicalEnvrionment 과정에 ν¬ν•¨λœλ‹€.

 

μ—¬κΈ°μ„œ μš°λ¦¬λŠ” LexicalEnvironment에 λŒ€ν•΄μ„œ μ•Œμ•„λ³΄μž.


LexicalEnvironment은 싀행이 λœλ‹€λ©΄ 3κ°€μ§€ 일을 μˆ˜ν–‰ν•œλ‹€.

  • EnvironmentRecord
  • ReferenceToTheOuterEnvironment
  • ThisBinding

EnvironmentRecord

λ³€μˆ˜μ™€ μ‹λ³„μž, μΈμˆ˜μ— λŒ€ν•œ μ—¬λŸ¬ 정보λ₯Ό μ €μž₯ν•œλ‹€.


이 과정을 거쳐야 ν•΄λ‹Ή μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ—μ„œ μ‚¬μš©ν•˜κ²Œλ  ν™˜κ²½λ“€μ„ ꡬ성할 수 μžˆλŠ”λ°, 마치 사전 닡사? 같은 λŠλ‚Œμ΄ λ“ λ‹€.

ReferenceToTheOuterEnvironment

λ§Œμ•½ EnvironmentRecordμ—μ„œ λ³€μˆ˜μ™€ μ‹λ³„μž, μΈμˆ˜μ— λŒ€ν•œ 정보λ₯Ό μ°Ύμ§€ λͺ»ν•  λ•Œ, μƒμœ„ μ»¨ν…μŠ€νŠΈμ— μ ‘κ·Όν•΄μ„œ μ°ΎλŠ” 일을 μˆ˜ν–‰ν•œλ‹€.

ThisBinding

μ‹€μ œλ‘œ this의 값이 κ²°μ •λ˜λŠ” 뢀뢄이닀. this에 κ΄€ν•œ λ‚΄μš©μ€ 이야기할 뢀뢄이 많기 λ•Œλ¬Έμ— λ‹€μŒ ν¬μŠ€νŒ…μ—μ„œ μžμ„Ένžˆ λ“€μ–΄κ°€λ³΄μž.

 

 


μ΄λ ‡κ²Œ μžλ°”μŠ€ν¬λ¦½νŠΈ μ—”μ§„μ˜ 일뢀λ₯Ό μš°λ¦¬λŠ” 였늘 μ•Œκ²Œ λ˜μ—ˆλ‹€.

이런 과정이 사싀 κ°œλ°œμ„ ν•˜λŠ”λ°μ— μžˆμ–΄ 크게 μž‘μš©ν• κ±°λΌκ³  생각을 ν•˜μ§„ μ•Šμ§€λ§Œ 개발자둜써 맀일맀일 μƒˆλ‘œμš΄ 기술이 νƒ„μƒν•˜κ³  κΈ‰λ³€ν•˜λŠ” μ‹œλŒ€μ— μ΅μˆ™ν•œ μ–Έμ–΄λ‘œ κ°œλ°œμ„ λŠ₯μˆ™ν•˜κ²Œ ν•˜λŠ” 방법을 μ•„λŠ” κ°œλ°œμžκ°€ μ•„λ‹ˆλΌ, μƒˆλ‘œμš΄ ν™˜κ²½μ—μ„œλ„ λΉ λ₯΄κ²Œ μ μ‘ν•˜λŠ” κ°œλ°œμžκ°€ λ˜μ–΄μ•Ό ν•œλ‹€.