[JavaScript] OOP - 3. Prototypes


0. Table of Contents

  1. What is OOP
  2. Objects
  3. Prototypes ๐Ÿ‘‰ Current Page
  4. Prototypical Inheritance (TBD)
  5. ES6 Classes (TBD)
  6. ES6 Modules (TBD)

1. ์ƒ์† (Inheritance)

์ƒ์†์€ ๊ฐ์ฒด๊ฐ€ ๋‹ค๋ฅธ ๊ฐ์ฒด์˜ ์†์„ฑ๊ณผ ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” OOP์˜ ํ•ต์‹ฌ ๊ฐœ๋… ์ค‘ ํ•˜๋‚˜๋‹ค.
์ƒ์†์„ ์ด์šฉํ•˜๋ฉด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๋‹ค๋ฅธ ๋ถ€๋ถ„์—์„œ ์ฝ”๋“œ๋ฅผ ์‰ฝ๊ฒŒ ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

  • Bad Example

    • Circle Class๊ฐ€ ์žˆ๊ณ  ์ด Class๋Š” computeOptimumLocation() ์ด๋ผ๋Š” ๋ฉ”์†Œ๋“œ๋ฅผ ๊ฐ€์ง„๋‹ค๊ณ  ํ•˜์ž.
    • ๊ทธ๋ฆฌ๊ณ  Square Class๊ฐ€ ์žˆ๊ณ  ์ด Class๋„ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ computeOptimumLocation() ์ด๋ผ๋Š” ๋ฉ”์†Œ๋“œ๋ฅผ ๊ฐ€์ง„๋‹ค๊ณ  ํ•˜์ž.
    • Circle Class์™€ Square Class๊ฐ€ ๋˜‘๊ฐ™์€ ์—ญํ• ์„ ํ•˜๋Š” ๋ฉ”์†Œ๋“œ๋ฅผ ๊ฐ๊ฐ ๋”ฐ๋กœ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์…ˆ์ด๋‹ค.
    • ๊ทธ๋Ÿฐ๋ฐ ๋งŒ์•ฝ์— computeOptimumLocation์— ๋ฒ„๊ทธ๊ฐ€ ์žˆ๊ฑฐ๋‚˜ ์ฝ”๋“œ๋ฅผ ๊ฐœ์„ ํ•˜๊ณ  ์‹ถ์œผ๋ฉด ๋™์ผํ•œ ์ฝ”๋“œ๋ฅผ ์—ฌ๋Ÿฌ ๋ฒˆ ๋ณ€๊ฒฝํ•ด์•ผ ํ•œ๋‹ค.
    • ์ด๋Ÿฐ ๋ฌธ์ œ๋Š” ์ƒ์†์„ ์ด์šฉํ•˜๋ฉด ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค. ์•„๋ž˜์˜ Good Example์„ ๋ณด์ž.

  • Good Example

    • Shape๋ผ๋Š” Class๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ์ด Class์— computeOptimumLocation() ์ด๋ผ๋Š” ๋ฉ”์†Œ๋“œ๋ฅผ ์ •์˜ํ•œ๋‹ค.
    • Circle, Square Class๊ฐ€ ์ด๋ฅผ ์ƒ์†๋ฐ›๋„๋ก ํ•œ๋‹ค.
    • ์—ฌ๊ธฐ์—์„œ Shape Class๋Š” Base/Super/Parent Class ๋กœ ์—ฌ๊ธด๋‹ค.
    • Circle, Square Class๋Š” Derived/Sub/Child Class๋กœ ์—ฌ๊ธด๋‹ค.
    • ์ด๋Ÿฌํ•œ ์ƒ์† ๊ด€๊ณ„๋ฅผ IS-A ๊ด€๊ณ„๋ผ๊ณ  ํ•œ๋‹ค.

์ง€๊ธˆ๊นŒ์ง€ ์œ„์—์„œ ์„ค๋ช…ํ•œ ๊ฒƒ์€ Class ์ƒ์†์— ๋Œ€ํ•œ ์ •์˜๋‹ค. ํ•˜์ง€๋งŒ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” ์‚ฌ์‹ค Class๊ฐ€ ์—†๊ณ  Object๋งŒ ์กด์žฌํ•œ๋‹ค. Prototype ์ƒ์†์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์ž.

2. Prototypes and Prototypical Inheritance

2-1. ํ”„๋กœํ† ํƒ€์ž…?

  • example

    • circle ๊ฐ์ฒด, shape ๊ฐ์ฒด๊ฐ€ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•œ๋‹ค.
    • ๋ชจ๋“  ๊ณตํ†ต ๋ฉ”์†Œ๋“œ๋ฅผ shape ๊ฐ์ฒด์— ์ถ”๊ฐ€ํ•œ๋‹ค. ex) computeOptimumLocation()
    • circle ๊ฐ์ฒด๋ฅผ shape ๊ฐ์ฒด์— ์—ฐ๊ฒฐํ•œ๋‹ค. โ†’ shape ๊ฐ์ฒด๋ฅผ circle ๊ฐ์ฒด์˜ ํ”„๋กœํ† ํƒ€์ž…์œผ๋กœ ์—ฌ๊ธด๋‹ค.
  • prototype์€ ๋ณธ์งˆ์ ์œผ๋กœ ๋‹ค๋ฅธ ๊ฐ์ฒด์˜ ๋ถ€๋ชจ์ด๋‹ค.
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ชจ๋“  ๊ฐ์ฒด(์‹ฑ๊ธ€ ๊ฐ์ฒด๋ฅผ ์ œ์™ธํ•˜๊ณ )๋Š” ํ”„๋กœํ† ํƒ€์ž…์„ ๊ฐ€์ง„๋‹ค.

2-2. Prototypical Inheritance

  • example

    • let x = {}; ๋ฅผ ์„ ์–ธ,ํ• ๋‹นํ•œ ํ›„ x ๋ฅผ ์ฐ์–ด๋ณด๋ฉด __proto__ ์†์„ฑ์„ ๊ฐ–๊ณ  ์žˆ๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.
    • __proto__ ๋Š” ์—ฌ๋Ÿฌ properties์™€ methods๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. ex) constructor, toString
    • x.__proto__.toString() ์œผ๋กœ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, x.toString() ์œผ๋กœ ๋ฐ”๋กœ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค.
    • ๋ชจ๋“  ๊ฐ์ฒด๋Š” constructor ์†์„ฑ์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค. ์ด constructor์†์„ฑ์€ ํ•ด๋‹น ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋œ ํ•จ์ˆ˜๋ฅผ ์ฐธ์กฐํ•œ๋‹ค.
    • ์šฐ๋ฆฌ๋Š” x ๊ฐ์ฒด๋ฅผ ๋ฉ”๋ชจ๋ฆฌ์— ๊ฐ–๊ณ ์žˆ๊ณ  x ๊ฐ์ฒด๋Š” ๋˜ ๋‹ค๋ฅธ ๊ฐ์ฒด๋ฅผ ํ–ฅํ•œ ๋งํฌ๋ฅผ ๊ฐ–๊ณ  ์žˆ๋‹ค. ์ด๋ฅผ ํ”„๋กœํ† ํƒ€์ž…์ด๋ผ ํ•œ๋‹ค.
  • x๋Š” ๋นˆ ๊ฐ์ฒด์ธ๋ฐ ์–ด๋–ป๊ฒŒ x.toString() ๊ณผ ๊ฐ™์ด ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์„๊นŒ?

    • ์ž๋ฐ”์ŠคํŠธ๋ฆฝํŠธ ์—”์ง„์ด ์ฒ˜์Œ์—๋Š” x์˜ property์™€ method๋ฅผ ์ฐพ๋Š”๋‹ค.
    • ์ฐพ์ง€ ๋ชปํ•˜๋ฉด, ํ•ด๋‹น ๊ฐ์ฒด์ธ x์˜ ํ”„๋กœํ† ํƒ€์ž…์—์„œ ์ฐพ๋Š”๋‹ค.
    • ํ”„๋กœํ† ํƒ€์ž…์—์„œ๋„ ๊ณ„์† ์ฐพ์ง€ ๋ชปํ•˜๋ฉด ํ”„๋กœํ† ํ†ผ์ž…์˜ ํ”„๋กœํ† ํƒ€์ž…์—์„œ ์ฐพ๋Š”๋‹ค. ์ตœ์ƒ์œ„ ๋ฃจํŠธ ๊ฐ์ฒด๊นŒ์ง€ ์˜ฌ๋ผ๊ฐ€๋ฉฐ ์ฐพ๋Š”๋‹ค.
    • ์ด๊ฒƒ์ด Prototypical Inheritance ์ด๋‹ค.
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” ๊ฐ์ฒด์˜ ์†์„ฑ ๋˜๋Š” ๋ฉ”์„œ๋“œ์— ์ ‘๊ทผํ•˜๋ ค ํ•  ๋•Œ, ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ์„ ์ด์šฉํ•ด์„œ ํ•ด๋‹น ์†์„ฑ ๋˜๋Š” ๋ฉ”์„œ๋“œ๋ฅผ ์ฐพ๋Š”๋‹ค.
  • ํ”„๋กœํ† ํƒ€์ž…์€ ํ‰๋ฒ”ํ•œ ํ•˜๋‚˜์˜ ๊ฐ์ฒด์ผ ๋ฟ์ด๋‹ค.
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ์˜ ์ƒ์†์€ โ€œ์—ฐ๊ฒฐโ€์ด๋‹ค

    let person = { name: 'Jessie' };
    console.log(person.toString()); // [object Object]
    for (let key in person) {
      console.log(key); // name
    console.log(Object.keys(person)); // ["name"]
    • person ์—๋Š” ์†์„ฑ์œผ๋กœ name๋งŒ ๊ฐ€์ง€๊ณ  ์žˆ์ง€๋งŒ, __proto__ ๋ฅผ ํ†ตํ•ด toString() ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
    • ๊ทธ๋Ÿฌ๋‚˜ for-in ๋ฌธ์œผ๋กœ person์ด ๊ฐ€์ง„ key๋ฅผ ์ถœ๋ ฅํ•ด๋ณด๋ฉด name ๋งŒ ์ถœ๋ ฅ๋œ๋‹ค. ์—ฌ๊ธฐ์„œ๋Š” person์ด ์ง์ ‘์ ์œผ๋กœ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์†์„ฑ๋งŒ ์ถœ๋ ฅ๋˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
    • console.log(Object.keys(person)); ๋„ ์ด์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์ง์ ‘์ ์œผ๋กœ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์†์„ฑ๋งŒ ์ถœ๋ ฅ๋˜์–ด [โ€œnameโ€] ์ด ์ถœ๋ ฅ๋œ๋‹ค.
    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜์„œ์˜ ์ƒ์† ๊ฐœ๋…์€ ๋ถ€๋ชจ์˜ ๊ฒƒ์„ ๊ทธ๋Œ€๋กœ ์ƒ์†์œผ๋กœ ๋ฐ›์•„์™€์„œ ๊ฐ€์ ธ์˜ค๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ โ€œ์—ฐ๊ฒฐโ€์˜ ๊ฐœ๋…์ด๋‹ค

3. Constructor Prototypes

  • TBD

4. Prototype vs. Instance Members

  • TBD

5. Iterating Instance and Prototype Members

  • TBD

6. Avoid Extending the Built-in Objects

  • TBD


๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ปFrontend Developer