JavaScript 기본 개념 공부 - Class

이제와서 해도 되는건지 의문이 들지만 이제라도 공부해야한다 class.. 자바스크립트는 class 기반의 언어가 아니라서 좀 소홀하게 생각하고 있었는데 개발을 진행하다보니 class 공부를 안하고 넘어갈 수가 없었다.. 실전프로젝트 들어간 이시점에서 이래도 되나 싶지만 그래도 화이팅..!!

Class 정의하기

클래스 몸체에 정의할 수 있는 메서드는 constructor, 프로토타입 메서드, 정적 메서드 세가지가 있다.

class User {
	constructor(){       //constructor
    }
    sayHi () {           //프로토타입 메서드
    	console.log("Hi")
    }
    static sayHello(){          //정적 메서드
    	console.log("hello")
    }
}

클래스는 생성자 함수이며 new 연산자로 호출해서 인스턴스를 생성할 수 있다. 클래스는 인스턴스를 생성하는 것이 유일한 존재의 이유이므로 항상 new 연산자를 사용해서 호출해야 한다. 

class User {}

const user = new User();

constructor

constructor는 인스턴스를 생성하고 초기화하기 위한 메서드이다. constructor 내부에서 this에 추가한 프로퍼티는 인스턴스 프로퍼티가 된다. 프로퍼티가 추가되어 초기화된 인스턴스를 생성하러면 constructor 내부에 this로 인스턴스 프로퍼티를 추가해야 한다.

아래와 같이 constructor안에서 설정해준 this.name = name은 new 연산자로 인스턴스를 생성할 때 입력받은 name에 해당하는 값을 this.name으로 사용하겠다는 것이다. const user = new User ("ryu") 에서 "ryu"라는 값을 입력해서 인스턴스를 생성했을 때 그 인스턴스에 객체형태로 { name : "ryu" } 가 생성되는 것이다.

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

const user = new User("ryu")
console.log(user)   //User{name : "ryu"}

인스턴스를 초기화 하기 위해서는 꼭 constructor를 사용해주어야 하며 constructor 내부에는 return 값이 존재하지 않는다. new 연산자와 함께 클래스가 호출되면 암묵적으로 this 를 반환하기 때문이다.

프로토타입 메서드

클래스 몸체에서 정의한 메서드는 클래스틔 프로토타입 프로퍼티에 메서드를 추가하지 않아도 기본적으로 프로토타입 메서드가 된다. 아래의 경우 class안에서 정의된 메서드인 sayHi() 는 프로토타입 메서드이다.

class User{
	constructor(name){
    	this.name = name
    }
    sayHi() {
    	console.log(`Hi ${name}`)
    }
}

const user = new User("ryu")
user.sayHi()   //Hi ryu

정적 메서드

정적 메서드는 인스턴스를 생성하지 않아도 호출할 수 있는 메서드를 말한다. 

class User{
	constructor(name){
    	this.name = name
    }
    static sayHi() {
    	console.log('Hi')
    }
}

User.sayHi()   //Hi

---

상속에 의한 클래스 확장

상속에 의한 클래스 확장은 기존 클래스를 상속받아 새로운 클래스를 확장하여 정의하는것이다!!! 상속에 의한 클래스 확장은 코드 재사용 관점에서 매우 유용하게 사용한다. 클래스는 상속을 통해 다른 클래스를 확장할 수 있는 문법인 extends 키워드가 기본적으로 제공된다. extends 키워드를 사용한 클래스 확장은 간편하고 직관적이다. 

class Parent {}
class Child extends Parent {}

상속을 통해 확장된 클래스를 서브클래스, 서브클래스에게 상속된 클래스를 수퍼클래스라고 부른다. 상속은 아래의 코드처럼 동적으로 상속받을 대상을 결정할 수도 있다.

class Parent1 {}
class Parent2 {}

let condition = true
class Child extends (condition ? Parent1 : Parent2) {}

super 호출

super를 호출하면 수퍼클래스의 constructor를 호출할 수 있다. 아래처럼 서브 클래스에서 super로 수퍼클래스의 constructor를 호출하면 상속관계인 수퍼클래스와 서브클래스가 함께 인스턴스를 생성한다. 

class Parent {
	constructor(a,b) {
    	this.a = a
        this.b = b
    }
}

class Child extends Parent {
	constructor(a,b,c){
    	super(a,b)
        this.c = c
    }
}

const child = new Child(1,2,3)
console.log(child)   //Child { a: 1, b: 2, c: 3 }

서브클래스에서 constructor를 생략하지 않는 경우 서브클래스의 constructor에서는 반드시 super를 호출해야 하며 this를 만들기 전에 호출해야한다. 매서드 내에서 super를 참조하면 수퍼클래스의 메서드를 호출할 수 있다.