๐Ÿชด ์„ฑ์žฅ์ผ์ง€

์ฑ… ํ–‰๋ณตํ•œ ์ด๊ธฐ์ฃผ์˜์ž(์›จ์ธ ๋‹ค์ด์–ด)์˜ ๋‚ด์šฉ์— ์ž๊ทน๋ฐ›์•„ ์‹œ์ž‘ํ•˜๋Š” ์†Œ๋ฐ•ํ•œ ์„ฑ์žฅ๊ธฐ๋ก

์‚ด์•„์žˆ๋Š” ๊ฝƒ๊ณผ ์ฃฝ์€ ๊ฝƒ์€ ์–ด๋–ป๊ฒŒ ๊ตฌ๋ณ„ํ•˜๋Š”๊ฐ€?
์„ฑ์žฅํ•˜๊ณ  ์žˆ๋Š” ๊ฒƒ์ด ์‚ด์•„ ์žˆ๋Š” ๊ฒƒ์ด๋‹ค.
์ƒ๋ช…์˜ ์œ ์ผํ•œ ์ฆ๊ฑฐ๋Š” ์„ฑ์žฅ์ด๋‹ค!

๐ŸŒณ ํ‚ค์›Œ๋“œ ์ตœ๋Œ€ํ•œ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ •๋ฆฌ, ์ถ”ํ›„์— ๋ณด๋ฉด์„œ ์Šค์Šค๋กœ ์„ค๋ช…

โญโญโญ JavaScript ํ”„๋กœํ† ํƒ€์ž…

๊ฐœ๋…

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ํด๋ž˜์Šค ๊ธฐ๋ฐ˜ ์–ธ์–ด๊ฐ€ ์•„๋‹Œ ํ”„๋กœํ† ํƒ€์ž… ๊ธฐ๋ฐ˜ ์–ธ์–ด

  • prototype : ์ƒ์„ฑ์ž(Constructor)๊ฐ€ ๊ฐ–๋Š” ํ”„๋กœํผํ‹ฐ๋กœ, ํ•ด๋‹น ์ƒ์„ฑ์ž์˜ method๊ฐ€ ๋‹ด๊ธด ๊ฐ์ฒด(object)
  • __proto__ : new ์—ฐ์‚ฐ์ž๋กœ ์ƒ์„ฑ์ž๋ฅผ ํ˜ธ์ถœํ•ด์„œ ๋งŒ๋“ค์–ด์ง„ ์ธ์Šคํ„ด์Šค(instance)๊ฐ€ ๊ฐ–๋Š” ํ”„๋กœํผํ‹ฐ๋กœ, ์ƒ์„ฑ์ž์˜ prototype์„ ์ฐธ์กฐํ•˜๋Š” ๊ฐ์ฒด
var instance = new Constructor();

instance.__proto__ === Constructor.prototype;
// __proto__๊ฐ€ prototype์„ ์ฐธ์กฐํ•˜๊ธฐ ๋•Œ๋ฌธ
instance.__proto__ === Object.getPrototypeOf(instance);
// ์‚ฌ์‹ค ๊ฐ€๊ธ‰์ ์ด๋ฉด Object.getPrototypeOf()๋ฅผ ์‚ฌ์šฉํ•˜๋„๋ก ํ•˜์ž

new ์—ฐ์‚ฐ์ž๋กœ Constructor๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด instance๊ฐ€ ๋งŒ๋“ค์–ด์ง€๊ณ , ์ด instance์˜ ์ƒ๋žต ๊ฐ€๋Šฅํ•œ ํ”„๋กœํผํ‹ฐ์ธ __proto__๋Š” Constructor์˜ prototype์„ ์ฐธ์กฐํ•จ

// ๋‹ค์Œ 5๊ฐ€์ง€๋Š” ๋ชจ๋‘ ์ƒ์„ฑ์ž(Constructor)๋ฅผ ๊ฐ€๋ฆฌํ‚ต๋‹ˆ๋‹ค.
[Constructor] // ์ƒ์„ฑ์ž ๊ทธ ์ž์ฒด
[Constructor].prototype.constructor // ์ƒ์„ฑ์ž์˜ ํ”„๋กœํ† ํƒ€์ž…์˜ ์ƒ์„ฑ์ž
[instance].__proto__.constructor // ์ธ์Šคํ„ด์Šค์˜ __proto__๊ฐ€ ๊ณง ์ƒ์„ฑ์ž์˜ ํ”„๋กœํ† ํƒ€์ž…์„ ์ฐธ์กฐํ•˜๋ฏ€๋กœ
[instance].constructor // __proto__๋Š” ์ƒ๋žต๊ฐ€๋Šฅ
Object.getPrototypeOf([instance]).constructor

ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ

์–ด๋–ค ๋ฐ์ดํ„ฐ์˜ __proto__ ํ”„๋กœํผํ‹ฐ ๋‚ด๋ถ€์— ๋‹ค์‹œ __proto__ ํ”„๋กœํผํ‹ฐ๊ฐ€ ์—ฐ์‡„์ ์œผ๋กœ ์ด์–ด์ง„ ๊ฒƒ
์ด ์ฒด์ธ์„ ๋”ฐ๋ผ๊ฐ€๋ฉฐ ๊ฐ์ฒด๋ฅผ ๊ฒ€์ƒ‰ํ•˜๋Š” ๊ฒƒ์„ ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ์ด๋ผ๊ณ  ํ•จ

๋ฉ”์„œ๋“œ ์˜ค๋ฒ„๋ผ์ด๋“œ

์Šค์ฝ”ํ”„ ์ฒด์ธ์—์„œ์ฒ˜๋Ÿผ, ํŠน์ • ์ธ์Šคํ„ด์Šค์—์„œ ์–ด๋–ค ๋ฉ”์„œ๋“œ๋ฅผ ์‹คํ–‰ํ–ˆ์„ ๋•Œ ๊ฐ€๊นŒ์šด __proto__์—์„œ ๋จผ์ € ์ฐพ์•„์„œ ๊ทธ ๋ฉ”์„œ๋“œ๋ฅผ ์‹คํ–‰

var test = new Array(5);
test.__proto__; // Array์˜ prototype์„ ์ฐธ์กฐํ•˜๋ฏ€๋กœ Array ๊ด€๋ จ ๋ฉ”์„œ๋“œ๊ฐ€ ์žˆ์Œ
test.__proto__.__proto__; // test.__proto__๊ฐ€ ๊ฒฐ๊ตญ Object์ด๊ธฐ์— Object์˜ prototype์„ ์ฐธ์กฐํ•˜๋ฏ€๋กœ Object ๊ด€๋ จ ๋ฉ”์„œ๋“œ๊ฐ€ ์žˆ์Œ
var Dog = function (name) {
  this.name = name;
  this.bark = function () {
    return this.name + ' ๋ฉ๋ฉ!';
  };
};

// ๊ฐ™์€ ์ด๋ฆ„์˜ ๋ฉ”์„œ๋“œ๋ฅผ prototype์— ์ถ”๊ฐ€
Dog.prototype.bark = function () {
  return this.name + ' ์™ˆ์™ˆ!';
};

var hodu = new Dog('hodu');
hodu.bark(); // 'hodu ๋ฉ๋ฉ!'์„ ๋ฐ˜ํ™˜ -> prototype์— ์žˆ๋Š” ๋ฉ”์„œ๋“œ๋Š” ๋ฎ์–ด์ง(์ธ์Šคํ„ด์Šค์— ์ง์ ‘ ์ ‘๊ทผ์ด ๋” ๊ฐ€๊น๊ธฐ ๋•Œ๋ฌธ)

hodu.__proto__.bark();
// undefined -> ๋ฎ์–ด์ง€๋Š” ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์— ์™ˆ์™ˆ ๋ฉ”์„œ๋“œ๊ฐ€ ์‚ฌ๋ผ์ง€๋Š” ๊ฑด ์•„๋‹˜! ๋‹จ, this๊ฐ€ hodu๊ฐ€ ์•„๋‹Œ hodu.__proto__๋ฅผ ๊ฐ€๋ฆฌํ‚ค๊ธฐ ๋•Œ๋ฌธ์— undefined
hodu.__proto__.bark.call(hodu); // 'hodu ์™ˆ์™ˆ!' ๋ฐ˜ํ™˜

ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ ๊ตฌ์กฐ ์ƒ, ์–ด๋–ค ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋“  ๊ทธ ๋์—๋Š” Object.prototype์„ ์ฐธ์กฐํ•˜๊ฒŒ ๋˜์–ด์žˆ์Œ ๊ทธ๋Ÿฌ๋ฏ€๋กœ Object.prototype์— Object๋งŒ์˜ ๋ฉ”์„œ๋“œ๋ฅผ ๋‘˜ ์ˆ˜๊ฐ€ ์—†์Œ(๊ทธ๋Ÿฌ๋ฉด ๋ฌธ์ž์—ด, ์ˆซ์žํ˜•, ๋ฐฐ์—ด ๋“ฑ๋“ฑ ๋ชจ๋“  ์ž๋ฃŒํ˜•์ด ๊ทธ ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉ๊ฐ€๋Šฅ -> ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ) ์ด๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด Object ์ž์ฒด์— static method๋กœ ๋ถ€์—ฌํ•  ์ˆ˜ ๋ฐ–์— ์—†๋Š” ๋ฉ”์„œ๋“œ๋“ค์ด ์กด์žฌ ex) Object.freeze()

๋‹ค์ค‘ ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ

์œ„์—์„œ ๋ณธ ๊ฒƒ์ฒ˜๋Ÿผ ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ์€ ๊ณ„์† ์ด์–ด์งˆ ์ˆ˜ ์žˆ์Œ(๋ณดํ†ต ์ •์˜๋œ ๋ฐ์ดํ„ฐ ํƒ€์ž…์€ ํ•ด๋ด์•ผ 2์ฒด์ธ ์ •๋„ ex. Array๋Š” Object๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•˜๊ธฐ์— Array -> Object๋กœ ์ฒด์ด๋‹)
์ด๋ฅผ ํ™œ์šฉํ•˜๋ฉด ์กฐ๊ธˆ ์žฌ๋ฏธ์žˆ๋Š” ์ง“์„ ํ•ด๋ณผ ์ˆ˜ ์žˆ์Œ

var test = { 0: 'a', 1: 'b', 2: 'c', length: 3 }; // ์ด๋Ÿฐ ์œ ์‚ฌ๋ฐฐ์—ด์ด ์žˆ์„ ๋•Œ
test.__proto__ = []; // test์˜ __proto__๊ฐ์ฒด๋ฅผ ๋ฐฐ์—ด ๋ฆฌํ„ฐ๋Ÿด๋กœ ๋ฐ”๊ฟ”๋ฒ„๋ฆฌ๋ฉด?

// [].__proto__๋Š” Array์˜ prototype์„ ์ฐธ์กฐํ•˜๋ฏ€๋กœ Array์˜ ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•ด์ง
test.push(11); // ๋ฐฐ์—ด ํ˜•ํƒœ๊ฐ€ ๋˜๋ฉด์„œ ๋ฐฐ์—ด์˜ ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋จ!