๐ŸŽ๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ (4) Prototype

โ™ป๏ธPrototype ์ด๋ž€?

์ •์˜ : ์–ด๋–ค ์‚ฌ๋ฌผ์˜ ๊ณตํ†ต๋œ ๋ชจ์Šต, ๋ณธ๋ž˜์˜ ๋ชจ์Šต

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 ...
}

์˜ ํ˜•ํƒœ๋กœ ์ •์˜ํ•˜๋Š” ์ผ๋ฐ˜์ ์ธ ํŒจํ„ด์ด๋‹ค ๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉด ๋  ๋“ฏ ์‹ถ๋‹ค.


Written by@[DotoriMook]
ํ”„๋ก ํŠธ์—”๋“œ ์ฃผ๋‹ˆ์–ด ๊ฐœ๋ฐœ์ž ๋„ํ† ๋ฆฌ๋ฌต์˜ ๊ธฐ์ˆ ๊ฐœ๋ฐœ ๋ธ”๋กœ๊ทธ ์ž…๋‹ˆ๋‹ค.

GitHubMediumTwitterFacebook