October 28, 2020
์ ์ : ์ด๋ค ์ฌ๋ฌผ์ ๊ณตํต๋ ๋ชจ์ต, ๋ณธ๋์ ๋ชจ์ต
Javascript ๋ฅผ Prototype based language ๋ผ ๋ถ๋ฅด๊ธฐ๋ ํ๋ฉฐ Javascript ๋ฅผ ์งํฑํ๋ ๊ธฐ๋ฐ์ด๋ผ๊ณ ๋ ๋ถ๋ฅธ๋จ๋ค.
function Person(name, first, second) {
this.name = name
this.first = first
this.second = second
this.sum = function() {
return this.first + this.second
}
}
var kim = new Person('kim', 10, 20)
var lee = new Person('lee', 10, 10)
์์ฑํ๋ ค๊ณ ํ๋ ๊ฐ์ฒด์ sum ์ด๋ผ๋ ์ด๋ฆ์ ํจ์๊ฐ ๊ฐ์ฒด๋ฅผ ์์ฑํ ๋๋ง๋ค ์๋ก ๋ง๋ค์ด์ง๊ณ ์๋ค.
์ด๋ฌ๋ฉด ์ปดํจํฐ์ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ๋ญ๋นํ๊ฒ ๋๊ณ , ์๋๋ ์ ํ๋๋ค.
๊ทธ๋ผ ์์ฑ์ ๋ด์ sum ํจ์๋ฅผ ์์ฑํ์ง ์์ผ๋ฉด์ sum ํจ์์ ๊ธฐ๋ฅ์ด ๋ฐ๋ ๋๋ง๋ค ๋ค๋ฅธ ๊ฐ์ฒด๋ค์ ๊ธฐ๋ฅ๋ ํ๋ฒ์ ๋ฐ๊พธ๋ ๋ฐฉ๋ฒ์ ์์๊น?
์ฆ, ์์ฑ์ ํจ์๋ฅผ ํตํด ๋ง๋ ๋ชจ๋ ๊ฐ์ฒด๊ฐ ๊ณตํต์ ์ผ๋ก ์ฌ์ฉํ ์ ์๋ ํจ์, ์์ฑ์ ๋ง๋ค๊ณ ์ถ๋ค.
function Person(name, first, second, third) {
this.name = name
this.first = first
this.second = second
}
Person.prototype.sum = function() {
return 'prototype : ' + (this.first + this.second)
}
sum ํจ์๋ฅผ ๋ฐ๋ก ์์ฑ์ ํจ์ ๋ฐ๊นฅ์ผ๋ก ๋นผ๋๋ค. ๊ทธ๋ฆฌ๊ณ Person.prototype.sum ์ผ๋ก Person ๊ณผ sum ์ฌ์ด์ ์์ฑ์ ํจ์์ ์ํ์ ์ ํ๋ค๋ ์๋ฏธ์์ prototype ์ ์ ์ด ๋ฃ์๋ค.
์ด๋ฅผ ํตํด ๊ฐ์ฒด๋ฅผ ๋ง๋ค๊ณ ์คํํ๋ฉด, ์ ์๋์ด ๋๋ค.
var kim = new Person('kim', 10, 20);
var lee = new Person('lee', 10, 10);
console.log("kim.sum()", kim.sum());
console.log("lee.sum()", lee.sum());
kim.sum() prototype : 30
lee.sum() prototype : 20
undefined
์์ฑ์ (constructor) ์์ sum ์ ์ ์ํ๋ ํจ์๊ฐ ๋ค์ด๊ฐ ์์ง ์๊ธฐ์ Person.prototype.sum ๋ฅผ ์ ์ํ๋ ์ฝ๋๋ ๊ฐ์ฒด๊ฐ ๋ง๋ค์ด์ง ๋๋ง๋ค ์คํ๋์ง ์๊ฒ ๋๋ค.
ํ ๋ฒ๋ง ์คํ์ด ๋๊ณ , ์ฑ๋ฅ์ ์ ์ฝํ ์ ์๋ค. ํ ๋ฒ๋ง ์ ์๋๋ฏ๋ก ๋ฉ๋ชจ๋ฆฌ๋ก ์ ์ฝํ ์ ์๋ค.
๊ทธ๋ฆฌ๊ณ ์์ ์ํ์์ ์ ์๋ ํ๋กํ ํ์ ์ ๋ฆฌํด๋ฌธ์ ๋ฐ๊พธ๋ฉด,
Person.prototype.sum = function() {
return 'modified prototype : ' + (this.first + this.second)
}
ฦ () {
return 'modified prototype : ' + (this.first + this.second)
}
console.log("kim.sum()", kim.sum());
console.log("lee.sum()", lee.sum());
kim.sum() modified prototype : 30
lee.sum() modified prototype : 20
undefined
๋ง์ฝ ๊ฐ์ฒด๊ฐ ์ผ์ต ๊ฐ ๋ง๋ค์ด์ ธ ์์๋ค๊ณ ํ๋ฉด, ์ผ์ต ๊ฐ์ ๊ฐ์ฒด๊ฐ ๋ฐฉ๊ธ ๋ฐ๋ ํ๋กํ ํ์ ์ sum ํจ์๋ฅผ ์์ดํ๊ฒ ๋๋ ์ ์ด๋ค.
์ฆ, ํ๋ฒ์ ๋ชจ๋ ๋ค ๋ฐ๋์ด ๋ฒ๋ฆฌ๋ ๊ฒ์ด๋ค.
๋ํ ์ผ์ต ๊ฐ์ ๊ฐ์ฒด ์ค์์ ๋ฑ ๊ทธ ํน์ ํ ํ๋์ ๊ฐ์ฒด์ ๊ธฐ๋ฅ๋ง์ ๋ฐ๊ฟ ์๋ ์๋ค.
kim.sum = function(){
return 'this : '+(this.first+this.second);
}
ฦ (){
return 'this : '+(this.first+this.second);
}
console.log("kim.sum()", kim.sum());
console.log("lee.sum()", lee.sum());
kim.sum() this : 30
lee.sum() modified prototype : 20
undefined
์ง๊ธ๊น์ง์ ์์๋ฅผ ํตํด ๋ง๋ค์ด์ง kim ์ด๋ผ๋ ๊ฐ์ฒด์ sum() ์ด๋ผ๋ ๋ฉ์๋๋ฅผ ํธ์ถํ ๋, ์๋ฐ์คํฌ๋ฆฝํธ ์์๋ ์ ์ผ ๋จผ์ ๊ฐ์ฒด ์์ ์ด (kim) sum() ์ด๋ผ๊ณ ํ๋ ์์ฑ์ ๊ฐ์ง๊ณ ์๋์ง ๋ถํฐ ์ฐพ๊ฒ ๋๋ค.
kim.sum = function() {
return 'this : ' + (this.first + this.second)
}
์ฐพ์ ๊ทธ ์์ฑ์ ํจ์์ด๋ค. ๊ทธ๋ฆฌ๊ณ ์คํ์ ํตํด ํด๋น ๊ธฐ๋ฅ์ด ๋์ํ๊ฒ ๋๋ค.
๋ง์ง๋ง์ผ๋ก ๊ฐ์ฒด kim ๊ณผ ๋ค๋ฅด๊ฒ lee ๋ผ๋ ๊ฐ์ฒด๋ sum() ์ด๋ผ๋ ๋ฉ์๋๋ฅผ ์ ์ ํ ๊ฒ์ด ์๋ค. ๊ทธ๋ฌ๋ฉด ์๋ฐ์คํฌ๋ฆฝํธ๋,
๋ด๊ฐ ์ฐพ๋ sum ์ด๋ผ๋ ๋ฉ์๋๋ฅผ lee ๋ผ๋ ๊ฐ์ฒด ์์ ์ด ๊ฐ์ง๊ณ ์์ง ์์ผ๋ฉด, ์ด ๊ฐ์ฒด์ ์์ฑ์์ธ Person ์
Person ์ Prototype ์ด๋ผ๊ณ ํ๋ ๊ฒ์ sum ์ด๋ผ ํ๋ ๋ฉ์๋๊ฐ ์ ์๋์ด ์๋์ง๋ฅผ ์ฐพ๊ฒ ๋๋ค.
Person.prototype.sum = function() {
return 'modified prototype : ' + (this.first + this.second)
}
lee.sum() ์ ๋ฐ๋ก ์์ ์ฝ๋๋ฅผ ๋ฆฌํดํด์ ์คํํ์ฌ ํด๋น ๊ธฐ๋ฅ์ด ๋์ํ๊ฒ ๋ง๋๋ ๊ฒ์ด๋ค.
๊ฐ์ฒด์ ์์ฑ, ๋ณ์๋ค์ ์์ฑ์ ์์ ๋ฃ๋ ๊ฒ์ด ์ผ๋ฐ์ ์ด๋ฉฐ,
ํจ์๋
์์ฑ์.prototype.ํจ์์ด๋ฆ = function() {
return ...
}
์ ํํ๋ก ์ ์ํ๋ ์ผ๋ฐ์ ์ธ ํจํด์ด๋ค ๋ผ๊ณ ์๊ฐํ๋ฉด ๋ ๋ฏ ์ถ๋ค.