JavaScript[공부 : Class 사용방법]

최근 공부를 하다가 Class의 개념을 알고 어느정도 사용을 해봤다고 생각을 했는데 막상 응용을 해보려니 잘 알고 있지 않다는 것을 알게 되었다. 그래서 이참에 사용하는 방법을 정확하게 공부를 해보았습니다.

 

클래스, 객체, 인스턴스의 개념

클래스(Class)

객체를 만들어 내기 위한 설계도 혹은 틀
연관되어 있는 변수와 메서드의 집합

 

객체(Object)

소프트웨어 세계에 구현할 대상
클래스에 선언된 모양 그대로 생성된 실체

 

특징

‘클래스의 인스턴스(instance)’ 라고도 부른다.
객체는 모든 인스턴스를 대표하는 포괄적인 의미를 갖는다.
OOP의 관점에서 클래스의 타입으로 선언되었을 때 ‘객체’라고 부른다.

 

인스턴스(Instance) 

객체를 소프트웨어에 실체화 한것

설계도(Class)를 바탕으로 소프트웨어 세계에 구현된 구체적인 실체
실체화된 인스턴스는 메모리에 할당

특징

인스턴스는 어떤 원본(추상적인 개념)으로부터 ‘생성된 복제본’을 의미한다.

인스턴스는 객체에 포함된다고 볼 수 있다.
OOP의 관점에서 객체가 메모리에 할당되어 실제 사용될 때 ‘인스턴스’라고 부른다.

Javascript의  Class

자바스크립트에서 클래스 사용은 ES6에서부터 지원을 하기 시작했습니다.

익스플로러에서는 해당 코드 사용이 불가능하나, 최신 브라우저를 이용할 경우 class를 지원합니다.

 

Class를 사용하는 가장 큰 이유는 재사용성입니다.

중첩되는 부분의 코드를 Class를 통해서 줄여주어서 코드의 가시성도 높여주고 응용성이 높아지는 경험을 할수 있습니다.

 

 

Class 기본 문법

Class 생성

선언시 생성 (new를 통하여 새로운 인스턴스 생성)

 

1. Class 객체의 초기 값을 설정(Constructor(생성자)를 이용)
   : class 내부에서 Constructor는 한 개만 존재할 수 있으며, 2번 이상 사용 시 Syntax Error가 발생할 수 있다.
2. Class 객체의 메소드 생성
   : class에서 설정한 초기값을 접근해 특정 기능을 하는 메서드를 만드는 것도 가능하다.

class MyClass {
  // 여러 메서드를 정의 가능
  constructor() { ... }
  method1() { ... }
  method2() { ... }
  method3() { ... }
  ...
}

class MyClass {
  // 여러 메서드를 정의할 수 있음
  constructor(ele) {
    this.ele = ele;
  }
  method1() {
    console.log('method1');
  }
  method2() {
    console.log('method2');
  }
}

let myInstance = new MyClass('요소입니다');

console.log('myInstance:', myInstance);
myInstance.method1();
myInstance.method2();

 

결과

 

Class  메서드 추가하기

 

class 밖에서 새로운 메서드를 넣는 것도 가능하다.

하지만, 이렇게 밖에서 추가한 class는 추후 새로운 new Person class로 새로운 객체를 만들었을 때는

호출하여 사용할 수 없다

class MyClass {
  // 여러 메서드를 정의할 수 있음
  constructor(ele) {
    this.ele = ele;
  }
  method1() {
    console.log('method1');
  }
  method2() {
    console.log('method2');
  }
}

let myInstance = new MyClass('요소입니다');

myInstance.addedMethod = function () {
  console.log('addedMethod');
};

console.log('myInstance:', myInstance);
myInstance.method1();
myInstance.method2();
myInstance.addedMethod();

console.log 결과

 

 

요소를 추가하는 메소드를 추가

class MyClass {
  // 여러 메서드를 정의할 수 있음
  constructor(ele) {
    this.ele = ele;
  }
  method1() {
    console.log('method1');
  }
  method2() {
    console.log('method2');
  }
}

let myInstance = new MyClass('요소입니다');

myInstance.addedMethod = function () {
  console.log('addedMethod');
};

myInstance.addElement = function (el) {
  this.el = el;
};

console.log('myInstance:', myInstance);
myInstance.method1();
myInstance.method2();
myInstance.addedMethod();
myInstance.addElement('추가된 el');
console.log('myInstance:', myInstance);

출력

 

 

 

 

상속(extends)

class에서 상속 개념을 이용할 수 있습니다.

css에서 하나의 속성이 하위 속성에도 같이 적용되는 것처럼

class에서도 상속을 이용하면 기존의 class의 값을 모두 접근하여 사용할 수 있다.

상속은 extends를 써서 이용할 수 있다.

 

예제

class MyClass {
  // 여러 메서드를 정의할 수 있음
  constructor(ele) {
    this.ele = ele;
  }
  method1() {
    console.log('method1');
  }
  method2() {
    console.log('method2');
  }
}

let myInstance = new MyClass('요소입니다');

class extendsClass extends MyClass {
  method3() {
    console.log('method3');
  }
}

let newInstance = new extendsClass('넣는 요소여');
console.log('newInstance:', newInstance);
newInstance.method1();
newInstance.method2();
newInstance.method3();

console.log 결과화면

 

 

 

super 사용하기

extends한 클래스에서 기존 class의 값을 가져다 쓰는 건 좋았지만,

추가적으로 사용하고 싶은 값(입력값)이 있을 수도 있다.

 

이때 이용하는 것은 super라는 키워드이며

이는 객체의 부모가 가지고 있는 메서드를 호출할 수 있다.

 

자식 쪽의 추가적으로 사용할  초기값이 필요할 경우 constructor에 super로 부모 초기값을 세팅한 뒤

자식 class에서만 사용할 초기값을 따로 지정하는 것도 가능하며

super 기능을 이용해서 자식 class에서 부모 메서드를 호출할 수도 있다.

그밖에도 여러 기능이 있는거 같은데 지금은 일단 이정도만 사용 하면 좋을 것 같다.

class MyClass {
  // 여러 메서드를 정의할 수 있음
  constructor(ele) {
    this.ele = ele;
  }
  method1() {
    console.log('method1');
  }
  method2() {
    console.log('method2');
  }
}

let myInstance = new MyClass('요소입니다');

class extendsClass extends MyClass {
  constructor(ele, ele2) {
    super(ele);
    this.ele2 = ele2;
  }

  method3() {
    console.log('method3');
  }
  method4() {
    this.method2();
  }
  method5() {
    super.method2();
  }
}

let newInstance = new extendsClass('처음에 넣음', '두번째 요소');
console.log('newInstance:', newInstance);
newInstance.method1();
newInstance.method2();
newInstance.method3();
newInstance.method4();
newInstance.method5();

super에 ()가 붙은 super()는 부모클래스의 생성자입니다

super.method()는 부모 클래스의 메소드가 출력되는 것임

 

사실 method4()의 this로 상속 메소드를 사용하는 것과

method5()의 super로 상송 메소드를 사용하는 것의 차이점을  정확히는 모르겠다. ㅠㅠ

(아마 method 4()보다 위에 super()이 사용이 되어서 이미 상속이 된거 같다는 의미 인것 같은데 정확히는 모르겠음)

 

 

 

class를 이용할 경우 규칙성을 갖는 객체를 일관성 있게 만드는 게 가능하며,

상속을 통해서 기능 확장이 용이하다는 것 알 수 있었다.

 

---

Reference

opentutorials.org/module/4047/24614

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes

https://ko.javascript.info/class