diff --git "a/Mission2/\355\225\231\354\212\265\354\240\225\353\246\254(prototype,class).md" "b/Mission2/\355\225\231\354\212\265\354\240\225\353\246\254(prototype,class).md" deleted file mode 100644 index f0ad21e..0000000 --- "a/Mission2/\355\225\231\354\212\265\354\240\225\353\246\254(prototype,class).md" +++ /dev/null @@ -1,187 +0,0 @@ -# โœ๏ธPrototype - -## ๐Ÿ“Œ Prototype = Prototype Object + Prototype Link -1. Prototype property๊ฐ€ ๊ฐ€๋ฆฌํ‚ค๋Š” `Prototype Object` -2. ์ž๊ธฐ ์ž์‹ ์„ ๋งŒ๋“ค์–ด๋‚ธ ๊ฐ์ฒด์˜ ์›ํ˜•์„ ์˜๋ฏธํ•˜๋Š” `Prototype Link` - -
- -## ๐Ÿ“Œ Prototype Object(Prototype property) -ํ”„๋กœํ† ํƒ€์ž…์€ ์ž๊ธฐ ์ž์‹ ์„ ์ƒ์„ฑํ•˜๊ฒŒ ํ•œ ์ž์‹ ์˜ ์›ํ˜• ๊ฐ์ฒด์ด๋‹ค. ์›ํ˜• ๊ฐ์ฒด๋ผ๋Š” ํ”„๋กœํ† ํƒ€์ž…์€ function A() ํ•จ์ˆ˜ ๊ฐ์ฒด ๊ทธ ์ž์ฒด์ผ๊นŒ? ์•„๋‹ˆ๋‹ค!! - -์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ชจ๋“  ๊ฐ์ฒด๋Š” ์ƒ์„ฑ๊ณผ ๋™์‹œ์— ์ž๊ธฐ์ž์‹ ์ด ์ƒ์„ฑ๋  ๋‹น์‹œ์˜ ์ •๋ณด๋ฅผ ์ทจํ•œ `Prototype Object`๋ผ๋Š” ์ƒˆ๋กœ์šด ๊ฐ์ฒด๋ฅผ Cloningํ•ด์„œ ๋งŒ๋“ค์–ด๋‚ธ๋‹ค. `prototype`์ด ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค์–ด๋‚ด๊ธฐ ์œ„ํ•œ ์›ํ˜•์ด๋ผ๋ฉด ์ด `Prototype Object`๋Š” **์ž๊ธฐ ์ž์‹ ์˜ ๋ถ„์‹ ์ด๋ฉฐ ์ž์‹ ์„ ์›ํ˜•์œผ๋กœ ๋งŒ๋“ค์–ด์งˆ ๋‹ค๋ฅธ ๊ฐ์ฒด๊ฐ€ ์ฐธ์กฐํ•  ํ”„๋กœํ† ํƒ€์ž…์ด ๋œ๋‹ค.** ์ฆ‰ ๊ฐ์ฒด ์ž์‹ ์„ ์ด์šฉํ•  ๋‹ค๋ฅธ ๊ฐ์ฒด๋“ค์ด ํ”„๋กœํ† ํƒ€์ž…์œผ๋กœ ์‚ฌ์šฉํ•  ๊ฐ์ฒด๊ฐ€ Prototype Object์ธ ๊ฒƒ! - -
- -< ํ•จ์ˆ˜๊ฐ€ ์ •์˜๋  ๋•Œ ์ด๋ฃจ์–ด์ง€๋Š” ์ผ๋“ค! > -1. ํ•ด๋‹น ํ•จ์ˆ˜์— Constructor(์ƒ์„ฑ์ž) ์ž๊ฒฉ ๋ถ€์—ฌ -2. ํ•ด๋‹น ํ•จ์ˆ˜์˜ Prototype Object ์ƒ์„ฑ, ์—ฐ๊ฒฐ - -ํ•จ์ˆ˜๋ฅผ ์ •์˜ํ•˜๋ฉด ํ•จ์ˆ˜๋งŒ ์ƒ์„ฑ๋˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ Prototype Object๋„ ๊ฐ™์ด ์ƒ์„ฑ๋œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ƒ์„ฑ๋œ ํ•จ์ˆ˜๋Š” `prototype`์ด๋ผ๋Š” ์†์„ฑ์„ ํ†ตํ•ด `Prototype Object`์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค. Prototype Object๋Š” ์ผ๋ฐ˜์ ์ธ ๊ฐ์ฒด์™€ ๊ฐ™์œผ๋ฉฐ ๊ธฐ๋ณธ์ ์ธ ์†์„ฑ์œผ๋กœ `constructor`์™€ `__proto__`๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. ๋˜ํ•œ Prototype Object๋Š” ์ผ๋ฐ˜์ ์ธ ๊ฐ์ฒด์ด๋ฏ€๋กœ ์†์„ฑ์„ ๋งˆ์Œ๋Œ€๋กœ ์ถ”๊ฐ€/์‚ญ์ œํ•  ์ˆ˜ ์žˆ๋‹ค. -```javascript -Person.prototype.eyes = 2; -Person.prototype.nose = 1; -// prototype ์†์„ฑ์œผ๋กœ Prototype Object์— ์ ‘๊ทผํ•ด ์†์„ฑ์„ ์ถ”๊ฐ€ํ–ˆ๋‹ค. -``` - -
- -## ๐Ÿ“Œ Prototype Link(`__proto__`) -```javascript -function Person() {} - -Person.prototype.eyes = 2; -Person.prototype.nose = 1; - -let kim = new Person(); -let park = new Person(); - -console.log(kim); // Person { } -console.log(kim.eyes); // 2 -``` -kim์—๋Š” eyes๋ผ๋Š” ์†์„ฑ์ด ์—†๋Š”๋ฐ๋„ kim.eyes๋ฅผ ์‹คํ–‰ํ•˜๋ฉด 2๋ผ๋Š” ๊ฐ’์„ ์ฐธ์กฐํ•œ๋‹ค. Prototype Object์— ์กด์žฌํ•˜๋Š” eyes ์†์„ฑ์„ ์ฐธ์กฐํ–ˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์ด๊ฒƒ์ด ๊ฐ€๋Šฅํ•œ ์ด์œ ๋Š” kim์ด ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๋”ฑ ํ•˜๋‚˜์˜ ์†์„ฑ `__proto__`๊ฐ€ ๊ทธ๊ฒƒ์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ฃผ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. - -`__proto__` ์†์„ฑ์€ ๋ชจ๋“  ๊ฐ์ฒด๊ฐ€ ๋น ์ง์—†์ด ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์†์„ฑ์œผ๋กœ **๊ฐ์ฒด๊ฐ€ ์ƒ์„ฑ๋  ๋•Œ ์กฐ์ƒ์ด์—ˆ๋˜ ํ•จ์ˆ˜์˜ Prototype Object๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค.** kim๊ฐ์ฒด๋Š” Personํ•จ์ˆ˜๋กœ๋ถ€ํ„ฐ ์ƒ์„ฑ๋˜์—ˆ์œผ๋‹ˆ Person ํ•จ์ˆ˜์˜ Prototype Object๋ฅผ ๊ฐ€๋ฆฌํ‚ค๊ณ  ์žˆ๋Š” ๊ฒƒ! - -kim๊ฐ์ฒด๊ฐ€ eyes๋ฅผ ์ง์ ‘ ๊ฐ€์ง€๊ณ  ์žˆ์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— eyes ์†์„ฑ์„ ์ฐพ์„ ๋•Œ๊นŒ์ง€ ์ƒ์œ„ ํ”„๋กœํ† ํƒ€์ž…์„ ํƒ์ƒ‰ํ•œ๋‹ค. ์ตœ์ƒ์œ„์ธ Object์˜ Prototype Object๊นŒ์ง€ ๋„๋‹ฌํ–ˆ๋Š”๋ฐ๋„ ๋ชป ์ฐพ์•˜์„ ๊ฒฝ์šฐ undefined๋ฅผ ๋ฆฌํ„ดํ•œ๋‹ค. ์ด๋ ‡๊ฒŒ `__proto__`์†์„ฑ์„ ํ†ตํ•ด ์ƒ์œ„ ํ”„๋กœํ† ํƒ€์ž…๊ณผ ์—ฐ๊ฒฐ๋˜์–ด ์žˆ๋Š” ํ˜•ํƒœ๋ฅผ ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ(Chain)์ด๋ผ๊ณ  ํ•œ๋‹ค. - -์ด๋Ÿฐ ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ ๊ตฌ์กฐ๋•Œ๋ฌธ์— ๋ชจ๋“  ๊ฐ์ฒด๋Š” Object์˜ ์ž์‹์ด๋ผ๊ณ  ๋ถˆ๋ฆฌ๊ณ , Object Prototype Object์— ์žˆ๋Š” ๋ชจ๋“  ์†์„ฑ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค๋ฉด toStringํ•จ์ˆ˜๊ฐ€ ์žˆ๋‹ค. - -๋ชจ๋“  ๊ฐ์ฒด์˜ ํ™•์žฅ์€ ๊ฐ์ฒด๊ฐ€ ์†Œ์œ ํ•œ prototype Object๋ฅผ ํ†ตํ•ด ์ด๋ฃจ์–ด์ง€๋ฉฐ ์ด ์—ฐ๊ฒฐ์˜ ๋์€ Object ๊ฐ์ฒด์˜ prototype Object์ด๋‹ค. - -
-
- -## ๐Ÿ“Œ ์˜ˆ์‹œ๋กœ ์ดํ•ดํ•˜๊ธฐ - -```javascript -function foo(value) { - this.x = value; -} -let A = new foo('hello'); -console.log(A.x); //hello -console.log(A.prototype.x) //syntax error -``` -1. prototype ํ”„๋กœํผํ‹ฐ๋Š” Constructor๊ฐ€ ๊ฐ€์ง€๋Š” ํ”„๋กœํผํ‹ฐ๋‹ค. **prototype์€ ํ•จ์ˆ˜๊ฐ์ฒด๋งŒ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์†์„ฑ!!** -2. ์—ฌ๊ธฐ์„œ A๊ฐ์ฒด๋Š” ํ•จ์ˆ˜๊ฐ์ฒด๊ฐ€ ์•„๋‹ˆ๊ณ , ํ•จ์ˆ˜๊ฐ์ฒด๋ฅผ ํ†ตํ•ด ๋งŒ๋“ค์–ด์ง„ ๋‹จ์ผ ๊ฐ์ฒด์ผ ๋ฟ์ด๋‹ค. ์ฆ‰, A๋Š” prototype ํ”„๋กœํผํ‹ฐ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— A.prototype.x๊ฐ€ syntax error์ธ ๊ฒƒ์ด๋‹ค. -3. foo.prototype.x๋Š” ๋งž์ง€๋งŒ A.prototype.x๋Š” ์—๋Ÿฌ! - -
- -```javascript -let A = function () {}; -A.prototype.x = function() { - console.log('hello'); -}; -let B = new A(); -B.x(); - // hello -console.log(A.prototype); - // x: f () - // constructor: f () โ†’ Prototype Object ๊ธฐ๋ณธ ์†์„ฑ - // __proto__: Object โ†’ Prototype Object ๊ธฐ๋ณธ ์†์„ฑ -``` -1. A ํ•จ์ˆ˜์˜ prototype์†์„ฑ์ด `A Prototype Object`์— ์ ‘๊ทผํ•ด x๋ฉ”์„œ๋“œ๋ฅผ ์ถ”๊ฐ€ํ–ˆ๋‹ค. -2. B ๊ฐ์ฒด๋Š” ๋‹จ ํ•˜๋‚˜์˜ ์†์„ฑ `__proto__`๋ฅผ ๊ฐ–๊ณ  ์žˆ๊ณ , ์ด ์†์„ฑ์€ `A Prototype Object`์— ์ ‘๊ทผํ•ด x๋ฅผ ์ฐธ์กฐํ•œ๋‹ค. -3. A.prototype์œผ๋กœ A Prototype Object๋ฅผ ๋ณด๋ฉด, ๊ธฐ๋ณธ ์†์„ฑ์ธ constructor(Aํ•จ์ˆ˜), \__proto__์„ ๊ฐ€์ง€๊ณ  ์žˆ๊ณ , ์ถ”๊ฐ€ํ•œ x๋ฉ”์„œ๋“œ๋„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. -4. `__proto__`๋Š” prototype link๋กœ ์ƒ์œ„์—์„œ ๋ฌผ๋ ค๋ฐ›์€ ๊ฐ์ฒด์˜ ํ”„๋กœํ† ํƒ€์ž…์— ๋Œ€ํ•œ ์ •๋ณด์ด๋‹ค. A Prototype Object์˜ ์ƒ์œ„ ๊ฐ์ฒด๋Š” Object์ด๊ธฐ ๋•Œ๋ฌธ์— \__proto__ ์†์„ฑ๊ฐ’์œผ๋กœ Object๊ฐ€ ์žˆ๋Š”๊ฒƒ์ด๋‹ค. -5. Aํ•จ์ˆ˜๊ฐ€ ๋น„์–ด์žˆ๊ธฐ ๋•Œ๋ฌธ์— A Prototype Object์˜ constructor๊ฐ€ ๋น„์–ด์žˆ๋‹ค. A.prototype.x = function() {...}; ์ด๋ ‡๊ฒŒ ํ•œ๋‹ค๊ณ  ํ•ด์„œ A Prototype Object์˜ constructor ์†์„ฑ์ด ์ฑ„์›Œ์ง€์ง€๋Š” ์•Š๋Š”๋‹ค. constructor๋Š” Aํ•จ์ˆ˜๊ฐ€ ์ƒ์„ฑ๋˜๋Š” ๋‹น์‹œ์˜ ์ •๋ณด๋งŒ์„ ๊ฐ€์ง€๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ณ€๊ฒฝ์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค. A.prototype.x๋Š” A Prototype Object์— ์ƒˆ๋กœ์šด x๋ฉ”์„œ๋“œ๋ฅผ ๋งŒ๋“ค์–ด์„œ B.x();๊ฐ€ ์‹คํ–‰์ด ๋œ๋‹ค. -6. constructor์˜ ๋‚ด์šฉ์€ ๋ณ€๊ฒฝ์ด ๋ถˆ๊ฐ€(์žฌํ• ๋‹นX)ํ•˜์ง€๋งŒ, ์œ„์˜ ๊ฒฝ์šฐ์ฒ˜๋Ÿผ A.prototype.x๋กœ ๋ฐ–์—์„œ ๋ฉ”์„œ๋“œ๋ฅผ Prototype Object์— ์ถ”๊ฐ€ํ•  ๊ฒฝ์šฐ์—๋Š”, A.prototype.x๋กœ ์žฌ์ •์˜ํ•  ์ˆ˜ ์žˆ๋‹ค! **์ฆ‰, Prototype Object์˜ ๊ธฐ๋ณธ ์†์„ฑ์ธ constructor๋กœ ๋“ค์–ด๊ฐ€๋Š”์ง€, Prototype Object์˜ ๋ฉ”์„œ๋“œ๋กœ ์ƒˆ๋กœ ์ถ”๊ฐ€๊ฐ€ ๋˜๋Š” ๊ฒƒ์ธ์ง€์— ๋”ฐ๋ผ ์žฌ์ •์˜ ๊ฐ€๋Šฅ์—ฌ๋ถ€๊ฐ€ ๋‹ค๋ฅด๋‹ค๊ณ  ํ•  ์ˆ˜ ์žˆ๋‹ค!** - -
- -๋งŒ์•ฝ์— constructor์— x๋ฉ”์„œ๋“œ๊ฐ€ ์žˆ๊ณ , ์ƒ์„ฑ์ž ํ•จ์ˆ˜ ๋ฐ–์—์„œ ๋˜ A.prototype.x๋ฅผ ์“ด๋‹ค๋ฉด ์–ด๋–ป๊ฒŒ ๋ ๊นŒ? ๋ฐ‘์˜ ์˜ˆ์‹œ ์ฐธ๊ณ !! ๊ฒฐ๊ณผ๋ฅผ ๋จผ์ € ๋งํ•˜์ž๋ฉด, B.x();๋Š” constructor์— ์žˆ๋Š” x๋ฉ”์„œ๋“œ๋ฅผ ์‹คํ–‰ํ•œ๋‹ค. - -```javascript -let A = function () { - this.x = function () { - console.log('hello'); - }; -}; -A.prototype.x = function() { - console.log('world'); -}; -let B = new A(); - -B.x(); //hello -console.log(A.prototype); // {x: f, constructor: f} -A.prototype.x(); // world -B.__proto__.x(); //world -``` -1. A ์ƒ์„ฑ์ž ํ•จ์ˆ˜์— ์žˆ๋Š” x๋ฉ”์„œ๋“œ๊ฐ€ `A Prototype Object`์˜ constructor ์†์„ฑ๊ฐ’์œผ๋กœ ๋“ค์–ด๊ฐ€๊ฒŒ ๋˜๊ณ , ์ด๋Š” Aํ•จ์ˆ˜ ๋ฐ–์—์„œ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์—†๋‹ค.(A๊ฐ€ ์ƒ์„ฑ๋  ๋‹น์‹œ์˜ ์ •๋ณด๋งŒ์„ ๊ฐ€์ง€๊ธฐ ๋•Œ๋ฌธ์— ์žฌํ• ๋‹น ๋ถˆ๊ฐ€) -2. A.prototype.x();๋ฅผ ํ•˜๊ฒŒ ๋˜๋ฉด `A Prototype Object`์—์„œ ๊ธฐ๋ณธ ์†์„ฑ์ธ constructor๊ฐ€ ์•„๋‹Œ ์ƒˆ๋กœ์šด ๋ฉ”์„œ๋“œ๋กœ ์ถ”๊ฐ€๋œ๋‹ค. -3. B.x();๋Š” `A Prototype Object`์˜ `constructor`์— ์žˆ๋Š” ๋ฉ”์„œ๋“œ x๋ฅผ ์ฐธ์กฐํ•ด์„œ hello๋ฅผ ์ถœ๋ ฅํ•˜๊ณ , B.\__proto__.x();๋Š” `__proto__`์†์„ฑ์œผ๋กœ `A Prototype Object`์˜ x๋ฉ”์„œ๋“œ๋ฅผ ์ฐธ์กฐํ•ด world๋ฅผ ์ถœ๋ ฅํ•œ๋‹ค. - -
-
- -# โœ๏ธClass -- ํด๋ž˜์Šค๋Š” ๋ณ€์ˆ˜์™€ ํ•จ์ˆ˜ ์ค‘ ์—ฐ๊ด€์žˆ๋Š” ๋ณ€์ˆ˜์™€ ํ•จ์ˆ˜๋ฅผ ํ•˜๋‚˜๋กœ ๋ฌถ์„ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๋ฌธ๋ฒ•. -- ๊ฐ์ฒด ๋‹จ์œ„๋กœ ์ฝ”๋“œ ๊ทธ๋ฃนํ™”, ์ฝ”๋“œ ์žฌ์‚ฌ์šฉ์„ ์œ„ํ•ด ์‚ฌ์šฉํ•œ๋‹ค. -- ์ƒ์„ฑ์ž ํŒจํ„ด์˜ ๋ฉ”๋ชจ๋ฆฌ์‚ฌ์šฉ์˜ ๋‹จ์ ์„ ๊ทน๋ณตํ•˜๊ธฐ ์œ„ํ•ด์„œ prototype์ด๋ผ๋Š” ์†์„ฑ์˜ ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๊ฒƒ์ด JS์—์„œ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๋Š” ํ‘œ์ค€์ ์ธ ๋ฐฉ๋ฒ•์ด๋‹ค. -- ํ‘œํ˜„๋ฒ•์ด ๋„ˆ๋ฌด ๋ฒˆ๊ฑฐ๋กญ๊ธฐ ๋•Œ๋ฌธ์—, ES 2015์—์„œ๋Š” ES Classes๋ผ๋Š” ํ‘œ์ค€์œผ๋กœ Class ํ‚ค์›Œ๋“œ๋ฅผ ๋งŒ๋“ค์–ด์„œ OOP์ฒ˜๋Ÿผ ํด๋ž˜์Šค๋ฅผ ์ข€ ๋” ์ง๊ด€์ ์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ–ˆ๋‹ค. - -
- -- ๊ฐ์ฒด์˜ ๊ธฐ๋ณธ ์ƒํƒœ๋ฅผ ์„ค์ •ํ•ด์ฃผ๋Š” ์ƒ์„ฑ์ž ๋ฉ”์„œ๋“œ constructor()๋Š” new์— ์˜ํ•ด ์ž๋™์œผ๋กœ ํ˜ธ์ถœ๋˜๋ฏ€๋กœ, ํŠน๋ณ„ํ•œ ์ ˆ์ฐจ ์—†์ด ๊ฐ์ฒด๋ฅผ ์ดˆ๊ธฐํ™”ํ•  ์ˆ˜ ์žˆ๋‹ค. -- ์ผ๋ฐ˜์ ์ธ ํ•จ์ˆ˜๋Š” ์„ ์–ธ์‹์„ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ ํ˜ธ์ด์ŠคํŒ…์ด ๋˜์ง€๋งŒ ํด๋ž˜์Šค๋Š” ์ ์šฉ๋˜์ง€ ์•Š๋Š”๋‹ค. - ์ฆ‰, ํด๋ž˜์Šค๋ฅผ ์„ ์–ธํ•œ ํ›„์—๋งŒ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค. -- Class๋Š” ์‚ฌ์‹ค ํ•จ์ˆ˜์ด๊ธฐ ๋•Œ๋ฌธ์— ์„ ์–ธ์‹๊ณผ ํ‘œํ˜„์‹(๋ณ€์ˆ˜์— ํ• ๋‹น) ๋‘ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. -- ํ‘œํ˜„์‹ ์ค‘ ๊ธฐ๋ช… ํด๋ž˜์Šค ํ‘œํ˜„์‹์—์„œ๋Š” ํด๋ž˜์Šค ๋‚ด๋ถ€์—์„œ๋งŒ ์‚ฌ์šฉ๊ฐ€๋Šฅ. -- class body {} ์•ˆ์—์„œ๋Š” strict mode(์—„๊ฒฉํ•œ ๋ฌธ๋ฒ• ์ ์šฉ) -- ํด๋ž˜์Šค์˜ ๋ฉ”์„œ๋“œ ์‚ฌ์ด์— ์‰ผํ‘œ๋ฅผ ๋„ฃ์ง€ ์•Š๋Š”๋‹ค. ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด๊ณผ๋Š” ๋‹ค๋ฅด๋‹ค! ์‰ผํ‘œ ๋„ฃ์œผ๋ฉด ๋ฌธ๋ฒ• ์—๋Ÿฌ ๋ฐœ์ƒ. -```javascript -// ํด๋ž˜์Šค ์„ ์–ธ -class User { - constructor(name) { this.name = name; } - sayHi() { alert(this.name); } -} -console.log(typeof User); //function -``` -**< class User {} ๋ฌธ๋ฒ•๊ตฌ์กฐ๊ฐ€ ํ•˜๋Š” ์ผ >** -1. User๋ผ๋Š” ์ด๋ฆ„์„ ๊ฐ€์ง„ ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ ๋‹ค. ํ•จ์ˆ˜ ๋ณธ๋ฌธ์€ ์ƒ์„ฑ์ž ๋ฉ”์„œ๋“œ - constructor์—์„œ ๊ฐ€์ ธ์˜จ๋‹ค. - ์ƒ์„ฑ์ž ๋ฉ”์„œ๋“œ๊ฐ€ ์—†์œผ๋ฉด ๋ณธ๋ฌธ์ด ๋น„์›Œ์ง„ ์ฑ„๋กœ ํ•จ์ˆ˜๊ฐ€ ๋งŒ๋“ค์–ด์ง„๋‹ค. -2. sayHi ๊ฐ™์€ ํด๋ž˜์Šค ๋‚ด์—์„œ ์ •์˜ํ•œ ๋ฉ”์„œ๋“œ๋ฅผ User.prototype์— ์ €์žฅํ•œ๋‹ค. -```javascript -// โ—โ—โ—โ— -// User ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค๊ณ  ํ•จ์ˆ˜ ๋ณธ๋ฌธ์€ constructor์—์„œ ๊ฐ€์ ธ์˜ด -constructor(name) { - this.name = name; -} - -// โ—โ—โ—โ— -//ํด๋ž˜์Šค ๋‚ด ๋ฉ”์„œ๋“œ๋Š” User.prototype์— ์ €์žฅ -sayHi: function -constructor: User -``` - -new User๋ฅผ ํ˜ธ์ถœํ•ด ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค๊ณ , ๊ฐ์ฒด์˜ ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด ๋ฉ”์„œ๋“œ๋ฅผ ํ”„๋กœํ† ํƒ€์ž…์—์„œ ๊ฐ€์ ธ์˜จ๋‹ค. ์ด ๊ณผ์ •์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ์ฒด์—์„œ ํด๋ž˜์Šค ๋ฉ”์„œ๋“œ์— ์ ‘๊ทผ ๊ฐ€๋Šฅํ•˜๋‹ค. - -์ •๋ฆฌํ•˜์ž๋ฉด, -```javascript -class User { - constructor(name) { this.name = name; } - sayHi() { alert(this.name); } -} -// ํด๋ž˜์Šค๋Š” ํ•จ์ˆ˜, ์ƒ์„ฑ์ž ๋ฉ”์„œ๋“œ์™€ ๋™์ผ -console.log(User === User.prototype.constructor); //true -// ํด๋ž˜์Šค ๋‚ด๋ถ€์—์„œ ์ •์˜ํ•œ ๋ฉ”์„œ๋“œ๋Š” User.prototype์— ์ €์žฅ -console.log(User.prototype.sayHi) //alert(this.name); -// ํ˜„์žฌ ํ”„๋กœํ† ํƒ€์ž…์—๋Š” ๋ฉ”์„œ๋“œ๊ฐ€ ๋‘ ๊ฐœ -console.log(Object.getOwnPropertyNames(User.prototype)); -// constructor, sayHi -``` - -
- ---- - -## ์ฐธ๊ณ  -class - https://ko.javascript.info/class - -prototype - - https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67 - - http://insanehong.kr/post/javascript-prototype/ \ No newline at end of file