avatar
Published on

javascript class

Author
  • avatar
    Name
    yceffort

Class

ํด๋ž˜์Šค๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์ด๋ ‡๊ฒŒ ์ƒ๊ฒผ๋‹ค.

class Member {
  getName() {
    return '์ด๋ฆ„'
  }
}

let obj = new Member()
console.log(obj.getName())

ํŠน์ง•

1. strict ๋ชจ๋“œ์—์„œ ์‹คํ–‰

๋”ฑํžˆ 'use strict';๋ฅผ ์„ ์–ธํ•˜์ง€ ์•Š์•„๋„, ํด๋ž˜์Šค์˜ ์ฝ”๋“œ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ strict๋ชจ๋“œ์—์„œ ์‹คํ–‰๋œ๋‹ค. ๊ทธ๋ ‡๊ฒŒ ๋˜๋ฉด, ๋‹น์—ฐํžˆ strict๋ชจ๋“œ์˜ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ํŠน์ง•์„ ์ž๋™์œผ๋กœ ๋”ฐ๋ฅด๊ฒŒ ๋œ๋‹ค.

2. ํด๋ž˜์Šค ๋‚ด ๋ฉ”์„œ๋“œ ์ž‘์„ฑ

class Member {
  setName(name) {
    this.name = name
  }

  getName(name) {
    this.name = name
  }
}

๋ณด์ด๋Š” ๊ฒƒ์ฒ˜๋Ÿผ, functionํ‚ค์›Œ๋“œ์™€ :๊ฐ€ ์—†์ด ๋ฉ”์„œ๋“œ ์ด๋ฆ„๋งŒ ์‚ฌ์šฉํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ฉ”์„œ๋“œ ์‚ฌ์ด์— ;๊ฐ€ ๋ถˆํ•„์š”ํ•˜๋‹ค. ๋‹ค๋งŒ function ์„ ์„ ์–ธํ•˜๋ฉด ๊ธ€๋กœ๋ฒŒ ์˜ค๋ธŒ์ ํŠธ์— ์„ค์ •๋˜๋Š” ๊ฒƒ๊ณผ ๋‹ค๋ฅด๊ฒŒ, class๋Š” ๊ทธ๋ ‡์ง€ ์•Š๋‹ค. ๊ทธ๋ฆฌ๊ณ  class์˜ object property๋Š” for()๋ฌธ ๋“ฑ์œผ๋กœ ์—ด๊ฑฐํ•  ์ˆ˜ ์—†๋‹ค.

3. ํ”„๋กœํผํ‹ฐ์— ์—ฐ๊ฒฐ

class Member {
  setName(name) {
    this.name = name
  }
}

์œ„ ์ฝ”๋“œ์™€

Member.prototype.setName = function (namn) {
  this.name = name
}

์œ„ ์ฝ”๋“œ๋Š” ๊ฐ™๋‹ค.

Constructor

constructor๋Š” ํด๋ž˜์Šค ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•˜๊ณ , ์ƒ์„ฑํ•œ ์ธ์Šคํ„ด์Šค๋ฅผ ์ดˆ๊ธฐํ™”ํ•˜๋Š” ์—ญํ• ์„ ํ•œ๋‹ค. new Member()๋ฅผ ์‹คํ–‰ํ•˜๋ฉด, Member.prototype.constructor๊ฐ€ ๋จผ์ € ํ˜ธ์ถœ๋œ๋‹ค. ํด๋ž˜์Šค์— ์ด๋ฅผ ์ž‘์„ฑํ•˜์ง€ ์•Š์œผ๋ฉด, prototype์˜ ๋””ํดํŠธ constructor๊ฐ€ ํ˜ธ์ถœ๋œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด constructor๊ฐ€ ์—†์œผ๋ฉด ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์—†๋‹ค. ๊ธฐ์กด es5๋ฌธ๋ฒ•์—์„œ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์ด ๋””ํดํŠธ constructor๋ฅผ ํ˜ธ์ถœํ•ด์„œ ์ด๋ฅผ ํ™œ์šฉํ•  ์ˆ˜ ์—†์—ˆ์ง€๋งŒ, es6์—์„œ ๋ถ€ํ„ฐ๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ์ด๋ฅผ ์ •์˜ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค.

class Member {
  constructor(name) {
    this.name = name
  }

  getName() {
    return this.name
  }
}

let newMember = new Member('๋ผ์ด์˜ค๋„ฌ ๋ฉง์‹œ')
console.log(newMember.getName())

๋งŒ์•ฝ constructor์—์„œ ์ด์ƒํ•œ ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•˜๋ฉด ์–ด๋–ป๊ฒŒ ๋ ๊นŒ?

constructor() {
    return 1;
}

constructor์—์„œ number๋‚˜ string์„ ๋ฐ˜ํ™˜ํ•˜๋ฉด, ์ด๋ฅผ ๋ฌด์‹œํ•˜๊ณ  ์ƒ์„ฑํ•œ ์ธ์Šคํ„ด์Šค๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ฒŒ ๋œ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ object๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋ฉด ์–ด๋–ป๊ฒŒ ๋ ๊นŒ?

class Member {
  constructor(name) {
    return {name: '๋ฉ”์ผ“ํŠธ'}
  }

  getName() {
    return this.name
  }
}

let newMember = new Member('๋ผ์ด์˜ค๋„ฌ ๋ฉง์‹œ')
console.log(newMember.name)
console.log(newMember.getName)
๋ฉ”์ผ“ํŠธ
undefined

name์ด ๋ฉ”์ผ“ํŠธ์ธ object๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋ฉด์„œ, newMember ํด๋ž˜์Šค์—๋Š” name๋ฐ–์— ๋‚จ์ง€ ์•Š๊ฒŒ ๋˜์—ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  getName์€ ์กด์žฌํ•˜์ง€ ์•Š์•„์„œ undefined๊ฐ€ ์ถœ๋ ฅ๋œ๋‹ค.

getter, setter

class Member {
  set setName(name) {
    this.name = name
  }

  get getName(name) {
    return this.name
  }
}