[TIL] 220111

leesyongยท2022๋…„ 1์›” 11์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
146/204
post-thumbnail

๐Ÿ“ ์˜ค๋Š˜ ํ•œ ๊ฒƒ

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

๐Ÿ“š ๋ฐฐ์šด ๊ฒƒ

6. ํ”„๋กœํ† ํƒ€์ž…

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ํ”„๋กœํ† ํƒ€์ž… ๊ธฐ๋ฐ˜ ์–ธ์–ด์ด๋‹ค.
ํด๋ž˜์Šค ๊ธฐ๋ฐ˜ ์–ธ์–ด์—์„œ๋Š” '์ƒ์†'์„ ์‚ฌ์šฉํ•˜์ง€๋งŒ ํ”„๋กœํ† ํƒ€์ž… ๊ธฐ๋ฐ˜ ์–ธ์–ด์—์„œ๋Š” ์–ด๋–ค ๊ฐ์ฒด๋ฅผ ์›ํ˜•์œผ๋กœ ์‚ผ๊ณ  ์ด๋ฅผ ๋ณต์ œ(์ฐธ์กฐ)ํ•จ์œผ๋กœ์จ ์ƒ์†๊ณผ ๋น„์Šทํ•œ ํšจ๊ณผ๋ฅผ ์–ป๋Š”๋‹ค.

1) ํ”„๋กœํ† ํƒ€์ž…์˜ ๊ฐœ๋… ์ดํ•ด

(1) constructor, prototype, instance

prototype / __proto__

์–ด๋–ค ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋ฅผ new ์—ฐ์‚ฐ์ž์™€ ํ•จ๊ป˜ ํ˜ธ์ถœํ•˜๋ฉด
์ƒ์„ฑ์ž ํ•จ์ˆ˜์— ์ •์˜๋œ ๋‚ด์šฉ์„ ๋ฐ”ํƒ•์œผ๋กœ ์ƒˆ๋กœ์šด ์ธ์Šคํ„ด์Šค๊ฐ€ ์ƒ์„ฑ๋œ๋‹ค.

์ด๋•Œ ์ธ์Šคํ„ด์Šค์—๋Š” __proto__๋ผ๋Š” (์ƒ๋žต ๊ฐ€๋Šฅํ•œ) ํ”„๋กœํผํ‹ฐ๊ฐ€ ์ž๋™์œผ๋กœ ๋ถ€์—ฌ๋˜๋Š”๋ฐ
์ด ํ”„๋กœํผํ‹ฐ๋Š” ์ƒ์„ฑ์ž ํ•จ์ˆ˜์˜ prototype์ด๋ผ๋Š” ํ”„๋กœํผํ‹ฐ๋ฅผ ์ฐธ์กฐํ•œ๋‹ค.

์—ฌ๊ธฐ์„œ prototype์€ ๊ฐ์ฒด์ด๊ณ , ์ด๋ฅผ ์ฐธ์กฐํ•˜๋Š” __proto__ ์—ญ์‹œ ๊ฐ์ฒด์ด๋‹ค.
prototype ๊ฐ์ฒด ๋‚ด๋ถ€์— ์ธ์Šคํ„ด์Šค๊ฐ€ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ฉ”์„œ๋“œ๋ฅผ ์ €์žฅํ•˜๋ฉด
์ธ์Šคํ„ด์Šค์—์„œ๋Š” __proto__๋ฅผ ํ†ตํ•ด ์ด ๋ฉ”์„œ๋“œ์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค.

์‹ค๋ฌด์—์„œ๋Š” ๊ฐ€๊ธ‰์  __proto__ ๋Œ€์‹  Object.getPrototypeOf() ํ˜น์€ Object.create()๋ฅผ ์ด์šฉํ•˜๋„๋ก ํ•œ๋‹ค.

์ƒ๋žต ๊ฐ€๋Šฅํ•œ ํ”„๋กœํผํ‹ฐ __proto__

var Person = function (name) {
  this._name = name;
};

Person.prototype.getName = function () {
  return this._name;
}

var suzi = new Person("Suzi");
suzi.__proto__.getName(); // undefined

suzi.__proto__.getName()๊ฐ€ undefined๋ฅผ return ํ–ˆ๋‹ค.
์ด๋Š” getName()์€ ๋ฉ”์„œ๋“œ์ธ๋ฐ ๋ฉ”์„œ๋“œ๋Š” ํ˜ธ์ถœ ์‹œ ๋ฉ”์„œ๋“œ๋ช… ๋ฐ”๋กœ ์•ž์˜ ๊ฐ์ฒด๊ฐ€ ๊ณง this๊ฐ€ ๋˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
์ด ๊ฒฝ์šฐ suzi.__proto__๊ฐ€ this๊ฐ€ ๋˜๋Š”๋ฐ ์ด ๊ฐ์ฒด์—๋Š” _name ํ”„๋กœํผํ‹ฐ๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— undefined๊ฐ€ ๋ฐ˜ํ™˜๋œ ๊ฒƒ์ด๋‹ค.

suzi.getName(); // Suzi

__proto__๋Š” ์ƒ๋žต ๊ฐ€๋Šฅํ•œ ํ”„๋กœํผํ‹ฐ์ด๊ธฐ ๋•Œ๋ฌธ์— ์œ„์™€ ๊ฐ™์ด ์ž‘์„ฑํ•˜๋ฉด Suzi ๊ฐ’์„ ์–ป์„ ์ˆ˜ ์žˆ๋‹ค.
suzi.__proto__์˜ getName ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด์„œ๋„ getName ๋ฉ”์„œ๋“œ ์•ˆ์—์„œ์˜ this๊ฐ€ suzi.__proto__๊ฐ€ ์•„๋‹ˆ๋ผ suzi๋ฅผ ๊ฐ€๋ฆฌํ‚ค๋„๋ก ํ•˜๋Š” ๊ฒƒ์ด๋‹ค.
__proto__๋Š” ์ƒ๋žต ๊ฐ€๋Šฅํ•œ ํ”„๋กœํผํ‹ฐ์ด๊ธฐ ๋•Œ๋ฌธ์— ์ƒ์„ฑ์ž ํ•จ์ˆ˜์˜ prototype์— ์–ด๋–ค ๋ฉ”์„œ๋“œ๋‚˜ ํ”„๋กœํผํ‹ฐ๊ฐ€ ์žˆ๋‹ค๋ฉด, ์ธ์Šคํ„ด์Šค์—์„œ๋„ ๋งˆ์น˜ ์ž์‹ ์˜ ๊ฒƒ์ฒ˜๋Ÿผ ํ•ด๋‹น ๋ฉ”์„œ๋“œ๋‚˜ ํ”„๋กœํผํ‹ฐ์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค.

ํฌ๋กฌ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋กœ ์‚ดํŽด๋ณด๊ธฐ

var arr = [1, 2];
console.dir(arr);
console.dir(Array);

์–ด๋–ค ์ƒ์„ฑ์ž ํ•จ์ˆ˜์˜ ์ธ์Šคํ„ด์Šค๋Š” ํ•ด๋‹น ์ƒ์„ฑ์ž ํ•จ์ˆ˜์˜ ์ด๋ฆ„์„ ํ‘œ๊ธฐํ•จ์œผ๋กœ์จ ํ•ด๋‹น ํ•จ์ˆ˜์˜ ์ธ์Šคํ„ด์Šค์ž„์„ ํ‘œ๊ธฐํ•œ๋‹ค. ex) Array(2), Constructor(name) ๋“ฑ
์ƒ์„ฑ์ž ํ•จ์ˆ˜์˜ prototype๊ณผ ์ธ์Šคํ„ด์Šค์˜ __proto__๊ฐ€ ๋™์ผํ•œ ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค. (์ฑ… ์ฐธ๊ณ )

ํ•œํŽธ, ์ถœ๋ ฅ ๊ฒฐ๊ณผ์—์„œ ์ง™์€์ƒ‰์€ ์—ด๊ฑฐ ๊ฐ€๋Šฅํ•œ ํ”„๋กœํผํ‹ฐ, ์ฆ‰ for in ๋“ฑ์œผ๋กœ ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ ์ „์ฒด์— ์ ‘๊ทผํ•˜๊ณ ์ž ํ•  ๋•Œ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•œ ํ”„๋กœํผํ‹ฐ๋ฅผ ๋งํ•œ๋‹ค.

(2) constructor ํ”„๋กœํผํ‹ฐ

์ƒ์„ฑ์ž ํ•จ์ˆ˜์˜ ํ”„๋กœํผํ‹ฐ์ธ prototype ๊ฐ์ฒด ๋‚ด๋ถ€์—๋Š” constructor๋ผ๋Š” ํ”„๋กœํผํ‹ฐ๊ฐ€ ์žˆ๋‹ค.
์ƒ์„ฑ์ž ํ•จ์ˆ˜์˜ prototype ํ”„๋กœํผํ‹ฐ๋ฅผ ์ฐธ์กฐํ•˜๋Š” ์ธ์Šคํ„ด์Šค์˜ __proto__ ๊ฐ์ฒด ๋‚ด๋ถ€์—๋„ ๋งˆ์ฐฌ๊ฐ€์ง€์ด๋‹ค.
constructor ํ”„๋กœํผํ‹ฐ๋Š” ๋‹จ์–ด ๊ทธ๋Œ€๋กœ ์›๋ž˜์˜ ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋ฅผ ์ฐธ์กฐํ•˜๋Š” ๊ฒƒ์œผ๋กœ ์ธ์Šคํ„ด์Šค๋กœ๋ถ€ํ„ฐ ๊ทธ ์›ํ˜•์ด ๋ฌด์—‡์ธ์ง€๋ฅผ ์•Œ ์ˆ˜ ์žˆ๋Š” ์ˆ˜๋‹จ์ด๋‹ค.

var arr = [1, 2];

var arr2 = arr.constructor(3, 4);
console.log(arr2); // [3, 4]

ํ•œํŽธ, constructor๋Š” ์ฝ๊ธฐ ์ „์šฉ ์†์„ฑ์ด ๋ถ€์—ฌ๋œ ์˜ˆ์™ธ์ ์ธ ๊ฒฝ์šฐ(๊ธฐ๋ณธํ˜• ๋ฆฌํ„ฐ๋Ÿด ๋ณ€์ˆ˜ - number, string, boolean)๋ฅผ ์ œ์™ธํ•˜๊ณ ๋Š” ๊ฐ’์„ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๋‹ค.
๊ทธ๋Ÿฐ๋ฐ constructor์˜ ๊ฐ’์„ ๋ฐ”๊ฟ”๋„ ์ด๋ฏธ ๋งŒ๋“ค์–ด์ง„ ์ธ์Šคํ„ด์Šค์˜ ์›ํ˜•์ด ๋ฐ”๋€Œ๊ฑฐ๋‚˜ ๋ฐ์ดํ„ฐ ํƒ€์ž…์ด ๋ณ€ํ•˜์ง€๋Š” ์•Š๋Š”๋‹ค.
์ฆ‰, constructor๋ฅผ ๋ณ€๊ฒฝํ•˜๋”๋ผ๋„ ๊ทธ์ € ์ฐธ์กฐํ•˜๋Š” ๋Œ€์ƒ์ด ๋ณ€๊ฒฝ๋  ๋ฟ์ด๋ฏ€๋กœ ์–ด๋–ค ์ธ์Šคํ„ด์Šค์˜ ์ƒ์„ฑ์ž ์ •๋ณด๋ฅผ ์•Œ์•„๋‚ด๊ธฐ ์œ„ํ•ด constructor ํ”„๋กœํผํ‹ฐ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ํ•ญ์ƒ ์•ˆ์ „ํ•˜์ง€๋Š” ์•Š์€ ๊ฒƒ์ด๋‹ค.

var Person = function (name) {
  this.name = name;
}

var p1 = new Person("์‚ฌ๋žŒ1");
var p1Proto = Object.getPrototypeOf(p1);
var p2 = new p1Proto.constructor("์‚ฌ๋žŒ2");

p1๊ณผ p2๋Š” ๋ชจ๋‘ Person์˜ ์ธ์Šคํ„ด์Šค๊ฐ€ ๋œ๋‹ค.

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

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

์•ž์„œ ์‚ดํŽด๋ณธ ๊ฒƒ์ฒ˜๋Ÿผ prototype ๊ฐ์ฒด๋ฅผ ์ฐธ์กฐํ•˜๋Š” __proto__๋ฅผ ์ƒ๋žตํ•˜๋ฉด ์ธ์Šคํ„ด์Šค๋Š” prototype์— ์ •์˜๋œ ํ”„๋กœํผํ‹ฐ๋‚˜ ๋ฉ”์„œ๋“œ๋ฅผ ์ž์‹ ์˜ ๊ฒƒ์ฒ˜๋Ÿผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
ํ•œํŽธ, ์ธ์Šคํ„ด์Šค๊ฐ€ prototype ๊ฐ์ฒด์— ์ •์˜๋œ ํ”„๋กœํผํ‹ฐ ๋˜๋Š” ๋ฉ”์„œ๋“œ์™€ ๋™์ผํ•œ ์ด๋ฆ„์˜ ํ”„๋กœํผํ‹ฐ ๋˜๋Š” ๋ฉ”์„œ๋“œ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๊ฒฝ์šฐ์—๋Š” ๋ฉ”์„œ๋“œ ์˜ค๋ฒ„๋ผ์ด๋“œ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.
๋ฉ”์„œ๋“œ ์˜ค๋ฒ„๋ผ์ด๋“œ๋ž€ ์›๋ณธ ๋ฉ”์„œ๋“œ๊ฐ€ ๊ทธ๋Œ€๋กœ ์žˆ๋Š” ์ƒํƒœ์—์„œ ๋‹ค๋ฅธ ๋ฉ”์„œ๋“œ๋ฅผ ๊ทธ ์œ„์— ๋ฎ์–ด์”Œ์šฐ๋Š” ๊ฒƒ์„ ๋งํ•œ๋‹ค.

var Person = function (name) {
  this.name = name;
}

Person.prototype.getName = function (name) {
  return this.name
}

var iu = new Person("์ง€๊ธˆ");
iu.getName = function () {
  return "๋ฐ”๋กœ" + this.name;
};

console.log(iu.getName()); // ๋ฐ”๋กœ ์ง€๊ธˆ(o), ์ง€๊ธˆ(x)

iu.__proto__.getName์ด ์•„๋‹Œ iu ๊ฐ์ฒด์— ์žˆ๋Š” getName ๋ฉ”์„œ๋“œ๊ฐ€ ํ˜ธ์ถœ๋œ ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.
์ด๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์ด ๋ฉ”์„œ๋“œ๋ฅผ ์ฐพ์„ ๋•Œ ์šฐ์„  ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด ๋Œ€์ƒ์ธ iu ๊ฐ์ฒด ์ž์‹ ์˜ ํ”„๋กœํผํ‹ฐ๋ฅผ ๊ฒ€์ƒ‰ํ•˜๊ณ , ์—†์œผ๋ฉด ๊ทธ ๋‹ค์Œ์œผ๋กœ ๊ฐ€๊นŒ์šด ๋Œ€์ƒ์ธ __proto__๋ฅผ ๊ฒ€์ƒ‰ํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

๋ฉ”์„œ๋“œ ์˜ค๋ฒ„๋ผ์ด๋”ฉ์ด ์ด๋ฃจ์–ด์ ธ ์žˆ๋Š” ์ƒํ™ฉ์—์„œ prototype์— ์žˆ๋Š” ๋ฉ”์„œ๋“œ์— ์ ‘๊ทผํ•˜๋ ค๋ฉด call ๋ฉ”์„œ๋“œ๋ฅผ ์ด์šฉํ•ด getName ๋ฉ”์„œ๋“œ ๋‚ด๋ถ€์—์„œ์˜ this๋ฅผ iu.__proto__ ๊ฐ์ฒด์—์„œ iu ๊ฐ์ฒด๋กœ ๋ฐ”๊ฟ”์ค˜์•ผ ํ•œ๋‹ค.

iu.__proto__.getName(); // undefined
iu.__proto__.getName.call(iu); // ์ง€๊ธˆ

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

ํฌ๋กฌ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ์˜ ์ถœ๋ ฅ ๊ฒฐ๊ณผ๋ฅผ ๋‹ค์‹œ ์‚ดํŽด๋ณด๋ฉด, ๋ฐฐ์—ด ์ธ์Šคํ„ด์Šค์˜ ํ”„๋กœํผํ‹ฐ์ธ __proto__ ๊ฐ์ฒด ์•ˆ์— ๋˜ ๋‹ค์‹œ __proto__ ํ”„๋กœํผํ‹ฐ๊ฐ€ ์žˆ๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.
์ด๋Š” prototype ๊ฐ์ฒด ๋˜ํ•œ ๋ง ๊ทธ๋Œ€๋กœ '๊ฐ์ฒด'์ด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
๊ธฐ๋ณธ์ ์œผ๋กœ ๋ชจ๋“  ๊ฐ์ฒด์˜ __proto__์—๋Š” Object.prototype์ด ์—ฐ๊ฒฐ๋œ๋‹ค.

var arr = [1, 2];
arr(.__proto__).push(3);
arr(.__proto__)(.__proto__).hasOwnProperty(2); // true

๋”ฐ๋ผ์„œ, ์ธ์Šคํ„ด์Šค๋Š” ๊ทธ ์ธ์Šคํ„ด์Šค์˜ ์ƒ์„ฑ์ž ํ•จ์ˆ˜์˜ prototype์˜ ๋ฉ”์„œ๋“œ๋ฟ ์•„๋‹ˆ๋ผ Object.prototype์˜ ๋ฉ”์„œ๋“œ๋„ ์ž์‹ ์˜ ๊ฒƒ์ฒ˜๋Ÿผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
์ƒ๋žต ๊ฐ€๋Šฅํ•œ __proto__๋ฅผ ํ•œ ๋ฒˆ ๋” ๋”ฐ๋ผ๊ฐ€๋ฉด Object.prototype์„ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

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

var arr = [1, 2];
Array.prototype.toString.call(arr); // 1,2
Object.prototype.toString.call(arr); // [ object Array ]
arr.toString(); // 1,2

arr.toString = function () {
  return this.join("_");
};
arr.toString(); // 1_2

// cf. Object.prototype.toString() ์€ ์‚ฌ์šฉ์ž ์ง€์ • ๊ฐ์ฒด์—์„œ ์žฌ์ •์˜๋˜์ง€ ์•Š์œผ๋ฉด [ object type ]์„ return ํ•œ๋‹ค.

(3) ๊ฐ์ฒด ์ „์šฉ ๋ฉ”์„œ๋“œ์˜ ์˜ˆ์™ธ์‚ฌํ•ญ

์–ด๋–ค ์ƒ์„ฑ์ž ํ•จ์ˆ˜์ด๋“  prototype์€ ๋ฐ˜๋“œ์‹œ ๊ฐ์ฒด์ด๊ธฐ ๋•Œ๋ฌธ์— Object.prototype์ด ์–ธ์ œ๋‚˜ ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ์˜ ์ตœ์ƒ๋‹จ์— ์กด์žฌํ•œ๋‹ค.
๋”ฐ๋ผ์„œ ๊ฐ์ฒด์—์„œ๋งŒ ์‚ฌ์šฉํ•  ๋ฉ”์„œ๋“œ๋Š” ๋‹ค๋ฅธ ์—ฌ๋Š ๋ฐ์ดํ„ฐ ํƒ€์ž…์ฒ˜๋Ÿผ ํ”„๋กœํ† ํƒ€์ž… ๊ฐ์ฒด ์•ˆ์— ์ •์˜ํ•  ์ˆ˜ ์—†๋‹ค.
๊ฐ์ฒด์—์„œ๋งŒ ์‚ฌ์šฉํ•  ๋ฉ”์„œ๋“œ๋ฅผ ๊ฐ์ฒด๊ฐ€ ์•„๋‹Œ ๋ฐ์ดํ„ฐ ํƒ€์ž…์— ์‚ฌ์šฉํ•˜๋ฉด ์˜ค๋ฅ˜๋ฅผ ๋˜์ง€๋„๋ก ํ•ด์•ผ ํ•˜๋Š”๋ฐ Object.prototype์€ ์–ธ์ œ๋‚˜ ๋ชจ๋“  ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ์˜ ์ตœ์ƒ๋‹จ์— ์กด์žฌํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์–ด๋–ค ๋ฐ์ดํ„ฐ ํƒ€์ž…์ด๊ฑด ๊ฑฐ์˜ ๋ฌด์กฐ๊ฑด ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ด๋‹์„ ํ†ตํ•ด ํ•ด๋‹น ๋ฉ”์„œ๋“œ์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
์ด ๊ฐ™์€ ์ด์œ ๋กœ ๊ฐ์ฒด ์ „์šฉ ๋ฉ”์„œ๋“œ๋“ค์€ Object.prototype์ด ์•„๋‹ˆ๋ผ Object์— ์Šคํƒœํ‹ฑ ๋ฉ”์„œ๋“œ๋กœ ๋ถ€์—ฌ๋˜์–ด ์žˆ๋‹ค. ex) Object.freeze(instance) (o) / instance.freeze() (x)
๋ฐ˜๋Œ€๋กœ Object.prototype์—๋Š” ์–ด๋–ค ๋ฐ์ดํ„ฐ์—์„œ๋„ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ฒ”์šฉ์ ์ธ ๋ฉ”์„œ๋“œ๋“ค๋งŒ ์กด์žฌํ•œ๋‹ค.

์˜ˆ์™ธ์ ์œผ๋กœ Object.create๋ฅผ ์ด์šฉํ•˜๋ฉด Object.prototype์˜ ๋ฉ”์„œ๋“œ์— ์ ‘๊ทผํ•  ์ˆ˜ ์—†๋Š” ๊ฒฝ์šฐ๋„ ์žˆ๋‹ค.
Object.create(null)์€ __proto__๊ฐ€ ์—†๋Š” ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•œ๋‹ค.

var _proto = Object.create(null);
_proto.getValue = function (key) {
  return this[key];
};

var obj = Object.create(_proto);
obj.a = 1;

console.log(obj.getValue("a")); // 1
console.dir(obj);
// Ojbect
//   a: 1
//   __proto__:
//     getValue: f (key)

obj์˜ __proto__์—๋Š” getValue ๋ฉ”์„œ๋“œ๋งŒ ์กด์žฌํ•  ๋ฟ __proto__ ๋ฐ constructor ํ”„๋กœํผํ‹ฐ๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š๋Š”๋‹ค.
์ด๋ ‡๊ฒŒ ๋งŒ๋“ค์–ด์ง„ ๊ฐ์ฒด๋Š” ์ผ๋ฐ˜์ ์ธ ๋ฐ์ดํ„ฐ์—์„œ ๋ฐ˜๋“œ์‹œ ์กด์žฌํ•˜๋˜ ๋‚ด์žฅ ๋ฉ”์„œ๋“œ ๋ฐ ํ”„๋กœํผํ‹ฐ๋“ค์ด ์ œ๊ฑฐ๋˜์–ด ๊ธฐ๋ณธ ๊ธฐ๋Šฅ์— ์ œ์•ฝ์€ ์ƒ๊ฒผ์ง€๋งŒ ๊ฐ์ฒด ์ž์ฒด์˜ ๋ฌด๊ฒŒ๊ฐ€ ๊ฐ€๋ฒผ์›Œ์ ธ ์„ฑ๋Šฅ์„ฑ ์ด์ ์„ ๊ฐ€์ง„๋‹ค.

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

๋Œ€๊ฐ์„ ์˜ __proto__๋ฅผ ์—ฐ๊ฒฐํ•ด๋‚˜๊ฐ€๊ธฐ๋งŒ ํ•˜๋ฉด ๋ฌดํ•œ๋Œ€๋กœ ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ ๊ด€๊ณ„๋ฅผ ์ด์–ด๋‚˜๊ฐˆ ์ˆ˜ ์žˆ๋‹ค.
__proto__๊ฐ€ ์ฐธ์กฐํ•˜๋Š” ๋Œ€์ƒ(์ฆ‰, ์ƒ์„ฑ์ž ํ•จ์ˆ˜์˜ prototype)์ด, ์—ฐ๊ฒฐํ•˜๊ณ ์ž ํ•˜๋Š” '์ƒ์œ„ ์ƒ์„ฑ์ž ํ•จ์ˆ˜์˜ ์ธ์Šคํ„ด์Šค'๋ฅผ ๋ฐ”๋ผ๋ณด๋„๋ก ํ•ด์ฃผ๋ฉด ๋œ๋‹ค.

var Grade = function () {
  var args = Array.prototype.slice.call(arguments);
  for (var i = 0; i < arguments.length; i++) {
    this[i] = args[i];
  }
  this.length = args.length;
};

var g = new Grade(100, 80);

๋ณ€์ˆ˜ g์—๋Š” Grade ์ƒ์„ฑ์ž ํ•จ์ˆ˜์˜ ์ธ์Šคํ„ด์Šค๊ฐ€ ๋‹ด๊ฒจ ์žˆ๋Š”๋ฐ, ์ด๋Š” ์œ ์‚ฌ๋ฐฐ์—ด๊ฐ์ฒด์ด๋‹ค.
์œ ์‚ฌ๋ฐฐ์—ด๊ฐ์ฒด์— ๋ฐฐ์—ด ๋ฉ”์„œ๋“œ๋ฅผ ์ ์šฉํ•˜๋ ค๊ณ  ํ•œ๋‹ค.

์ฒซ ๋ฒˆ์žฌ ๋ฐฉ๋ฒ•์œผ๋กœ call/apply ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

var arr2 = Array.prototype.push.call(g, 60);
console.log(arr2); // [100, 80, 60]

๋‘ ๋ฒˆ์งธ ๋ฐฉ๋ฒ•์œผ๋กœ ์•„์˜ˆ ์ธ์Šคํ„ด์Šค์—์„œ ๋ฐฐ์—ด ๋ฉ”์„œ๋“œ๋ฅผ ์ง์ ‘ ์“ธ ์ˆ˜ ์žˆ๊ฒŒ๋” ํ•  ์ˆ˜ ์žˆ๋‹ค.
์ด ๊ฒฝ์šฐ ๋ฐฐ์—ด ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ์—ฐ๊ฒฐ์ด ํ•„์š”ํ•œ ์ƒ์œ„ ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋Š” Array() ์ด๋ฏ€๋กœ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ฝ”๋“œ๋ฅผ ์ถ”๊ฐ€ํ–ˆ๋‹ค.
์ƒ์„ฑ์ž ํ•จ์ˆ˜ Grade์˜ prototype์ด ๋ฐฐ์—ด์˜ ์ธ์Šคํ„ด์Šค๋ฅผ ๋ฐ”๋ผ๋ณด๋„๋ก ํ•œ ๊ฒƒ์ด๋‹ค.

var Grade = function () {
  var args = Array.prototype.slice.call(arguments);
  for (var i = 0; i < arguments.length; i++) {
    this[i] = args[i];
  }
  this.length = args.length;
};

Grade.prototype = []; // ์ธ์Šคํ„ด์Šค ์ƒ์„ฑ ์ „์— ์ถ”๊ฐ€ํ•ด์•ผ ํ•œ๋‹ค

var g = new Grade(100, 80);

g.pop();
console.log(g); // Grade(1) [100]

โœจ ๋‚ด์ผ ํ•  ๊ฒƒ

  1. ํด๋ž˜์Šค
profile
๋Šฅ๋™์ ์œผ๋กœ ์‚ด์ž, ํ–‰๋ณตํ•˜๊ฒŒ๐Ÿ˜

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