Execution Context

μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진도 ν•˜λ‚˜μ˜ (κ±°λŒ€ν•œ) ν•¨μˆ˜λ‹€.

ν•¨μˆ˜?

ν”„λ‘œκ·Έλž¨μ„ λ§Œλ“œλŠ” κ°œλ°œμžκ°€ ν•˜λŠ” 일은 λ³€μˆ˜λ₯Ό μ„ μ–Έν•˜κ³ , μ—¬λŸ¬κ°€μ§€ λͺ¨λ“ˆ(ν•¨μˆ˜)λ₯Ό λ§Œλ“€μ–΄ ν•˜λ‚˜μ˜ μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μœΌλ‘œ ν•©μΉ˜λŠ” 과정이닀.

λͺ¨λ“ˆν™”λ₯Ό 톡해 μ–»λŠ” 이점 쀑 두 κ°€μ§€λŠ” λ³€μˆ˜ μΆ©λŒμ„ λ§‰λŠ”λ‹€. μ§€μ—­ λ³€μˆ˜λ₯Ό μ‚¬μš©ν•΄ ν•¨μˆ˜κ°€ 싀행될 λ•Œλ§Œ λ©”λͺ¨λ¦¬λ₯Ό μ‚¬μš©ν•œλ‹€.

ν•¨μˆ˜λŠ” 본인의 μ‹€ν–‰ λ¬Έλ§₯을 κ°€μ§„λ‹€.

μš°λ¦¬κ°€ μ΅μˆ™ν•œ ν•¨μˆ˜, call stack 그리고 λ³€μˆ˜λ₯Ό λ¨Όμ € μ‚΄νŽ΄λ³΄μž. ν•¨μˆ˜κ°€ μ‹€ν–‰λ˜λ©΄ call stack에 μŒ“μ΄κ³  returnμ‹œ pop λœλ‹€. λ”λΆˆμ–΄ ν•¨μˆ˜κ°€ μ‹€ν–‰λ˜λ©΄ μ‹€ν–‰ λ¬Έλ§₯(Execution context)이 생긴닀.

κ°œλ°œμ„ ν•˜λ‹€λ³΄λ©΄ Context, ν˜Ήμ€ μ‹€ν–‰ λ¬Έλ§₯μ΄λΌλŠ” 단어λ₯Ό 많이 μ ‘ν•˜κ²Œ λœλ‹€.

μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” scope, hoisting, this, function, closure λ“± Javascript의 λ™μž‘μ›λ¦¬λ₯Ό μ„€λͺ…ν•˜λŠ”λ° 핡심이 λ˜λŠ” κ°œλ…μ΄λ‹€.

μš°μ„  μ •μ˜λ₯Ό μ‚΄νŽ΄λ³΄λ©΄ λ‹€μŒκ³Ό κ°™λ‹€.

μ‹€ν–‰ κ°€λŠ₯ν•œ μ½”λ“œλ₯Ό ν˜•μƒν™”ν•˜κ³  κ΅¬λΆ„ν•˜λŠ” 좔상적인 κ°œλ…

더 μ‰½κ²Œ μ •μ˜ν•˜μž.

μ‹€ν–‰ κ°€λŠ₯ν•œ μ½”λ“œκ°€ (μ‹€ν–‰λ˜κΈ° μœ„ν•΄ ν•„μš”ν•œ or μ‹€ν–‰λ˜λŠ”) ν™˜κ²½

κ·Έλ ‡λ‹€λ©΄ μ‹€ν–‰ κ°€λŠ₯ν•œ μ½”λ“œλž€ λ¬΄μ—‡μΌκΉŒ?

  1. μ „μ—­ μ½”λ“œ : μ „μ—­ μ˜μ—­μ— μ‘΄μž¬ν•˜λŠ” μ½”λ“œ

  2. Eval μ½”λ“œ : eval ν•¨μˆ˜λ‘œ μ‹€ν–‰λ˜λŠ” μ½”λ“œ

  3. ν•¨μˆ˜ μ½”λ“œ : ν•¨μˆ˜ 내에 μ‘΄μž¬ν•˜λŠ” μ½”λ“œ

μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 μ½”λ“œλ₯Ό μ‹€ν–‰ν•˜κΈ° μœ„ν•˜μ—¬ 싀행에 ν•„μš”ν•œ μ—¬λŸ¬κ°€μ§€ 정보λ₯Ό μ•Œκ³  μžˆμ–΄μ•Ό ν•œλ‹€.

싀행에 ν•„μš”ν•œ μ—¬λŸ¬κ°€μ§€ μ •λ³΄λž€ μ•„λž˜μ™€ 같은 것듀이 μžˆλ‹€.

  • λ³€μˆ˜ : μ „μ—­λ³€μˆ˜, μ§€μ—­λ³€μˆ˜, λ§€κ°œλ³€μˆ˜, 객체의 Property

  • ν•¨μˆ˜ μ„ μ–Έ

  • λ³€μˆ˜μ˜ μœ νš¨λ²”μœ„(Scope)

  • this

κ°‘μž‘μŠ€λŸ½μ§€λ§Œ, μ½”λ“œλ₯Ό λ³΄λ©΄μ„œ μ„€λͺ…을 이어가겠닀.

var x = 'xxx';

function foo () {
  var y = 'yyy';

  function bar () {
    var z = 'zzz';
    console.log(x + y + z);
  }
  bar();
}
foo();

μœ„ μ½”λ“œλ₯Ό μ‹€ν–‰ν•˜λ©΄ μ•„λž˜μ™€ 같이 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒ(Stack)이 μƒμ„±ν•˜κ³  μ†Œλ©Έν•œλ‹€.

ν˜„μž¬ μ‹€ν–‰ 쀑인 μ»¨ν…μŠ€νŠΈμ—μ„œ 이 μ»¨ν…μŠ€νŠΈμ™€ κ΄€λ ¨μ—†λŠ” μ½”λ“œ (예λ₯Ό λ“€μ–΄ λ‹€λ₯Έ ν•¨μˆ˜)κ°€ μ‹€ν–‰λ˜λ©΄ μƒˆλ‘œμš΄ μ»¨ν…μŠ€νŠΈκ°€ μƒμ„±λœλ‹€.

이 μ»¨ν…μŠ€νŠΈλŠ” μŠ€νƒμ— μŒ“μ΄κ²Œ 되고 컨트둀(μ œμ–΄κΆŒ)이 μ΄λ™ν•œλ‹€.

  1. μ „μ—­ μ½”λ“œ(Global code)둜 컨트둀이 μ§„μž…ν•˜λ©΄ μ „μ—­ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μƒμ„±λ˜κ³  μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ— μŒ“μΈλ‹€. μ „μ—­ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ΄ μ’…λ£Œλ  λ•Œ(μ›Ή νŽ˜μ΄μ§€μ—μ„œ λ‚˜κ°€κ±°λ‚˜ λΈŒλΌμš°μ €λ₯Ό 닫을 λ•Œ)κΉŒμ§€ μœ μ§€λœλ‹€.

  2. 컨트둀이 μ‹€ν–‰ κ°€λŠ₯ν•œ μ½”λ“œλ‘œ μ΄λ™ν•˜λ©΄ 논리적 μŠ€νƒ ꡬ쑰λ₯Ό κ°€μ§€λŠ” μƒˆλ‘œμš΄ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ΄ μƒμ„±λœλ‹€.

  3. ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜λ©΄ ν•΄λ‹Ή ν•¨μˆ˜μ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μƒμ„±λ˜λ©° 직전에 μ‹€ν–‰λœ μ½”λ“œ λΈ”λ‘μ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μœ„μ— μŒ“μΈλ‹€.

  4. ν•¨μˆ˜ 싀행이 λλ‚˜λ©΄ ν•΄λ‹Ή ν•¨μˆ˜μ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό νŒŒκΈ°ν•˜κ³  μ§μ „μ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ— μ»¨νŠΈλ‘€μ„ λ°˜ν™˜ν•œλ‹€.


Execution Context의 3κ°€μ§€ 객체

μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” μ‹€ν–‰ κ°€λŠ₯ν•œ μ½”λ“œλ₯Ό ν˜•μƒν™”ν•˜κ³  κ΅¬λΆ„ν•˜λŠ” 좔상적인 κ°œλ…μ΄μ§€λ§Œ λ¬Όλ¦¬μ μœΌλ‘œλŠ” 객체의 ν˜•νƒœλ₯Ό κ°€μ§€λ©° μ•„λž˜μ˜ 3κ°€μ§€ ν”„λ‘œνΌν‹°λ₯Ό μ†Œμœ ν•œλ‹€.

1. Variable Object

μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μ‹€ν–‰λ˜λ©΄ μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 싀행에 ν•„μš”ν•œ μ—¬λŸ¬ 정보듀을 담을 객체λ₯Ό μƒμ„±ν•œλ‹€.

이λ₯Ό Variable Object(μ΄ν•˜ VO)라고 ν•œλ‹€. VOλŠ” μ½”λ“œκ°€ 싀행될 λ•Œ 엔진에 μ˜ν•΄ 참쑰되며 μ½”λ“œμ—μ„œλŠ” μ ‘κ·Όν•  수 μ—†λ‹€.

VOλŠ” λ³€μˆ˜, 맀개 λ³€μˆ˜(parameter)와 인수 정보(arguments), ν•¨μˆ˜ μ„ μ–Έ(ν•¨μˆ˜ ν‘œν˜„μ‹μ€ μ œμ™Έ)와 같은 정보듀을 λ‹΄λŠ”λ‹€.

VOλŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ ν”„λ‘œνΌν‹°μ΄κΈ° λ•Œλ¬Έμ— 값을 κ°€μ§€λŠ”λ°, 이 값은 λ‹€λ₯Έ 객체λ₯Ό 가리킨닀.

그런데 μ „μ—­ μ½”λ“œ μ‹€ν–‰μ‹œ μƒμ„±λ˜λŠ” μ „μ—­ μ»¨ν…μŠ€νŠΈμ˜ κ²½μš°μ™€ ν•¨μˆ˜λ₯Ό μ‹€ν–‰ν•  λ•Œ μƒμ„±λ˜λŠ” ν•¨μˆ˜ μ»¨ν…μŠ€νŠΈμ˜ 경우, κ°€λ¦¬ν‚€λŠ” 객체가 λ‹€λ₯΄λ‹€.

μ΄λŠ” μ „μ—­ μ½”λ“œμ™€ ν•¨μˆ˜μ˜ λ‚΄μš©μ΄ λ‹€λ₯΄κΈ° λ•Œλ¬Έμ΄λ‹€. 예λ₯Ό λ“€μ–΄ μ „μ—­ μ½”λ“œμ—λŠ” λ§€κ°œλ³€μˆ˜κ°€ μ—†μ§€λ§Œ ν•¨μˆ˜μ—λŠ” λ§€κ°œλ³€μˆ˜κ°€ μžˆλ‹€.

μ „μ—­ μ»¨ν…μŠ€νŠΈμ˜ 경우, VOλŠ” μœ μΌν•˜λ©° μ΅œμƒμœ„μ— μœ„μΉ˜ν•˜κ³  λͺ¨λ“  μ „μ—­ λ³€μˆ˜, μ „μ—­ ν•¨μˆ˜ 등을 ν¬ν•¨ν•˜λŠ” μ „μ—­ 객체(Global Object)λ₯Ό 가리킨닀.

μ „μ—­ κ°μ²΄λŠ” 전역에 μ„ μ–Έλœ μ „μ—­ λ³€μˆ˜μ™€ μ „μ—­ ν•¨μˆ˜λ₯Ό ν”„λ‘œνΌν‹°λ‘œ μ†Œμœ ν•œλ‹€.

ν•¨μˆ˜ μ»¨ν…μŠ€νŠΈμ˜ 경우, VOλŠ” ν™œμ„± 객체(Activation Object)λ₯Ό 가리킀며 맀개 λ³€μˆ˜μ™€ μΈμˆ˜λ“€μ˜ 정보λ₯Ό λ°°μ—΄μ˜ ν˜•νƒœλ‘œ λ‹΄λŠ” arguments objectκ°€ μΆ”κ°€λœλ‹€.

2. Scope chain

μŠ€μ½”ν”„ 체인은 μΌμ’…μ˜ λ¦¬μŠ€νŠΈλ‘œμ„œ μ „μ—­ 객체와 μ€‘μ²©λœ ν•¨μˆ˜ μŠ€μ½”ν”„μ˜ 레퍼런슀λ₯Ό μ°¨λ‘€λ‘œ μ €μž₯ν•˜κ³  μžˆλ‹€.

λ‹€μ‹œ 말해, μŠ€μ½”ν”„ 체인은 ν•΄λ‹Ή μ „μ—­ λ˜λŠ” ν•¨μˆ˜κ°€ μ°Έμ‘°ν•  수 μžˆλŠ” λ³€μˆ˜, ν•¨μˆ˜ μ„ μ–Έ λ“±μ˜ 정보λ₯Ό λ‹΄κ³  μžˆλŠ” μ „μ—­ 객체(GO) λ˜λŠ” ν™œμ„± 객체(AO)의 리슀트λ₯Ό 가리킨닀.

ν˜„μž¬ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ ν™œμ„± 객체(AO)λ₯Ό μ„ λ‘λ‘œ ν•˜μ—¬ 순차적으둜 μƒμœ„ μ»¨ν…μŠ€νŠΈμ˜ ν™œμ„± 객체(AO)λ₯Ό 가리킀며 λ§ˆμ§€λ§‰ λ¦¬μŠ€νŠΈλŠ” μ „μ—­ 객체(GO)λ₯Ό 가리킨닀.

μŠ€μ½”ν”„ 체인은 μ‹λ³„μž μ€‘μ—μ„œ 객체(μ „μ—­ 객체 μ œμ™Έ)의 ν”„λ‘œνΌν‹°κ°€ μ•„λ‹Œ μ‹λ³„μž, 즉 λ³€μˆ˜λ₯Ό κ²€μƒ‰ν•˜λŠ” λ©”μ»€λ‹ˆμ¦˜μ΄λ‹€.

μ‹λ³„μž μ€‘μ—μ„œ λ³€μˆ˜κ°€ μ•„λ‹Œ 객체의 ν”„λ‘œνΌν‹°(λ¬Όλ‘  λ©”μ†Œλ“œλ„ ν¬ν•¨λœλ‹€)λ₯Ό κ²€μƒ‰ν•˜λŠ” λ©”μ»€λ‹ˆμ¦˜μ€ ν”„λ‘œν† νƒ€μž… 체인(Prototype Chain)이닀.

엔진은 μŠ€μ½”ν”„ 체인을 톡해 λ ‰μ‹œμ»¬ μŠ€μ½”ν”„λ₯Ό νŒŒμ•…ν•œλ‹€.

ν•¨μˆ˜κ°€ 쀑첩 μƒνƒœμΌ λ•Œ ν•˜μœ„ν•¨μˆ˜ λ‚΄μ—μ„œ μƒμœ„ν•¨μˆ˜μ˜ μŠ€μ½”ν”„μ™€ μ „μ—­ μŠ€μ½”ν”„κΉŒμ§€ μŠ€μ½”ν”„ 체인 검색을 톡해 μ°Έμ‘°ν•  수 μžˆλ‹€.

ν•¨μˆ˜κ°€ μ€‘μ²©λ˜μ–΄ 있으면 쀑첩될 λ•Œλ§ˆλ‹€ λΆ€λͺ¨ ν•¨μˆ˜μ˜ Scopeκ°€ μžμ‹ ν•¨μˆ˜μ˜ μŠ€μ½”ν”„ 체인에 ν¬ν•¨λœλ‹€.

ν•¨μˆ˜ 싀행쀑에 λ³€μˆ˜λ₯Ό λ§Œλ‚˜λ©΄ κ·Έ λ³€μˆ˜λ₯Ό μš°μ„  ν˜„μž¬ Scope, 즉 Activation Objectμ—μ„œ 검색해보고, λ§Œμ•½ 검색에 μ‹€νŒ¨ν•˜λ©΄ μŠ€μ½”ν”„ 체인에 담겨진 μˆœμ„œλŒ€λ‘œ κ·Έ 검색을 μ΄μ–΄κ°€κ²Œ λ˜λŠ” 것이닀.

이것이 μŠ€μ½”ν”„ 체인이라고 λΆˆλ¦¬λŠ” μ΄μœ μ΄λ‹€.

예λ₯Ό λ“€μ–΄ ν•¨μˆ˜ λ‚΄μ˜ μ½”λ“œμ—μ„œ λ³€μˆ˜λ₯Ό μ°Έμ‘°ν•˜λ©΄ 엔진은 μŠ€μ½”ν”„ 체인의 첫번째 λ¦¬μŠ€νŠΈκ°€ κ°€λ¦¬ν‚€λŠ” AO에 μ ‘κ·Όν•˜μ—¬ λ³€μˆ˜λ₯Ό κ²€μƒ‰ν•œλ‹€.

만일 검색에 μ‹€νŒ¨ν•˜λ©΄ λ‹€μŒ λ¦¬μŠ€νŠΈκ°€ κ°€λ¦¬ν‚€λŠ” Activation Object(λ˜λŠ” μ „μ—­ 객체)λ₯Ό κ²€μƒ‰ν•œλ‹€.

이와 같이 순차적으둜 μŠ€μ½”ν”„ μ²΄μΈμ—μ„œ λ³€μˆ˜λ₯Ό κ²€μƒ‰ν•˜λŠ”λ° κ²°κ΅­ 검색에 μ‹€νŒ¨ν•˜λ©΄ μ •μ˜λ˜μ§€ μ•Šμ€ λ³€μˆ˜μ— μ ‘κ·Όν•˜λŠ” κ²ƒμœΌλ‘œ νŒλ‹¨ν•˜μ—¬ Reference μ—λŸ¬λ₯Ό λ°œμƒμ‹œν‚¨λ‹€.

3. this value

this ν”„λ‘œνΌν‹°μ—λŠ” this 값이 ν• λ‹Ήλœλ‹€.

this에 ν• λ‹Ήλ˜λŠ” 값은 ν•¨μˆ˜ 호좜 νŒ¨ν„΄μ— μ˜ν•΄ κ²°μ •λœλ‹€.

Javaμ—μ„œμ˜ thisλŠ” 자기 μžμ‹ (self)λ₯Ό κ°€λ¦¬ν‚€λŠ” μ°Έμ‘° λ³€μˆ˜μ΄λ‹€.

κ·ΈλŸ¬λ‚˜ javascriptμ—μ„œλŠ” κ·Έλ ‡μ§€ μ•Šλ‹€.

μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ 경우 Java와 같이 this에 λ°”μΈλ”©λ˜λŠ” κ°μ²΄λŠ” ν•œ κ°€μ§€κ°€ μ•„λ‹ˆλΌ ν•΄λ‹Ή ν•¨μˆ˜ 호좜 방식에 따라 this에 λ°”μΈλ”©λ˜λŠ” 객체가 달라진닀.

λ‹€μ‹œ 말해, ν•¨μˆ˜λ₯Ό μ„ μ–Έν•  λ•Œ this에 바인딩할 객체가 μ •μ μœΌλ‘œ κ²°μ •λ˜λŠ” 것이 μ•„λ‹ˆκ³ , ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•  λ•Œ ν•¨μˆ˜κ°€ μ–΄λ–»κ²Œ ν˜ΈμΆœλ˜μ—ˆλŠ”μ§€μ— 따라 this에 바인딩할 객체가 λ™μ μœΌλ‘œ κ²°μ •λœλ‹€.


Sources …

Last updated