Tech BlogResume

Prototype Pattern

JavaScript κΈ°μ€€μœΌλ‘œ μ„€λͺ…ν•©λ‹ˆλ‹€.

의미

객체λ₯Ό λ³΅μ œν•˜μ—¬ μƒμ„±ν•¨μœΌλ‘œμ¨ μƒˆλ‘œμš΄ 객체λ₯Ό λ§Œλ“€μ–΄λ‚΄λŠ” νŒ¨ν„΄μ΄λ‹€.

JavaScript Prototype

JavaScriptμ—μ„œλŠ” λͺ¨λ“  객체가 자체적으둜 ν”„λ‘œν† νƒ€μž…μ„ 가진닀. (ν”„λ‘œν† νƒ€μž… 기반 언어라고 λΆˆλ¦¬λŠ” μ΄μœ μ΄λ‹€.) 객체λ₯Ό 생성할 λ•Œ ν•΄λ‹Ή 객체의 ν”„λ‘œν† νƒ€μž…μ„ 기반으둜 μƒˆλ‘œμš΄ 객체λ₯Ό λ§Œλ“€ 수 있으며, μ΄λŠ” 클래슀 객체 생성 μ‹œμ—λ„ λ§ˆμ°¬κ°€μ§€μ΄λ‹€. ν΄λž˜μŠ€λŠ” ν”„λ‘œν† νƒ€μž…μ„ 더 μ‰½κ²Œ λ‹€λ£° 수 μžˆλ„λ‘ ꡬ문적 섀탕(syntactic sugar) 역할을 ν•  뿐 λ‚΄λΆ€μ μœΌλ‘œλŠ” ν”„λ‘œν† νƒ€μž… 기반의 상속을 μ‚¬μš©ν•œλ‹€.

κΈ°μ‘΄ 객체의 속성은 객체 μƒμ„±μžμ˜ prototype ν”„λ‘œνΌν‹°μ— μ •μ˜λœλ‹€. Object.getPrototypeOf(), Object.setPrototypeOf() λ©”μ†Œλ“œλ₯Ό 톡해 prototype을 μ‘°νšŒΒ·λ³€κ²½ν•  수 μžˆλ‹€.

Prototype Chain

객체가 ν”„λ‘œνΌν‹°λ‚˜ λ©”μ„œλ“œμ— μ ‘κ·Όν•˜λ €κ³  ν•  λ•Œ, ν•΄λ‹Ή 객체에 κ·Έ ν”„λ‘œνΌν‹°λ‚˜ λ©”μ„œλ“œκ°€ μ—†λ‹€λ©΄ μžλ™μœΌλ‘œ μƒμœ„ ν”„λ‘œν† νƒ€μž… κ°μ²΄μ—μ„œ κ²€μƒ‰ν•œλ‹€. 이λ₯Ό ν”„λ‘œν† νƒ€μž… 체인이라고 ν•œλ‹€.

이 λ¬Έμ„œμ—μ„œ ν”„λ‘œν† νƒ€μž… 체인을 μƒμ„±ν•˜λŠ” λ‹€μ–‘ν•œ 방법을 λΉ„κ΅ν•˜λŠ”λ°, μ•„λž˜λŠ” Object.create()둜 μƒμ„±ν•œ μ˜ˆμ‹œμ΄λ‹€.

const dog = {
  bark() {
    console.log(`멍멍!`);
  },
};

const myPet = Object.create(dog);

myPet.bark(); // β†’ 멍멍!

console.log(Object.keys(myPet)); // β†’ []
console.log(Object.keys(Object.getPrototypeOf(myPet))); // β†’ ['bark']

μž₯점

  • ν”„λ‘œν† νƒ€μž… 체인을 톡해 λŒ€μƒ 객체에 ν”„λ‘œνΌν‹°κ°€ 직접 μ„ μ–Έλ˜μ–΄μžˆμ§€ μ•Šμ•„λ„ λ˜λ―€λ‘œ, λ©”λͺ¨λ¦¬λ₯Ό μ ˆμ•½ν•  수 μžˆλ‹€.

단점

μ‹€μ œλ‘œ μ½”λ“œκ°€ μ‹€ν–‰λ˜λŠ” λ™μ•ˆ Object.prototype을 μˆ˜μ •ν•œλ‹€λŠ” 것은 μ„±λŠ₯λ”°μœ„ μ°½λ¬Έλ°–μœΌλ‘œ λ˜μ Έλ²„λ¦°λ‹€λŠ” 것을 λœ»ν•©λ‹ˆλ‹€. μ ˆλŒ€ ν•˜μ§€λ§ˆμ„Έμš”! - JavaScript engine fundamentals: optimizing prototypes

참고 자료

PreviousObserver PatternNextProvider Pattern

Last updated