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__๋ฅผ ์ฐพ์๊ฐ๋ ๊ณผ์ ์ ํ๋กํ ํ์
์ฒด์ด๋์ด๋ผ๊ณ ํฉ๋๋ค. ์ด ์ฒด์ด๋์ ํตํด ๊ฐ ํ๋กํ ํ์
๋ฉ์๋๋ฅผ ์์ ์ ๊ฒ์ฒ๋ผ ํธ์ถํ ์ ์์ต๋๋ค. ์ด๋ ์ ๊ทผ ๋ฐฉ์์ ์์ ์ผ๋ก๋ถํฐ ๊ฐ์ฅ ๊ฐ๊น์ด ๋์๋ถํฐ ์ฐพ์ ๋๊ฐ๋ฉฐ, ์ํ๋ ๊ฐ์ ์ฐพ์ผ๋ฉด ๊ฒ์์ ์ค๋จํฉ๋๋ค.
โข
๋ฏน์ค์ธ ์ ๊ฐ์ฒด ์งํฅ ์ธ์ด์์ ๋ฒ์ฉ์ ์ผ๋ก ์ฐ์ด๋ ์ฉ์ด๋ก, ๋ค๋ฅธ ํด๋์ค๋ค์ ๋ฉ์๋ ์กฐํฉ์ ํฌํจํ๋ ํด๋์ค๋ฅผ ์๋ฏธํฉ๋๋ค.
โข
๋ช๋ช ์ธ์ด๋ ๋ค์ค์์์ ํ์ฉํฉ๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ค์ค์์์ ์ง์ํ์ง ์๋๋ฐ, ๋ฏน์ค์ธ์ ์ฌ์ฉํ๋ฉด ๋ฉ์๋๋ฅผ ๋ณต์ฌํด ํ๋กํ ํ์
์ ๊ตฌํํ ์ ์์ต๋๋ค.
์ฐธ๊ณ ๋งํฌ
โข