πŸ“’ JavaScript

[JS Tam9μƒν™œ] #6 Prototype __proto__ [[Prototype]]

Tamii 2021. 8. 8. 15:21
λ°˜μ‘ν˜•

Prototype을 ν”Όν•˜κ²Œ 된 이유

JavaScriptλ₯Ό κ³΅λΆ€ν•˜λŠ” 프린이라면 왠지 ν”Όν•˜κ³  μ‹Άκ³  λŠλ‚Œμ μœΌλ‘œ μ΄ν•΄λŠ” λ˜μ§€λ§Œ μž…μœΌλ‘œ μ„€λͺ…ν•  수 μ—†λŠ” 그런 ν‚€μ›Œλ“œλ“€μ΄ μžˆλ‹€.

그쀑 ν•˜λ‚˜λŠ” λ°”λ‘œ λ‚΄κ°€λ§Œλ“ .

Prototype μ‚Όν˜•μ œ


κ·Έ μ΄μœ λŠ” pro~ λ₯Ό λ‚¨λ°œν•˜λŠ” μ„€λͺ… λ•Œλ¬Έ..
"μƒμ„±μž ν•¨μˆ˜μ˜ ν”„λ‘œν† νƒ€μž… ν”„λ‘œνΌν‹° [[ν”„λ‘œν† νƒ€μž…]]λ‚΄λΆ€μŠ¬λ‘―μ˜ 값을 가리킨닀~"

근데 μ΄μΉœκ΅¬λ“€μ„ ν”Όν•΄λ‹€λ…”λ”λ‹ˆ 점점 λ‚˜μ˜ μ•žκΈΈμ΄ κ°€λ‘œλ§‰νžˆλŠ” λŠλ‚Œμ„ λ°›μ•˜κ³ (?)
κ±”λ„€λ“€κ³Ό ν•˜λ‚˜μ”© 맞μž₯λ– μ„œ JSμ§±β˜„οΈμ„ 먹으렀고 ν•œλ‹€.

κ³΅λΆ€ν•œ λ‚΄μš© μ‹œμž‘ν•©λ‹ˆλ‹€..


Prototype

일단 ν•œλ²ˆμ— 정리λ₯Ό ν•΄λ³΄μžλ©΄

Prototype : ν”„λ‘œν† νƒ€μž… 객체둜 ν•˜μœ„ κ°μ²΄μ—κ²Œ μžμ‹ μ˜ ν”„λ‘œνΌν‹°μ™€ λ©”μ„œλ“œλ₯Ό 상속함
[[Prototype]]: ν”„λ‘œν† νƒ€μž… 객체λ₯Ό κ°€λ¦¬ν‚€λŠ” λ‚΄λΆ€μŠ¬λ‘―
__proto__ : ν”„λ‘œν† νƒ€μž…μ— μ ‘κ·Όν•˜κΈ° μœ„ν•œ μ ‘κ·Όμž ν”„λ‘œνΌν‹° [[Prototype]] λ‚΄λΆ€ μŠ¬λ‘―μ— κ°„μ ‘μ μœΌλ‘œ μ ‘κ·Όν•˜κ²Œ 함

ν”„λ‘œν† νƒ€μž…

μ–΄λ–€ 객체의 μƒμœ„ 객체 역할을 ν•˜λŠ” 객체둜 ν•˜μœ„ κ°μ²΄μ—κ²Œ μžμ‹ μ˜ ν”„λ‘œνΌν‹°μ™€ λ©”μ„œλ“œλ₯Ό μƒμ†ν•œλ‹€.
JSλŠ” ν”„λ‘œν† νƒ€μž…μ„ 기반으둜 상속을 κ΅¬ν˜„ν•œλ‹€.

[[Prototype]]

λͺ¨λ“  객체가 가진 λ‚΄λΆ€μŠ¬λ‘―
ν”„λ‘œν† νƒ€μž… 객체λ₯Ό 가리킨닀

__proto__ν”„λ‘œνΌν‹°

Object.prototype의 μ ‘κ·Όμž ν”„λ‘œνΌν‹°
λͺ¨λ“  κ°μ²΄λŠ” protoλ₯Όν†΅ν•΄ μžμ‹ μ˜ ν”„λ‘œν† νƒ€μž…μ— μ ‘κ·Ό κ°€λŠ₯ν•˜λ‹€.

  • λͺ¨λ“ κ°μ²΄κ°€ 가지고 있음
  • 객체가 μžμ‹ μ˜ ν”„λ‘œν† νƒ€μž…μ— κ°„μ ‘μ μœΌλ‘œ μ ‘κ·Όν•˜κΈ° μœ„ν•΄ μ‚¬μš©ν•˜λŠ” 것
    λͺ¨λ“  κ°μ²΄λŠ” 상속을 톡해 __proto__ μ‚¬μš© κ°€λŠ₯
    const obj = {} obj.__proto__

Object.prototype

λͺ¨λ“  κ°μ²΄λŠ” ν”„λ‘œν† νƒ€μž… 체인에 λ¬Άμ—¬μžˆλŠ”λ° JS엔진은 객체의 ν”„λ‘œνΌν‹°μ— μ ‘κ·Όν•  λ•Œ ν•΄λ‹Ή 값이 μ—†μœΌλ©΄ __proto__μ ‘κ·Όμž ν”„λ‘œνΌν‹°κ°€ κ°€λ¦¬ν‚€λŠ” μ°Έμ‘°λ₯Ό 따라 μžμ‹ μ˜ λΆ€λͺ¨ 역할을 ν•˜λŠ” 객체의 ν”„λ‘œν† νƒ€μž…μ„ νƒμƒ‰ν•œλ‹€.

ν”„λ‘œν† νƒ€μž… 객체

  • λͺ¨λ“  객체가 가진 것
  • ν•˜μœ„ κ°μ²΄μ—κ²Œ μƒμœ„ 객체의 곡유 ν”„λ‘œνΌν‹°(+λ©”μ„œλ“œ) 곡유
  • μƒμ†μ˜ κ°œλ…μ„ κ΅¬ν˜„

prototype ν”„λ‘œνΌν‹°

μƒμ„±μž ν•¨μˆ˜μ˜ μΈμŠ€ν„΄μŠ€ ν”„λ‘œν† νƒ€μž…μ„ κ°€λ¦¬ν‚€λŠ” 것

  • ν•¨μˆ˜ 객체가 가지고 있음 (μƒμ„±μžν•¨μˆ˜λ‘œ λ§Œλ“€μ–΄ 지지 μ•Šμ€ ν™”μ‚΄ν‘œν•¨μˆ˜,μΆ•μ•½λ©”μ„œλ“œλŠ” μ—†λ‹€)
  • μƒμ„±μž ν•¨μˆ˜κ°€ μΈμŠ€ν„΄μŠ€μ˜ ν”„λ‘œν† νƒ€μž…μ„ ν• λ‹Ήν•˜κΈ° μœ„ν•΄ μ‚¬μš©

prototypeν”„λ‘œνΌν‹°μ™€ proto

//prototypeν”„λ‘œνΌν‹° === __proto__μ ‘κ·Όμž ν”„λ‘œνΌν‹°
foo.prototype === foo1.__proto__


ν”„λ‘œν† νƒ€μž… 체인

객체의 ν”„λ‘œνΌν‹°λ‚˜ λ©”μ„œλ“œμ— μ ‘κ·Όν•  λ•Œ μ—†μœΌλ©΄ ν”„λ‘œν† νƒ€μž… 체인을 따라 ν”„λ‘œν† νƒ€μž…μ˜ ν”„λ‘œνΌν‹°μ™€ λ©”μ„œλ“œλ₯Ό μ°¨λ‘€κ³  κ²€μƒ‰ν•˜κ²Œ λœλ‹€.

πŸ‘€ κΆκΈˆν–ˆλ˜ μ§ˆλ¬Έλ“€ 정리

❓ λ¦¬ν„°λŸ΄ λ°©μ‹μ˜ ν”„λ‘œν† νƒ€μž…μ€?

λ¦¬ν„°λŸ΄λ‘œ μƒμ„±λœ κ°μ²΄λŠ” ν”„λ‘œν† νƒ€μž…μ€ 쑴재, constructorν”„λ‘œνΌν‹°κ°€ κ°€λ¦¬ν‚€λŠ” μƒμ„±μž ν•¨μˆ˜ == 객체λ₯Ό μƒμ„±ν•œ ν•¨μˆ˜ 라고 ν•  수 μ—†λ‹€. λ‹€λ§Œ 결둠적으둜 μƒμ„±μž ν•¨μˆ˜λ‘œ λ§Œλ“€μ–΄μ§„ 객체와 λ™μΌν•œ 역할을 ν•˜κΈ° λ•Œλ¬Έμ— λ¦¬ν„°λŸ΄ ν‘œκΈ°λ²•μœΌλ‘œ μƒμ„±λœ κ°μ²΄λ“€μ˜ ν”„λ‘œν† νƒ€μž…μ€ 각각의 μƒμ„±μž ν•¨μˆ˜λ₯Ό 가리킨닀.

❓ ν”„λ‘œν† νƒ€μž… 체인은 λ­”κ°€μš”?

JS엔진이 객체의 ν”„λ‘œνΌν‹°λ₯Ό μ°Ύμ„λ•Œ ν•΄λ‹Ή 객체에 μ°ΎλŠ” ν”„λ‘œνΌν‹°κ°€ μ—†μœΌλ©΄ μ ‘κ·Όμž protoλ₯Ό λ”°λΌμ„œ λΆ€λͺ¨μ˜ ν”„λ‘œν† νƒ€μž…μ˜ ν”„λ‘œνΌν‹°λ₯Ό 순차적으둜 κ²€μƒ‰ν•˜λŠ” ꡬ쑰λ₯Ό λ§ν•œλ‹€.

β“ν”„λ‘œν† νƒ€μž… λ‚΄λΆ€ μŠ¬λ‘―μ— 직접 μ ‘κ·Όν•  수 μ—†λŠ” μ΄μœ λŠ” λ¬΄μ—‡μΈκ°€μš”?

ν”„λ‘œν† νƒ€μž… 체인의 μˆœν™˜μ°Έμ‘°λ₯Ό 막기 μœ„ν•΄μ„œμΈλ°μš”,

λ§Œμ•½ 직접 ν”„λ‘œν† νƒ€μž…μ—(λ‚΄λΆ€μŠ¬λ‘―μ— )μ ‘κ·Όν•˜μ—¬ 섀정이 κ°€λŠ₯ν•˜λ‹€λ©΄ μˆœν™˜μ°Έμ‘°κ°€ 일어날 수 있고 그러면 ν”„λ‘œν† νƒ€μž…μ²΄μΈμ— 따라 JS 엔진이 탐색할 λ•Œ λ¬΄ν•œλ£¨ν”„μ— 빠질 수 있기 λ•Œλ¬Έμ— protoμ ‘κ·Όμž ν”„λ‘œνΌν‹°λ₯Ό 톡해 μ ‘κ·Όν•˜μ—¬ κ΅μ²΄ν•˜λ„λ‘ ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€.

사싀 어쨋든 protoλ₯Ό 직접 μ‚¬μš©ν•˜λŠ” 것은 ꢌμž₯ν•˜μ§€ μ•ŠλŠ”λ°, λͺ¨λ“  객체가 protoλ₯Ό μ‚¬μš©ν•  수 μžˆμ§€ μ•ŠκΈ° λ•Œλ¬Έμž…λ‹ˆλ‹€.

objλŠ” ν”„λ‘œν† νƒ€μž… 체인의 쒅접이닀. λ”°λΌμ„œ Object.__proto__λ₯Ό 상속받을 수 μ—†λ‹€.
const obj = Object.create(null)

ν‚€μ›Œλ“œλ§Œ μ •λ¦¬ν•˜μžλ©΄,

ν•¨μˆ˜λŠ” 일급객체이닀

μΌκΈ‰κ°μ²΄μ˜ 쑰건
ν•¨μˆ˜μ˜ λ§€κ°œλ³€μˆ˜,λ°˜ν™˜κ°’ κ°€λŠ₯, λŸ°νƒ€μž„μ— 생성 κ°€λŠ₯, λ³€μˆ˜μ— μ €μž₯ κ°€λŠ₯
ν•¨μˆ˜ν˜• ν”„λ‘œκ·Έλž˜λ°μ„ κ°€λŠ₯ν•˜κ²Œ ν•œλ‹€.
μΌλ°˜κ°μ²΄μ™€ λ‹€λ₯΄κ²Œ ν•¨μˆ˜ 고유의 ν”„λ‘œνΌν‹°λ₯Ό κ³ μœ ν•œλ‹€.
ν•¨μˆ˜κ°€κ°€μ§„ 고유의 ν”„λ‘œνΌν‹°

arguments: ν•¨μˆ˜ 인자의 μ΄ν„°λŸ΄ 및 μœ μ‚¬λ°°μ—΄κ°μ²΄
length: λ§€κ°œλ³€μˆ˜μ˜ 개수
name: ν•¨μˆ˜ 객체λ₯Ό κ°€λ¦¬ν‚€λŠ” μ‹λ³„μž κ°’ (!=ν•¨μˆ˜ 이름)

[[Prototype]]

λͺ¨λ“  객체가 가진 λ‚΄λΆ€μŠ¬λ‘―
ν”„λ‘œν† νƒ€μž… 객체λ₯Ό 가리킨닀
protoλŠ” ν”„λ‘œν† νƒ€μž… 객체에 μ ‘κ·Όν•˜κΈ° μœ„ν•΄ μ‚¬μš©ν•˜λŠ” μ ‘κ·Όμž ν”„λ‘œνΌν‹°

prototype ν”„λ‘œνΌν‹°

μƒμ„±μžν•¨μˆ˜κ°€ κ°€λŠ₯ν•œ 객체가 μ†Œμœ ν•˜λŠ” ν”„λ‘œνΌν‹°
constructor만이 μ†Œμœ ν•˜λŠ” ν”„λ‘œνΌν‹°

 

μš”μ¦˜ 글을 velog에도 올리고 μžˆλŠ”λ° 같이 μ˜¬λ €λ†“μ•˜λ‹€. Tami의TILAND