๐Ÿ˜ฎ ํ”„๋กœํ† ํƒ€์ž… ( prototype )

๋ฐ•์ƒ์€ยท2022๋…„ 6์›” 22์ผ
0

๐Ÿ“€ JavaScript ๐Ÿ“€

๋ชฉ๋ก ๋ณด๊ธฐ
2/12

ํ•ด๋‹น ํฌ์ŠคํŠธ๋Š” ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive 19์žฅ์„ ์ฝ๊ณ  ์ •๋ฆฌํ•˜๋Š” ํฌ์ŠคํŠธ์ž…๋‹ˆ๋‹ค.

๐Ÿง ํ”„๋กœํ† ํƒ€์ž…

์ œ๊ฐ€ ์ดํ•ดํ•œ ํ”„๋กœํ† ํƒ€์ž…์ด๋ž€ ์ƒ์„ฑ์ž ํ•จ์ˆ˜์˜ ์ฐธ์กฐ์™€ ์ƒ์œ„ ํ”„๋กœํ† ํƒ€์ž…์˜ ์ฐธ์กฐ์™€ ๊ณต์œ ํ•  ํ”„๋กœํผํ‹ฐ/๋ฉ”์„œ๋“œ๋“ค์„ ๊ฐ€์ง€๋Š” ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค.

1. ์˜ˆ์‹œ ์ฝ”๋“œ

// ์ƒ์„ฑ์ž ํ•จ์ˆ˜ ( ๊ฒ‰์œผ๋กœ๋Š” ์ผ๋ฐ˜ ํ•จ์ˆ˜์™€ ๋‹ค๋ฅผ๊ฑฐ ์—†์Œ )
// ๊ด€์Šต์ ์œผ๋กœ ์นด๋ฉœ์ผ€์ด์Šค๋ฅผ ์‚ฌ์šฉํ•˜๊ณ , ํ˜ธ์ถœํ•  ๋•Œ ๋ฐ˜๋“œ์‹œ new๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ์ œ์™ธํ•˜๋ฉด ์ผ๋ฐ˜ ํ•จ์ˆ˜์™€ ๋™์ผํ•จ
function Animal(cry) {
  this.cry = cry;

  // ๋น„ํšจ์œจ์ ์ธ ๋ฐฉ๋ฒ• ( ์ƒ์„ฑํ•˜๋Š” ๊ฐ์ฒด๋“ค ๊ฐ๊ฐ์ด "say()"๋ผ๋Š” ๋ฉ”์„œ๋“œ๋ฅผ ๊ฐ€์ง )
  // this.say = () => console.log("๋Œ€์ถฉ ๋™๋ฌผ ์†Œ๋ฆฌ >> ", this.cry);
}

// ์ƒ์„ฑํ•˜๋Š” ๊ฐ์ฒด๋“ค์ด "say()"๋ผ๋Š” ๋ฉ”์„œ๋“œ๋ฅผ ๊ณต์œ ํ•จ ( * ํ™”์‚ดํ‘œ ํ•จ์ˆ˜ ์‚ฌ์šฉํ•˜๋ฉด this๊ฐ€ ์ž˜๋ชป๋œ ๊ฐ’์„ ๊ฐ€๋ฆฌํ‚ด * )
Animal.prototype.say = function () {
  console.log("๋Œ€์ถฉ ๋™๋ฌผ ์†Œ๋ฆฌ >> ", this.cry);
};

// ์ •์ (static) ๋ฉ”์„œ๋“œ ์ •์˜ ( ๊ฐ์ฒด๊ฐ€ ๊ฐ€์ง€๋Š” ๊ฐ’ ์‚ฌ์šฉ ๋ถˆ๊ฐ€๋Šฅ ex) this.cry )
Animal.sleep = () => console.log("์ž”๋‹ค");

// ๊ฐ์ฒด ์ƒ์„ฑ
const dog = new Animal("๋ฉ๋ฉ");

// ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ์„ ์ด์šฉํ•ด์„œ ์ฐพ์€ ๋ฉ”์„œ๋“œ ์‚ฌ์šฉ ( dog --- [[Prototype]] ---> Animal.prototype )
dog.say();

// ์ •์  ๋ฉ”์„œ๋“œ ์‚ฌ์šฉ ( ๊ฐ์ฒด์—์„œ ํ˜ธ์ถœ ๋ถˆ๊ฐ€๋Šฅ )
Animal.sleep();

// dog.__proto__ === Animal.prototype
console.log(Object.getPrototypeOf(dog) === Animal.prototype); // true
// dog.__proto__.__proto__ === Object.prototype
console.log(Object.getPrototypeOf(Object.getPrototypeOf(dog)) === Object.prototype); // true
// dog.__proto__.__proto__.__proto__ === null ... ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ์˜ ์ข…์ 

2. ์˜ˆ์‹œ ์ฝ”๋“œ์˜ ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ

๐Ÿ‘ ์ถ”๊ฐ€ ์ •๋ณด๋“ค

  1. ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋กœ ์‚ฌ์šฉ์ด ๋ถˆ๊ฐ€๋Šฅํ•œ ํ•จ์ˆ˜ ์ฆ‰, non-constructorํ•จ์ˆ˜๋Š” ํ™”์‚ดํ‘œ ํ•จ์ˆ˜, es6 ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•œ ๋ฉ”์„œ๋“œ, ํ”„๋กœํ† ํƒ€์ž…์˜ ๋ฉ”์„œ๋“œ(์œ„ ์˜ˆ์‹œ์—์„œ๋Š” say()) ๋“ค์„ ๋งํ•œ๋‹ค.
    non-constructorํ•จ์ˆ˜๋Š” prototype์ž์ฒด๋ฅผ ์ƒ์„ฑํ•˜์ง€ ์•Š์œผ๋ฉฐ, new ์—ฐ์‚ฐ์ž ์ž์ฒด๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค.
  2. __proto__๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๋ณด๋‹จ Object.getPrototypeOf()์™€ Object.setPrototypeOf()๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.
  3. ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ์˜ ์ข…์ ๊นŒ์ง€ ๊ฐ€์„œ๋„ ํ”„๋กœํผํ‹ฐ/๋ฉ”์„œ๋“œ๋ฅผ ์ฐพ์ง€ ๋ชปํ•˜๋ฉด ์—๋Ÿฌ๊ฐ€ ๋‚˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ undefined๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
  4. ๊ฐ์ฒด์—์„œ ํ”„๋กœํ† ํƒ€์ž… ๋ฉ”์„œ๋“œ๋ฅผ ์ œ๊ฑฐํ•  ์ˆ˜๋Š” ์—†๋‹ค. ์ฆ‰, ํ•˜์œ„์—์„œ ์ƒ์œ„๋ฅผ ์ˆ˜์ •ํ•  ์ˆ˜๋Š” ์—†๋‹ค. ( getter ๊ฐ€๋Šฅ, setter ๋ถˆ๊ฐ€๋Šฅ )
  5. ์ƒ์„ฑ์ž ํ•จ์ˆ˜์™€ ๊ฐ์ฒด์˜ prototype์€ ์ž„์˜๋กœ ๊ต์ฒดํ•  ์ˆ˜ ์žˆ๋‹ค. ( dog.__proto__ = {}์ฒ˜๋Ÿผ ์‚ฌ์šฉ ๊ฐ€๋Šฅ )
  6. instanceOf๋Š” ์–ด๋–ค ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋กœ ์ธํ•ด์„œ ์ƒ์„ฑ๋œ ๊ฐ์ฒด์ธ์ง€์— ์˜ํ•ด์„œ ํŒ๋‹จ๋˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ์— ์กด์žฌํ•˜๋Š”์ง€ ์œ ๋ฌด๋กœ ํŒ๋‹จํ•œ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€