JavaScript _개념정리/객체지향 class문법 #2/2

앞에서 객체지향에 대한 이론을 알아 봤습니다!!! 이번시간은 객체 지향의 꽃 클래스에 대한 기본 문법을 간략하게 정리하였습니다!!! 클래스 문법의 구조, 틀 위주로 정리하였으니 나중에 응용하고 연습하면 충분히 클래스 문법에 대해 익숙해질거라 생각합니다!

---

Class

자바스크립트는 프로타입 기반의 객체 지향 언어입니다! 옛날에는 클래스 대신 프로토 타입을 이용해서 객체 지향 프로그래밍을 하였는데 ES6가 도입되면서 자바스크립트에 클래스라는 키워드가 생겼고 기존의 프로토타입 기반의 객체 지향 프로그래밍보다 단순하고 간결하게 코드를 작성할 수 있게 되었습니다!

 

---

Class 생성하기

클래스는 객체명 앞에 class라는 키워드를 이용해 생성할 수 있습니다.

 

class Joycoding {
  consturctor() {}
  method1() {}
  method2() {}
}

 

클래스는 class라는 키워드를 사용해야 됩니다. 그리고 class 내부에는 크게 Construrctor와 method로 구성되어 있습니다!

 

---

Constructor

Constructor는 class로 생성된 객체를 생성하고 초기화하기 위한 메서드입니다. 클래스 내부에 단 하나만 존재할 수 있습니다.

 

class Joycoding {
  consturctor(arg1, arg2) {
    this.arg1 = arg1;
    this.arg2 = arg2;
  }
}

 

Constructor 내부에는 변수 키워드가 아닌 this를 이용해서 변수를 생성합니다. 이때 this는 클래스가 생성할 인스턴스를 가르킵니다.

---

Method

class 객체 내부에서 생성된 함수를 Method라고 부릅니다. 

 

class Joycoding {
  consturctor(arg1, arg2) {
    this.a = 10;
    this.b = 20;
  }
  sum() {
    return this.a + this.b;
  }
}

 

---

Instanc

instanc는 생성자 함수 같이 new 연산자와 함께 클래스 이름을 호출하면 해당 클래스의 인스턴스가 생성됩니다. 쉽게 말해 뼈대를 빌려왔다라고 생각하시면 됩니다! 

 

class Joycoding {
  constructor(a, b) {
    this.a = a;
    this.b = b;
  }
}
 
const joy = new Joycoding(5, 7);

 

---

Extends

extends는 말그대로 확장시키다! 즉 다른 객체로 부터 상속 시킬수 있습니다. 기본적인 구조는 extends 뒤에 상속 시킬 클래스를 적으면 됩니다..

 

class A {}
 
class B extends A {}

 

---

Super

super는 자식 클래스가 상위 클래스를 호출 할 때 사용하는 메서드 입니다.

 

class A {
  constructor(a, b) {
    this.a = a;
    this.b = b;
  }
  sum() {
    return this.a + this.b;
  }
}
 
class B extends A {
  constructor(a, b) {
    super(a, b);
  }
 
  sum() {
    return super.sum() + this.a;
  }
}

 

super()는 상위 클래스에 값을 전달 시킬 수 있고 super. 은 상위 클래스에서 프로퍼티나 값을 가져와서 사용 할 수 있습니다.