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

๐Ÿ…ฒClass

๊ฐ์ฒด๋ฅผ ๋งŒ๋“œ๋Š” ๊ณต์žฅ ์œผ๋กœ์„œ ๋‹ค๋ฅธ ์–ธ์–ด๋“ค์€ Class ๋ผ๋Š” ๊ฒƒ์„ ์ง€์›ํ–ˆ๋‹ค๊ณ  ํ•œ๋‹ค.

ํ•˜์ง€๋งŒ Javascript ๋Š” ECMAscript6 ์— ์ถ”๊ฐ€๋œ ๊ธฐ๋Šฅ์ด๋ผ๊ณ  ํ•œ๋‹ค.

(4) ๊นŒ์ง€๋Š” ์ „ํ†ต ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฐฉ์‹์„ ์‚ฌ์šฉ, Constructor function ์„ ํ†ตํ•ด ๊ฐ์ฒด๋ฅผ ์ฐ์–ด๋‚ด๋Š” ๋ฐฉ๋ฒ•์„ ํ•™์Šตํ–ˆ๋‹ค.

์ด์ œ Class ๋ฌธ๋ฒ•์„ ์ ์šฉํ•ด ๋ฐ”๊ฟ” ๋ณด์ž.

๐Ÿญ๊ฐ์ฒด๋ฅผ ๋งŒ๋“œ๋Š” ๊ณต์žฅ, Class

๋‹ค์‹œ ํ•œ๋ฒˆ Constructor ์˜ ์—ญํ• ์„ ๋– ์˜ฌ๋ฆฌ๋ฉด

  1. ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ ๋‹ค.
  2. ๊ฐ์ฒด์˜ ์ดˆ๊ธฐ์ƒํƒœ๋ฅผ ์„ธํŒ…ํ•œ๋‹ค.

์•„ํ•˜ ์ปจ์ŠคํŠธ๋Ÿญํ„ฐ๋Š” ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค๋ฉด์„œ ๊ฐ์ฒด์˜ ๊ธฐ๋ณธ์  ๊ธฐ๋Šฅ์„ ์„ธํŒ…ํ•˜๋Š”๊ตฌ๋‚˜.

์ƒ์„ฑ๋˜๋Š” ๊ฐ์ฒด๋ฅผ ์ดˆ๊ธฐํ™” ํ•˜๊ฒ ๊ตฌ๋‚˜.

๐Ÿ‘ฉ๐Ÿปโ€โš–๏ธํด๋ž˜์Šค ๋‚ด์˜ ํ•จ์ˆ˜๋Š”

class Person() {
  sum () {
    // ํด๋ž˜์Šค ๋‚ด์—์„œ์˜ ํ•จ์ˆ˜์˜ ๋ชจ์Šต์€ ๋งˆ์น˜ ์‹คํ–‰์„ ํ•˜๋Š” ๊ฑฐ ๊ฐ™์•„ ๋ณด์ด์ง€๋งŒ,
  } // ํด๋ž˜์Šค ๋‚ด์—์„œ๋Š” ํ•จ์ˆ˜๋ฅผ ์„ ์–ธํ•ด ๋‘๋Š” ํ˜•ํƒœ๋กœ ๋ด์•ผ ํ•œ๋‹ค.
}

๐Ÿฅ‡constructor ํ•จ์ˆ˜๋Š”

๊ฐ์ฒด๊ฐ€ ์ƒ์„ฑ๋  ๋•Œ ์ž๋™์œผ๋กœ ์ƒ์„ฑ๋˜๊ธฐ ์ „์— ์‹คํ–‰๋˜๋„๋ก ์•ฝ์†๋˜์–ด ์žˆ๋Š” ํ•จ์ˆ˜์ด๋ฉฐ ์ด๋ฅผ ํด๋ž˜์Šค ๋‚ด์— ๊ตฌํ˜„ํ•œ๋‹ค.

class Person{
  constructor(name, first, second){
    this.name = name;
    this.first = first;
    this.second = second;
  }
}

var kim = new Person('kim', 10, 20);
console.log("kim ์˜ ์ธ์Šคํ„ด์Šค ์ž…๋‹ˆ๋‹ค. ", kim)

kim ์˜ ์ธ์Šคํ„ด์Šค ์ž…๋‹ˆ๋‹ค.  Person {name: "kim", first: 10, second: 20}

๐Ÿ’Class ์•ˆ์— ๋ฉ”์†Œ๋“œ ๊ตฌํ˜„ํ•˜๊ธฐ

๋ฐฉ๋ฒ• 1. prototype ๋ฉ”์†Œ๋“œ ๊ณ ๋Œ€๋กœ ๋„ฃ๊ธฐ

class Person{
  constructor(name, first, second){
    this.name = name;
    this.first = first;
    this.second = second;
  }
  Person.prototype.sum = function() {
    return 'prototype : ' + (this.first + this.second)
  }
}

๋ฐฉ๋ฒ• 2. sum() ์„ ๊ทธ๋Œ€๋กœ class ๋‚ด์— ๋„ฃ๊ธฐ

class Person {
  constructor(name, first, second) {
    this.name = name
    this.first = first
    this.second = second
  }
  sum() {
    // ํด๋ž˜์Šค ๋‚ด ํ•จ์ˆ˜ sum() ๋Š” ์‹คํ–‰์ด ์•„๋‹ˆ๋ผ ์„ ์–ธ์ด๋‹ค!
    return 'sum()ํ•จ์ˆ˜ ์‹คํ–‰! : ' + (this.first + this.second)
  }
}

class ๋‚ด sum() ์„ ํ†ตํ•ด ๊ฐ™์€ ํด๋ž˜์Šค ์•ˆ์— ์†ํ•ด ์žˆ๋Š” ๋ชจ๋“  ๊ฐ์ฒด๊ฐ€ ๊ณต์œ ํ•˜๋Š” ํ•จ์ˆ˜๊ฐ€ ๋œ๋‹ค.

๐Ÿ”‘์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ class ์—์„œ ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•˜๋Š” ๊ณผ์ •!

  1. Javascript ๋Š” kim ์ด๋ผ๋Š” ๊ฐ์ฒด๊ฐ€ sum ํ•จ์ˆ˜๋ฅผ ๋”ฐ๋กœ ๊ฐ€์ง€๊ณ  ์žˆ๋Š”์ง€ ๋จผ์ € ํ™•์ธํ•œ๋‹ค.
var kim = new Person('kim', 10, 20)
kim.sum = function() {
  return 'this : ' + (this.first + this.second)
}

๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉด ๊ทธ๊ฒƒ์„ ์‹คํ–‰ํ•˜๊ฒŒ ํ•œ๋‹ค.

์ฆ‰ ๊ฐ์ฒด ํ•˜๋‚˜๋งŒ ๋‹ค๋ฅธ ๊ธฐ๋Šฅ์„ ํ•˜๊ฒŒ ๋˜๋Š” ์…ˆ์ด๋‹ค.

  1. sum ํ•จ์ˆ˜๋ฅผ ๋”ฐ๋กœ ๊ฐ€์ง€๊ณ  ์žˆ์ง€ ์•Š๋‹ค๋ฉด, kim ์ด๋ผ๋Š” ๊ฐ์ฒด๋ฅผ ๋งŒ๋“  ํด๋ž˜์Šค Person ์•ˆ์— sum ์ด๋ผ ํ•˜๋Š” ๋ฉ”์†Œ๋“œ๊ฐ€ ์ •์˜๋˜์–ด ์žˆ๋Š”์ง€ ํ™•์ธํ•œ ๋’ค์— ๊ทธ๊ฒƒ์„ ์‹คํ–‰ํ•˜๊ฒŒ ๋œ๋‹ค.

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

GitHubMediumTwitterFacebook