js 클래스

JS에서 클래스란?

클래스는 새로운 객체 생성 매커니즘이다. 클래스는 인스턴스를 생성하기위한 생성자 함수다.
기존 프로토타입 기반 패턴을 클래스기반 패턴처럼 사용할 수 있게 해준다.
클래스와 생성자 함수는 매우 유사하지만 몇가지 차이점이 있다.

• 클래스는 new 연산자없이 호출하면 에러가 발생하지만, 생성자 함수는 일반 함수로서 호출된다.
• 클래스는 extends, super 키워드를 제공하며, 상속관계 구현에서 더 명료하다.
• 클래스는 호이스팅이 발생하지 않는것처럼 동작한다.
  모든 선언문은 런타임 이전에 먼저 실행되고, var, let, const, function, class 키워드로 선언된 모든 식별자는 호이스팅된다.
  다만 TDZ에 빠지기 때문에 호이스팅이 발생하지 않는것처럼 동작한다.
• 클래스는 암묵적으로 strict mode가 지정되어 실행되며, 이를 해제할 수 없다.
• 클래스는 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 false다. (열거 불가능)

클래스는 표현식으로 정의할수있다.
클래스는 함수로 평가되며, 값처럼 사용할 수 있는 일급객체다.

클래스의 인스턴스 생성

클래스는 인스턴스를 생성하는것이 유일한 존재 이유이므로 반드시 new 연산자와 함께 호출해야한다.

class Person {}

const me = new Person(); //new 연산자 필수


class User {
	constructor(name, address){
    	//인스턴스 초기화
        this.name = name
        this.address = address
    }
}

const rumi = new User('rumi', 'Sungnam'); // User {name: 'rumi', address: 'Sungnam'}

constructor는 인스턴스를 생성/초기화 하기위한 특수메서드다.
클래스 내에 최대 한개만 존재할수있고, 생략하면 빈 객체가 암묵적으로 생성된다.
클래스가 평가되어 생성한 함수 객체의 일부가 된다.
constructor 내부에서 return 은 생략해야한다.

** 클래스의 constructor와 prototype에 있는 constructor 프로퍼티는 다르다.

클래스에서는 메서드에 static 키워드를 붙이면 정적 메서드가 된다.
정적 메서드는 클래스에 바인딩된 메서드이기 때문에,  인스턴스로 호출 할 수 없다.

class Person {
	static sayHi(){
    	console.log("Hi~")
    }
}

const personInstance = new Person();
personInstance.sayHi(); // personInstance.sayHi is not a function

Person.sayHi(); // Hi~

 

클래스 상속 extends 키워드

class Parent{} // 부모

class Child extends Parent{}  // 자식

프로토타입메서드, 정적메서드 모두 상속이 가능하다.

 

super 키워드

자식 클래스의 constructor 내에서만 호출할수있다.
호출 시 부모 클래스의 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;
    }
}

* 자식클래스는 constructor를 생략하지 않을때는 super을 반드시 호출해야한다. (호출되지않으면 인스턴스 생성 X, this 참조 X)