๐Ÿ˜ฉ TIL) JavaScript์˜ Class

Solmiiยท2020๋…„ 5์›” 3์ผ
0

JavaScript

๋ชฉ๋ก ๋ณด๊ธฐ
8/24
post-thumbnail

์‹œ๊ฐ„ ๋‚ ๋•Œ๋งˆ๋‹ค MDN-JavaScript reference ์ž์ฃผ ํ™•์ธํ•˜๊ณ  ๊ณต๋ถ€ํ•  ๊ฒƒ!

class์™€ object์˜ ์ฐจ์ด

class?

  • ๋ถ•์–ด๋นต ๋งŒ๋“œ๋Š” ๊ธฐ๊ณ„! (ํ‹€)
  • blueprint, template ์ด๋ผ๊ณ ๋„ ๋ถˆ๋ฆฐ๋‹ค.
  • declare once โ‡’ ์ด class์—๋Š” ์ด๋Ÿฐ ๋ฐ์ดํ„ฐ๊ฐ€ ๋“ค์–ด์˜ฌ ์ˆ˜ ์žˆ์–ด! ๋ผ๊ณ  ์ •์˜ํ•˜๊ณ  ํ•œ๋ฒˆ๋งŒ ์„ ์–ธํ•œ๋‹ค.
  • no data in โ‡’ class ์ž์ฒด์—๋Š” ๋ฐ์ดํ„ฐ๊ฐ€ ๋“ค์–ด์žˆ์ง€ ์•Š๋‹ค.

object?

  • ๋ถ•์–ด๋นต ๊ธฐ๊ณ„์— ๋“ค์–ด๊ฐ€๋Š” ๋ถ•์–ด๋นต ์žฌ๋ฃŒ!
    (ํŒฅ data๋ฅผ ๋„ฃ์œผ๋ฉด ํŒฅ๋ถ•์–ด๋นต, ํฌ๋ฆผ data๋ฅผ ๋„ฃ์œผ๋ฉด ํฌ๋ฆผ๋ถ•์–ด๋นต)
  • instance of a class โ‡’ class๋ฅผ ์ด์šฉํ•ด์„œ ์ƒˆ๋กœ์šด instance๋ฅผ ์ƒ์„ฑํ•œ ๊ฒƒ์ด ๋ฐ”๋กœ object
  • created many times โ‡’ ๋งŽ์ด ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค!
  • data in โ‡’ class๋Š” ์ •์˜๋งŒ ํ•œ ๊ฒƒ์ด๋ผ, ๋ฐ์ดํ„ฐ์— ์˜ฌ๋ผ๊ฐ€์ง€ ์•Š์ง€๋งŒ object๋Š” ์‹ค์ œ ๋ฐ์ดํ„ฐ์— ์˜ฌ๋ผ๊ฐ„๋‹ค.

class

class ๋ž€?

class๋ž€, ์—ฐ๊ด€์„ฑ์žˆ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ํ•œ๋ฐ ๋ฌถ์–ด์ฃผ๋Š” container ๊ฐ™์€ ์•„์ด!
class์•ˆ์—๋Š”, ์ด๋ ‡๊ฒŒ name๊ณผ age๊ฐ™์€ Property(์†์„ฑ) = field ๊ฐ€ ๋“ค์–ด์žˆ๊ณ , speak() ์ด๋ผ๋Š” Function(ํ•จ์ˆ˜) = method ๊ฐ€ ๋“ค์–ด์žˆ๋‹ค.

class๋Š” ์ด๋ ‡๊ฒŒ ์„œ๋กœ ์—ฐ๊ด€๋œ fields ์™€ methods ๋กœ ๊ตฌ์„ฑ๋˜์–ด์ ธ ์žˆ๋‹ค.

๊ฐ„ํ˜น method๋Š” ์—†๊ณ , fields ๋กœ๋งŒ ๊ตฌ์„ฑ๋œ class๋„ ์žˆ๋Š”๋ฐ, ์ด๋ฅผ data class ๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค.

  • ES2015(ES6) ๋ถ€ํ„ฐ ๋„์ž…๋˜์—ˆ๋‹ค.
  • ๊ธฐ์กด์— ์กด์žฌํ•˜๋˜ ํ”„๋กœํ† ํƒ€์ž…์„ ๊ธฐ๋ฐ˜์œผ๋กœ, class๋ผ๋Š” ๋ฌธ๋ฒ•๋งŒ ์ƒˆ๋กœ ์ถ”๊ฐ€๋˜์—ˆ๋‹ค! โ‡’ Syntatic Sugar

Syntatic Sugar?

๐Ÿ‘‰ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด ์ฐจ์›์—์„œ ์ œ๊ณต๋˜๋Š” ๋…ผ๋ฆฌ์ ์œผ๋กœ ๊ฐ„๊ฒฐํ•˜๊ฒŒ(=๋‹ฌ๋‹ฌํ•˜๊ฒŒ) ํ‘œํ˜„ํ•˜๋Š” ๊ฒƒ
๐Ÿ‘‰ ์ค‘๋ณต๋˜๋Š” ๋กœ์ง์„ ๊ฐ„๊ฒฐํ•˜๊ฒŒ ํ‘œํ˜„ํ•˜๊ธฐ ์œ„ํ•ด ๋‚˜ํƒ€๋‚˜๊ฒŒ ๋˜์—ˆ๋‹ค.
(์˜ˆ๋ฅผ ๋“ค์–ด x = x + 5; ๋ผ๋Š” ์ฝ”๋“œ๋Š” ์นด์นด์˜ค 99% ๋ฒ„์ „์ด๊ณ , x += 5; ๊ฐ€ ๋‹ฌ๋‹ฌํ•œ Syntatic Sugar์ด๋‹ค.)


Method (๋ฉ”์†Œ๋“œ)

์–ด๋–ค ๊ฐ์ฒด์˜ ์†์„ฑ์œผ๋กœ ์ ‘๊ทผํ•ด์„œ ์‚ฌ์šฉํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ๋ฉ”์†Œ๋“œ(method)๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค.

โ‡’ ํ•จ์ˆ˜๋ผ๋Š” ์ด๋ฆ„์ด ์žˆ๋Š”๋ฐ, ์™œ ๋ฉ”์†Œ๋“œ๋ผ๊ณ  ๋ถ€๋ฅด๋Š” ๊ฑธ๊นŒ?
๊ทธ ์ด์œ ๋Š” ๋‹ค๋ฅธ ํ•จ์ˆ˜์™€๋Š” ๋‹ค๋ฅด๊ฒŒ ๋™์ž‘ํ•˜๊ธฐ ๋•Œ๋ฌธ!

๋ฉ”์†Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด : ๋ฐ์ดํ„ฐ์™€, ๊ทธ ๋ฐ์ดํ„ฐ์™€ ๊ด€๋ จ๋œ ๋™์ž‘์„ ๊ฐ์ฒด๋ผ๋Š” ํ•˜๋‚˜์˜ ๋‹จ์œ„๋กœ ๋ฌถ์–ด์„œ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๋‹ค!


this

๋ฉ”์†Œ๋“œ ํ˜ธ์ถœ ์‹œ์— ํ•ด๋‹น ๋ฉ”์†Œ๋“œ๋ฅผ ๊ฐ–๊ณ  ์žˆ๋Š” ๊ฐ์ฒด์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค.

์ƒ์„ฑ์ž ์•ˆ์—์„œ this ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ƒˆ๋กœ ๋งŒ๋“ค์–ด์งˆ ๊ฐ์ฒด์˜ ์†์„ฑ์„ ์ง€์ •ํ•ด์ค„ ์ˆ˜ ์žˆ๋‹ค.

ํ•จ์ˆ˜ ๋‚ด๋ถ€์˜ this ํ‚ค์›Œ๋“œ๊ฐ€ ์‹ค์ œ๋กœ ๋ฌด์—‡์„ ๊ฐ€๋ฆฌํ‚ฌ ๊ฒƒ์ธ๊ฐ€๋Š”, ๋ฉ”์†Œ๋“œ๊ฐ€ ์–ด๋–ป๊ฒŒ ์ •์˜๋˜๋Š”๊ฐ€์— ์˜ํ•ด ๊ฒฐ์ •๋˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ๋ฉ”์†Œ๋“œ๊ฐ€ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉ๋˜๋Š”๊ฐ€์— ์˜ํ•ด ๊ฒฐ์ •๋œ๋‹ค.

์ด๊ฒŒ ๋ญ”๋ง์ธ๊ณ  ํ•˜๋‹ˆ...

function introduce() {
  return `์•ˆ๋…•ํ•˜์„ธ์š”, ์ œ ์ด๋ฆ„์€ ${this.name}์ž…๋‹ˆ๋‹ค.`;
}

const person1 = {
  name: '์†”๋ฏธ',
  introduce // ์žฌ์‚ฌ์šฉ๋œ ํ•จ์ˆ˜
};

const person2 = {
  name: '์ฝ”๋ฆฐ์ด',
  introduce // ์žฌ์‚ฌ์šฉ๋œ ํ•จ์ˆ˜
};

person1.introduce(); // ์•ˆ๋…•ํ•˜์„ธ์š”, ์ œ ์ด๋ฆ„์€ ์†”๋ฏธ์ž…๋‹ˆ๋‹ค.
person2.introduce(); // ์•ˆ๋…•ํ•˜์„ธ์š”, ์ œ ์ด๋ฆ„์€ ์ฝ”๋ฆฐ์ด์ž…๋‹ˆ๋‹ค.

introduce ๋ผ๋Š” ๊ฐ™์€ ํ•จ์ˆ˜๋Š” person1 ๊ณผ person2 ์—์„œ ์žฌ์‚ฌ์šฉ ํ–ˆ๋Š”๋ฐ๋„, ๊ฒฐ๊ณผ๊ฐ’์„ ๋ณด๋ฉด person1๊ณผ 2๋Š” ๋‹ค๋ฅธ ์ด๋ฆ„์ด ์ถœ๋ ฅ๋œ๋‹ค. ์ฆ‰, introduce ํ•จ์ˆ˜์— ์‚ฌ์šฉ๋œ this ๋Š” person1,2 ์—์„œ ๊ฐ๊ฐ ๋‹ค๋ฅธ ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฅดํ‚จ ๊ฒƒ!

๊ฐ™์€ ํ•จ์ˆ˜์ž„์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ์–ด๋–ค ๊ฐ์ฒด์˜ ๋ฉ”์†Œ๋“œ๋กœ ์‚ฌ์šฉ๋˜๋Š๋ƒ์— ๋”ฐ๋ผ ๋ฉ”์†Œ๋“œ ๋‚ด๋ถ€์˜ this๊ฐ€ ๊ฐ€๋ฆฌํ‚ค๋Š” ๊ฐ์ฒด๊ฐ€ ๋‹ฌ๋ผ์งˆ ์ˆ˜ ์žˆ๋‹ค!

๋‹ค๋งŒ, ํ™”์‚ดํ‘œ ํ•จ์ˆ˜์—์„œ๋Š” this ํ‚ค์›Œ๋“œ๋ฅผ ์ „ํ˜€ ๋‹ค๋ฅด๊ฒŒ ์ทจ๊ธ‰ํ•œ๋‹ค.
ํ™”์‚ดํ‘œ ํ•จ์ˆ˜์™€ this ์ด์•ผ๊ธฐ๋Š” ๋‹ค์Œ ์‹œ๊ฐ„์— ๊ณ„์†...


class ์„ ์–ธ

class Person {
  constructor(name, age) { // constructor
    this.name = name;  // field
    this.age = age;
  }
  speak() { //method
    console.log(`${this.name} hello!`);
  }
} // ๋จผ์ €, class์— ์–ด๋–ค data๊ฐ€ ๋“ค์–ด๊ฐˆ ์ง€ ์ •์˜ํ•œ ํ›„์—

const solmi = new Person("solmi", 26); // ์‹ค์ œ data๋ฅผ ์ž…๋ ฅ
console.log(solmi.name) // solmi ์ถœ๋ ฅ
console.log(solmi.age) // 26 ์ถœ๋ ฅ

new

โ‡’ ์ด๋ ‡๊ฒŒ ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค ๋•Œ new ํ‚ค์›Œ๋“œ์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ์ƒ์„ฑ์ž (Constructor) ๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค!

โ‡’ ์ƒ์„ฑ์ž์˜ ์ด๋ฆ„์€ ๋ณ€์ˆ˜์™€๋Š” ๋‹ค๋ฅด๊ฒŒ ๋Œ€๋ฌธ์ž๋กœ ์‹œ์ž‘ํ•œ๋‹ค.

constructor

โ‡’ ์ƒ์„ฑ์ž์˜ prototype ์†์„ฑ์— ์ž๋™ ์ƒ์„ฑ๋˜๋Š” ๊ฐ์ฒด ์†์„ฑ์ด๋‹ค. ์ด ์†์„ฑ์—๋Š” ์ƒ์„ฑ์ž ์ž์‹ ์ด ์ €์žฅ๋œ๋‹ค.

์ด๋ฅผ ํ†ตํ•ด, ์–ด๋–ค ๊ฐ์ฒด๊ฐ€ ์–ด๋–ค ์ƒ์„ฑ์ž๋กœ๋ถ€ํ„ฐ ์ƒ์„ฑ๋˜์—ˆ๋Š”์ง€ ์•Œ์•„๋‚ผ ์ˆ˜ ์žˆ๋‹ค.

solmi.constructor === Person // true

Getter (ํš๋“์ž) & Setter (์„ค์ •์ž)

Javascript์—์„œ getter, setter ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ ๋Š” OOP์˜ ๊ธฐ๋ณธ ๊ฐœ๋… ์ค‘ ํ•˜๋‚˜์ธ ์บก์Šํ™”(encapsulation) ๋•Œ๋ฌธ์ด๋‹ค.
์บก์Šํ™”๋ž€? ์ผ๋‹จ ์ง€๊ธˆ๊นŒ์ง€ ์ดํ•ดํ•œ ๋ฐ”๋กœ๋Š”, API๋Š” ๋…ธ์ถœํ•˜๋˜, ๋‚ด๋ถ€ ์˜ค๋ธŒ์ ํŠธ์˜ ์„ฑ์งˆ์„ ์™ธ๋ถ€์—์„œ ์ง์ ‘ ๊ด€์—ฌํ•˜์ง€ ๋ชปํ•˜๊ฒŒ ๊ฐ์ถ”๊ณ , ์˜ค์ง ์˜ค๋ธŒ์ ํŠธ๊ฐ€ ์ œ๊ณตํ•˜๋Š” ๋ฃจํŠธ๋ฅผ ํ†ตํ•ด์„œ๋งŒ ๊ด€์—ฌํ•  ์ˆ˜ ์žˆ๊ฒŒ๋” ํ•˜๋Š” ๊ฒƒ....์ด๋‹ค.

์•„์ง์€ ๋„ˆ๋ฌด๋„ˆ๋ฌด๋„ˆ๋ฌดX99 ์–ด๋ ค์šด ๊ฐœ๋…์ด๋ผ ์—ฌ๊ธฐ์„œ ์ด๋งŒ ๋ง์ค„์ž„...ใ… ใ…  OOP์— ๋Œ€ํ•ด ๋” ๊ณ ๋ฏผํ•ด๋ณด๊ณ , ๊ทธ ํ›„์— ๊ฐ์ฑ„ํ™”๋‚˜ ์ถ”์ƒํ™” ๋“ฑ๋“ฑ OOP์˜ ๊ฐœ๋…๋“ค์„ ์ข€ ์ •๋ฆฌํ•ด๋ด์•ผ๊ฒ ๋‹ค.

class User {
  constructor {firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }

  get age() {
    return this._age; //_age ๋ผ๋Š” ์ด๋ฆ„์„ ์‚ฌ์šฉํ–ˆ์ง€๋งŒ constructor๋‚˜ console.log ๋“ฑ์—์„œ๋Š” age๋ฅผ ์ด์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ๋ฐ”๋กœ ๋‚ด๋ถ€์ ์œผ๋กœ getter&setter๋ฅผ ์ด์šฉํ–ˆ๊ธฐ ๋•Œ๋ฌธ
  }

  set age(value) { // _age ์— ์ €์žฅ๋œ ๊ฐ’์ด 0๋ฏธ๋งŒ์ด๋ผ๋ฉด 0์„ ์“ฐ๊ณ , ์•„๋‹ˆ๋ผ๋ฉด ์ง€์ •๋œ value๋ฅผ ์‚ฌ์šฉํ•˜๊ฒ ๋‹ค.
    this._age = value < 0 ? 0 : value;
  }
}

const user1 = new User("steve", "jobs", -1);
console.log(user1.age); // 0 ์ถœ๋ ฅ( user1์˜ age ๋ฅผ -1๋กœ ์ง€์ •ํ–ˆ์ง€๋งŒ, getter&setter ์„ค์ •๊ฐ’ ๋•Œ๋ฌธ์— 0์ด ์ถœ๋ ฅ๋จ)

โ‡’ ์†”์งํžˆ ์ด๊ฒŒ ๋ญ”๋ง์ธ์ง€ @_@ ์ง„์งœ ๋„˜๋‚˜ ์–ด๋ ค์šด ๊ฐœ๋…์ด๋ผ ์ผ๋‹จ ์Šคํ‚ต....ใ…  ๋‚˜์ค‘์— OOP ์ •๋ฆฌํ•˜๋ฉด์„œ ๋‹ค์‹œ ๊ณต๋ถ€ํ•ด๋ด์•ผ ๊ฒ ๋‹น


Public & Private fields

class Experiment {
   publicField = 2;
   #privateField = 0; 
}

const experiment = new Experiment();
console.log(experiment.publicField); // 2 ์ถœ๋ ฅ
console.log(experiment.privateField); // undefined ์ถœ๋ ฅ

publicField : ์™ธ๋ถ€์—์„œ ์ ‘๊ทผ ๊ฐ€๋Šฅ
#privateField : ์•ž์— # ์„ ๋ถ™์ด๋ฉด class ๋‚ด๋ถ€ ์—์„œ๋งŒ ์ ‘๊ทผ ๊ฐ€๋Šฅ. ์™ธ๋ถ€์—์„œ๋Š” ์ˆ˜์ •์€ ์ปค๋…• ์ฝ์„ ์ˆ˜๋„ ์—†์Œ.

์ตœ๊ทผ์— ์ถ”๊ฐ€๋œ ๊ธฐ๋Šฅ์ด๋ผ, IE, ์‚ฌํŒŒ๋ฆฌ ๋“ฑ์—์„œ ์ง€์›๋˜์ง€ ์•Š๋Š”๋‹ค.


Static (์ •์  ๋ฉ”์†Œ๋“œ)

class Article {
  static publisher = "Solmi";
    constructor(articleNember) {
    this.articleNumber = articleNumber;
  }

  static printPublisher() {
    console.log(Article.publisher);
  }
}

const article1 = new Article(1); 
console.log(article1.publisher); // undefined ์ถœ๋ ฅ
console.log(Article.publisher); // Solmi ์ถœ๋ ฅ

object์— ์ƒ๊ด€์—†์ด, class ์ž์ฒด์— ์—ฐ๊ฒฐ๋œ ๋ฉ”์†Œ๋“œ

์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋‹ค๋ฅธ object์˜ ๊ฐ’๊ณผ๋Š” ๋ณ„๊ฐœ๋กœ, ๋ชจ๋“  object์— ๊ณต๋™์œผ๋กœ ์ ์šฉํ•˜๊ณ  ์‹ถ์€ field๋‚˜ method๋Š” static ์œผ๋กœ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

TypeScript ์—์„œ๋„ ์ž์ฃผ ์‚ฌ์šฉ๋œ๋‹ค.

  • ๋“ค์–ด์˜ค๋Š” data์— ์ƒ๊ด€์—†์ด ๊ณตํ†ต์ ์œผ๋กœ ์‚ฌ์šฉ๋˜๋Š” ๊ฐ’์€ static ์œผ๋กœ ์ž‘์„ฑํ•˜๋ฉด ๋ฉ”๋ชจ๋ฆฌ์˜ ์‚ฌ์šฉ์„ ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค.
  • ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜(application)์„ ์œ„ํ•œ ์œ ํ‹ธ๋ฆฌํ‹ฐ(utility) ํ•จ์ˆ˜๋ฅผ ์ƒ์„ฑํ•˜๋Š”๋ฐ ์ฃผ๋กœ ์‚ฌ์šฉํ•œ๋‹ค.

์ตœ๊ทผ์— ์ถ”๊ฐ€๋œ ๊ธฐ๋Šฅ์ด๋ผ, IE, ์‚ฌํŒŒ๋ฆฌ ๋“ฑ์—์„œ ์ง€์›๋˜์ง€ ์•Š๋Š”๋‹ค.


* (Generator ๋ฉ”์†Œ๋“œ)

generator ๋ฉ”์†Œ๋“œ๋ฅผ ์ •์˜ํ•˜๋ ค๋ฉด, ๋ฉ”์†Œ๋“œ ์ด๋ฆ„ ์•ž์— * ๊ธฐํ˜ธ๋ฅผ ๋ถ™์—ฌ์ค€๋‹ค.
โ‡’ iterable ๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ํŠน๋ณ„ํ•œ ํ˜•ํƒœ์˜ ๋ฉ”์†Œ๋“œ์ด๋ฉฐ, Generator ํ•จ์ˆ˜์™€ ๋™์ผํ•˜๊ฒŒ ๋™์ž‘ํ•œ๋‹ค.

์ž์„ธํ•œ ๋‚ด์šฉ์€ Iterable ์— ๋Œ€ํ•ด ๊ณต๋ถ€ํ• ๋•Œ ๋” ์ž์„ธํžˆ ์ •๋ฆฌ!!


์ƒ์†(Inheritance)๊ณผ ๋‹คํ˜•์„ฑ(Polymorphism)

ํ•œ ํด๋ž˜์Šค์˜ ๊ธฐ๋Šฅ์„ ๋‹ค๋ฅธ ํด๋ž˜์Šค์—์„œ ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

class Parent { // ๋ถ€๋ชจ ํด๋ž˜์Šค or ์Šˆํผ ํด๋ž˜์Šค(superclass)
  // ...
}

class Child extends Parent { // ์ž์‹ ํด๋ž˜์Šค or ์„œ๋ธŒ ํด๋ž˜์Šค(subclass)
  // ...
}

โ‡’ extends ํ‚ค์›Œ๋“œ๋ฅผ ํ†ตํ•ด Child ํด๋ž˜์Šค๊ฐ€ Parent ํด๋ž˜์Šค๋ฅผ ์ƒ์†

์ด๋ฅผ '๋ถ€๋ชจ ํด๋ž˜์Šค-์ž์‹ ํด๋ž˜์Šค ๊ด€๊ณ„' ํ˜น์€ '์Šˆํผ ํด๋ž˜์Šค(superclass)-์„œ๋ธŒ ํด๋ž˜์Šค(subclass) ๊ด€๊ณ„' ๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค!

ํด๋ž˜์Šค ์ƒ์†์ด ์ด๋ฃจ์–ด์ง€๋ฉด, ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ผ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

  • ์ž์‹ ํด๋ž˜์Šค๋ฅผ ํ†ตํ•ด ๋ถ€๋ชจ ํด๋ž˜์Šค์˜ย ์ •์  ๋ฉ”์†Œ๋“œ์™€ ์ •์  ์†์„ฑ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ๋ถ€๋ชจ ํด๋ž˜์Šค์˜ย ์ธ์Šคํ„ด์Šค ๋ฉ”์†Œ๋“œ์™€ ์ธ์Šคํ„ด์Šค ์†์„ฑ์„ ์ž์‹ ํด๋ž˜์Šค์˜ ์ธ์Šคํ„ด์Šค์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
class Shape {
  constructor(width, height, color) {
    this.width = width;
    this.height = height;
    this.color = color;
  }

  draw() {
    console.log(`drawing ${this.color} color of`);
  }

  getArea() {
    return this.width * this.height;
  }
}

class Rectangle extends Shape {} // ์ƒ์†!
class Triangle extend Shape { // ๋‹คํ˜•์„ฑ!
  draw() {
    super.draw();
    console.log("๐Ÿ”บ");
  }
  
  getArea() {
    return (this.width * this.height) / 2;
  }
}

const rectangle = new Rectangle(20, 20, "blue");
rectangle.draw(); // drawing blue color of ํ˜ธ์ถœ
rectangle.getArea(); // 400

const triangle = new Triangle(20, 20, "red")
triangle.draw(); // drawing red color of + ๐Ÿ”บ 2๊ฐœ๊ฐ€ ํ˜ธ์ถœ
triangle.getArea(); // 200

super

์ž์‹ ํด๋ž˜์Šค์— ๊ฐ™์€ ์ด๋ฆ„์˜ ์†์„ฑ์„ ์ •์˜ํ•œ ๊ฒฝ์šฐ ๋ฌธ์ œ๊ฐ€ ๋ถ€๋ชจ ํด๋ž˜์Šค์˜ ์†์„ฑ์€ ํ˜ธ์ถœ๋˜์ง€ ์•Š๋Š”๋‹ค. ์ด ๋•Œ super๋ฅผ ์ด์šฉํ•ด์„œ ๋ถ€๋ชจ ํด๋ž˜์Šค์™€ ์ž์‹ ํด๋ž˜์Šค์˜ ์š”์†Œ๋ฅผ ๋ชจ๋‘ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ๋‹ค.

  • ์ƒ์„ฑ์ž ๋‚ด๋ถ€์—์„œย super๋ฅผ ํ•จ์ˆ˜์ฒ˜๋Ÿผ ํ˜ธ์ถœํ•˜๋ฉด, ๋ถ€๋ชจ ํด๋ž˜์Šค์˜ ์ƒ์„ฑ์ž๊ฐ€ ํ˜ธ์ถœ
  • ์ •์  ๋ฉ”์†Œ๋“œ ๋‚ด๋ถ€์—์„œ๋Š”ย super.prop๊ณผ ๊ฐ™์ด ์จ์„œ ๋ถ€๋ชจ ํด๋ž˜์Šค์˜ย propย ์ •์  ์†์„ฑ์— ์ ‘๊ทผ ๊ฐ€๋Šฅ
  • ์ธ์Šคํ„ด์Šค ๋ฉ”์†Œ๋“œ ๋‚ด๋ถ€์—์„œ๋Š”ย super.prop๊ณผ ๊ฐ™์ด ์จ์„œ ๋ถ€๋ชจ ํด๋ž˜์Šค์˜ย propย ์ธ์Šคํ„ด์Šค ์†์„ฑ์— ์ ‘๊ธ‰ ๊ฐ€๋Šฅ

์œ„์˜ ์˜ˆ์ œ์—์„œ class Triangle extends Shape { } ์•ˆ์— draw ๋ฉ”์†Œ๋“œ์— super.draw(); ๋กœ ๋ถ€๋ชจ ํด๋ž˜์Šค์˜ ์†์„ฑ์„ ํ˜ธ์ถœํ•œ๊ฒƒ์ด ์ด์— ํ•ด๋‹นํ•œ๋‹ค.

Override

๋ถ€๋ชจ ํด๋ž˜์Šค์— ์กด์žฌํ•˜๋Š” ํ•„๋“œ๋‚˜ ๋ฉ”์†Œ๋“œ๋ฅผ ์ž์‹ ํด๋ž˜์Šค์—์„œ ์žฌ์ •์˜ํ•˜์—ฌ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

์œ„์˜ ์˜ˆ์ œ์—์„œ class Triangle extend* Shape { } ์•ˆ์— Triangle๋งŒ์˜ ๋„“์ด ๊ณ„์‚ฐ๋ฒ•๊ณผ ๐Ÿ”บ๋ฅผ ์ถœ๋ ฅํ•˜๋Š”๊ฒƒ์„ ์žฌ์ •์˜ํ•ด ์ค€๊ฒƒ์ด ๋‹คํ˜•์„ฑ-์˜ค๋ฒ„๋ผ์ด๋”ฉ์— ํ•ด๋‹นํ•œ๋‹ค.


instanceof

console.log(rectangle instanceof Rectangle); // true
console.log(triangle instanceof Shape); // true
console.log(triangle instanceof Object); // true
console.log(triangle instanceof Rectangle); // false

instanceof ์™ผ์ชฝ์— ์žˆ๋Š” object๊ฐ€ instanceof ์˜ค๋ฅธ์ชฝ์— ์žˆ๋Š” class ์˜ instance ๊ฐ€ ๋งž๋Š”์ง€ checking

  1. console.log(triangle instanceof Shape);
    triangle์€ Triangle์˜ instance์ด๊ณ , Triangle์€ Shape๋ฅผ ์ƒ์†๋ฐ›์•˜๊ธฐ ๋•Œ๋ฌธ์— true!

  2. console.log(triangle instanceof Object);
    javascript ์—์„œ ๋งŒ๋“  ๋ชจ~~๋“  class๋Š” javascript์˜ Object๋ฅผ ์ƒ์†๋ฐ›์€ ๊ฒƒ์ด๋‹ค!
    โ‡’ VScode์—์„œ command ํ‚ค๋ฅผ ๋ˆ„๋ฅธ ์ฑ„๋กœ Object ๋ฅผ ํด๋ฆญํ•ด๋ณด๋ฉด ์ด๋ฏธ ์ •์˜๋œ Object ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ๋‹น!!


๋„˜๋‚˜ ์–ด๋ ต๊ตฐ.....

profile
ํ•˜๋ฃจ๋Š” ์น˜์—ดํ•˜๊ฒŒ ์ธ์ƒ์€ ์—ฌ์œ ๋กญ๊ฒŒ

0๊ฐœ์˜ ๋Œ“๊ธ€