Search
๐Ÿ—๏ธ

Prototype & Mixin

Prototype์„ ์•Œ์•„์•ผ ํ•˜๋Š” ์ด์œ 

ํ”„๋กœํ† ํƒ€์ž…์— ๋Œ€ํ•ด์„œ ๊ฐœ๋…์„œ์—์„œ๋งŒ ๋ณด๊ณ , ์‹ค์ œ๋กœ๋Š” ์–ด๋–ค ์›๋ฆฌ์ธ์ง€ ์ž˜ ๋ชจ๋ฅด๊ฒ ๋‹ค๋ฉด

์ด ๋ฌธ์„œ๋ฅผ ๋ณด๊ณ  ๋‚˜๋ฉด

ํ”„๋กœํ† ํƒ€์ž…์˜ ๊ตฌ์กฐ๋ฅผ ์ดํ•ดํ•˜๊ณ , ๊ฐ์ฒด๋ฅผ ์„ค๊ณ„ ํ•  ์ˆ˜ ์žˆ๋‹ค.

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

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ํ”„๋กœํ† ํƒ€์ž…๊ธฐ๋ฐ˜ ์–ธ์–ด์ž…๋‹ˆ๋‹ค. ํด๋ž˜์Šค ๊ธฐ๋ฐ˜ ์–ธ์–ด์—์„œ๋Š” '์ƒ์†'์„ ์‚ฌ์šฉํ•˜์ง€๋งŒ ํ”„๋กœํ† ํƒ€์ž… ๊ธฐ๋ฐ˜ ์–ธ์–ด์—์„œ๋Š” ์–ด๋–ค ๊ฐ์ฒด๋ฅผ ์›ํ˜•์œผ๋กœ ์‚ผ๊ณ  ์ด๋ฅผ ๋ณต์ œ(์ฐธ์กฐ)ํ•จ์œผ๋กœ์จ ์ƒ์†๊ณผ ๋น„์Šทํ•œ ํšจ๊ณผ๋ฅผ ์–ป์Šต๋‹ˆ๋‹ค. ํ”„๋กœํ† ํƒ€์ž…์„ ์ดํ•ดํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ํฌ๊ฒŒ 3๊ฐ€์ง€ย constructor,ย prototype,ย instance๋ฅผ ๊ธฐ์–ตํ•ด์ฃผ์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.
const instacne = new Constructor();
JavaScript
๋ณต์‚ฌ
์ด๋Š” ์•„๋ž˜์˜ ๋„์‹์œผ๋กœ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์œ„ ๊ทธ๋ฆผ๋Œ€๋กœ new ์—ฐ์‚ฐ์ž๋กœ constructor๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด instance๊ฐ€ ๋งŒ๋“ค์–ด์ง€๊ณ , ์ด instance๊ฐ€ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์ƒ๋žต ๊ฐ€๋Šฅํ•œ ํ”„๋กœํผํ‹ฐ์ธย __proto__๋Š” constructor์˜ prototype์„ ์ฐธ์กฐํ•ฉ๋‹ˆ๋‹ค.
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ํ•จ์ˆ˜์— ์ž๋™์œผ๋กœ ๊ฐ์ฒด์ธ prototype ํ”„๋กœํผํ‹ฐ๋ฅผ ์ƒ์„ฑํ•ด ๋†“์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ํ•ด๋‹น ํ•จ์ˆ˜๋ฅผ ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋กœ์จ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ, ์ฆ‰ new ์—ฐ์‚ฐ์ž์™€ ํ•จ๊ป˜ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•  ๊ฒฝ์šฐ, ๊ทธ๋กœ๋ถ€ํ„ฐ ์ƒ์„ฑ๋œ ์ธ์Šคํ„ด์Šค์—๋Š” ์ˆจ๊ฒจ์ง„ ํ”„๋กœํผํ‹ฐ์ธย __proto__๊ฐ€ ์ž๋™์œผ๋กœ ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด ํ”„๋กœํผํ‹ฐ๋Š” ์ƒ์„ฑ์ž ํ•จ์ˆ˜์˜ prototype์„ ์ฐธ์กฐํ•ฉ๋‹ˆ๋‹ค.ย __proto__ย ํ”„๋กœํผํ‹ฐ๋Š” ์ƒ๋žต ํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ตฌํ˜„๋ผ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ƒ์„ฑ์ž ํ•จ์ˆ˜์˜ prototype์— ์–ด๋–ค ๋ฉ”์„œ๋“œ๋‚˜ ํ”„๋กœํผํ‹ฐ๊ฐ€ ์žˆ๋‹ค๋ฉด ์ธ์Šคํ„ด์Šค์—์„œ๋„ ๋งˆ์น˜ ์ž์‹ ์˜ ๊ฒƒ์ฒ˜๋Ÿผ ํ•ด๋‹น ๋ฉ”์„œ๋“œ๋‚˜ ํ”„๋กœํผํ‹ฐ์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

#Mixin

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด๋Š” ์ƒ์†๋ฐ›๊ฑฐ๋‚˜ ์ธ์Šคํ„ด์Šคํ™”ํ•ด๋„ ์ž๋™์œผ๋กœ ๋ณต์‚ฌ์ž‘์—…์ด ์ผ์–ด๋‚˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—” ์ธ์Šคํ„ด์Šค๋กœ ๋งŒ๋“ค ๊ฐœ๋… ์ž์ฒด๊ฐ€ ์—†๊ณ  ์˜ค์ง ๊ฐ์ฒด๋งŒ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ธ๋ฐ์š”. ๊ฐ์ฒด๋Š” ๋‹ค๋ฅธ ๊ฐ์ฒด์— ๋ณต์‚ฌ๋˜๋Š”๊ฒŒ ์•„๋‹ˆ๋ผ ์„œ๋กœ ์—ฐ๊ฒฐ๋ฉ๋‹ˆ๋‹ค. Mixin์€ ๋‹ค๋ฅธ ์–ธ์–ด์™€ ๋‹ฌ๋ฆฌ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„  ์—†๋Š” ํด๋ž˜์Šค ๋ณต์‚ฌ ๊ธฐ๋Šฅ์„ ํ‰๋‚ด ๋‚ธ ๊ฒƒ์œผ๋กœ Wikipedia์—์„œ๋Š”ย ๋ฏน์Šค์ธ(mixin)ย (opens new window)์„ย ๋‹ค๋ฅธ ๊ฐ์ฒด๋ฅผ ์ƒ์†๋ฐ›์„ ํ•„์š” ์—†์ด ๊ตฌํ˜„๋˜์–ด์žˆ๋Š” ๋ฉ”์„œ๋“œ๋ฅผ ๋‹ด๊ณ  ์žˆ๋Š” ๊ฐ์ฒด๋ผ๊ณ  ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ์ฆ‰ ๋ฏน์Šค์ธ์€ ํŠน์ • ํ–‰๋™์„ ์‹คํ–‰ํ•ด์ฃผ๋Š” ๋ฉ”์„œ๋“œ๋ฅผ ์ œ๊ณตํ•˜๋Š”๋ฐ ๋‹จ๋…์œผ๋กœ ์“ฐ์ด์ง€ ์•Š๊ณ , ๋‹ค๋ฅธ ๊ฐ์ฒด์— ํ–‰๋™์„ ๋”ํ•ด์ฃผ๋Š” ์šฉ๋„๋กœ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.
๋‹ค์Œ์€ ๋ฒ„ํŠผ ๋™์ž‘์„ ์ •์˜ํ•˜๋Š” ๋ฏน์Šค์ธ ์˜ค๋ธŒ์ ํŠธ์ž…๋‹ˆ๋‹ค.
const clickableMethods = { hover() { console.log('hovering') }, press() { console.log('button pressed') }, click() { console.log('button clicked') }, }
JavaScript
๋ณต์‚ฌ
์ƒ์†์ด ์•„๋‹Œ ๋ฏน์Šค์ธ๋งŒ์„ ์ด์šฉํ•ด์„œ ์œ„์˜ ํด๋ฆญ๊ณผ ๊ด€๋ จํ•œ ํ•จ์ˆ˜ ๊ธฐ๋Šฅ์„ ๊ทธ๋Œ€๋กœ ํ™œ์šฉํ•˜๊ณ ์ž ํ•œ๋‹ค๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
function Button(size, color) { this.size = size this.color = color } Object.assign(Button.prototype, clickableMethods) new Button(20, 'primary').hover() // hovering
JavaScript
๋ณต์‚ฌ

์ •๋ฆฌ

โ€ข
์–ด๋–ค ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋ฅผ new ์—ฐ์‚ฐ์ž์™€ ํ•จ๊ป˜ ํ˜ธ์ถœํ•˜๋ฉด Constructor์— ์ •์˜๋œ ๋‚ด์šฉ์„ ๋ฐ”ํƒ•์œผ๋กœ ์ƒˆ๋กœ์šด ์ธ์Šคํ„ด์Šค๊ฐ€ ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค. ์ด ์ธ์Šคํ„ด์Šค์—๋Š”ย __proto__๋ผ๋Š”, Constructor์˜ prototype ํ”„๋กœํผํ‹ฐ๋ฅผ ์ฐธ์กฐํ•˜๋Š” ํ”„๋กœํผํ‹ฐ๊ฐ€ ์ž๋™์œผ๋กœ ๋ถ€์—ฌ๋ฉ๋‹ˆ๋‹ค.
โ€ข
__proto__๋Š” ์ƒ๋žต ๊ฐ€๋Šฅํ•œ ์†์„ฑ์ด๋ผ, ์ธ์Šคํ„ด์Šค๋Š” Constructor.prototype์˜ ๋ฉ”์„œ๋“œ๋ฅผ ๋งˆ์น˜ ์ž์‹ ์˜ ๋ฉ”์„œ๋“œ์ธ ๊ฒƒ์ฒ˜๋Ÿผ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
โ€ข
ํ”„๋กœํ† ํƒ€์ž…์„ ๋„์‹ํ™”ํ•œ ์‚ผ๊ฐํ˜•์˜ ๋Œ€๊ฐ์„  ๋ฐฉํ–ฅ์ธย __proto__ย ๋ฐฉํ–ฅ์„ ๊ณ„์† ์ฐพ์•„๊ฐ€๋ฉด ์ตœ์ข…์ ์œผ๋กœ๋Š” Object.prototype์— ๋„๋‹ฌํ•ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฐ ์‹์œผ๋กœย __proto__ย ์•ˆ์— ๋‹ค์‹œย __proto__๋ฅผ ์ฐพ์•„๊ฐ€๋Š” ๊ณผ์ •์„ ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ด๋‹์ด๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์ด ์ฒด์ด๋‹์„ ํ†ตํ•ด ๊ฐ ํ”„๋กœํ† ํƒ€์ž… ๋ฉ”์„œ๋“œ๋ฅผ ์ž์‹ ์˜ ๊ฒƒ์ฒ˜๋Ÿผ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋•Œ ์ ‘๊ทผ ๋ฐฉ์‹์€ ์ž์‹ ์œผ๋กœ๋ถ€ํ„ฐ ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด ๋Œ€์ƒ๋ถ€ํ„ฐ ์ฐพ์•„ ๋‚˜๊ฐ€๋ฉฐ, ์›ํ•˜๋Š” ๊ฐ’์„ ์ฐพ์œผ๋ฉด ๊ฒ€์ƒ‰์„ ์ค‘๋‹จํ•ฉ๋‹ˆ๋‹ค.
โ€ข
๋ฏน์Šค์ธ ์€ ๊ฐ์ฒด ์ง€ํ–ฅ ์–ธ์–ด์—์„œ ๋ฒ”์šฉ์ ์œผ๋กœ ์“ฐ์ด๋Š” ์šฉ์–ด๋กœ, ๋‹ค๋ฅธ ํด๋ž˜์Šค๋“ค์˜ ๋ฉ”์„œ๋“œ ์กฐํ•ฉ์„ ํฌํ•จํ•˜๋Š” ํด๋ž˜์Šค๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.
โ€ข
๋ช‡๋ช‡ ์–ธ์–ด๋Š” ๋‹ค์ค‘์ƒ์†์„ ํ—ˆ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋‹ค์ค‘์ƒ์†์„ ์ง€์›ํ•˜์ง€ ์•Š๋Š”๋ฐ, ๋ฏน์Šค์ธ์„ ์‚ฌ์šฉํ•˜๋ฉด ๋ฉ”์„œ๋“œ๋ฅผ ๋ณต์‚ฌํ•ด ํ”„๋กœํ† ํƒ€์ž…์— ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ฐธ๊ณ  ๋งํฌ

โ€ข