ES class와 prototype

ES class

ES class란 JavaScript에서 객체 지향 프로그래밍을 구현하기 위해 정의된 문법적 구조를 의미한다.

class Car{
	constructor(brand){
    	this.brand = brand
    }
    move(){
    	console.log("moving");
    }
}

c++등의 객체 지향 언어와 유사하게, constructor를 정의하여 object 생성 시 초기화 작업을 수행하도록 할 수 있다.

 

또한 다음과 같이 상속을 구현 할 수 있다.

class Car{
	constructor(brand){
    	this.brand = brand;
    }
    move(){
    	console.log("moving");
    }
}

class ElectricCar extends Car{
	constructor(brand, batteryCapacity){
    	super(brand);
        this.batteryCapacity = batterCapacity;
    }
    move(){
    	console.log("electronic moving");
    }
}

위 코드를 보면 상속받은 class에서 move() 함수를 재정의하는 것을 확인할 수 있는데, 이를 `오버라이딩` 이라고 한다.

 

 

프로토타입 (Prototype)

사실 JavaScript에는 class라는 개념이 존재하지 않았다.

 

하지만 객체 지향의 중요성이 증대되고, 이에 따른 필요성이 부각되면서 프로토타입을 이용하여 일반적인 class 구문을 사용할 수 있도록 구현되었다.

 

프토토타입이란 원형 객체를 의미한다.

 

JavaScript에서는 정수, 문자 등의 기본적인 데이터 타입을 제외하면 모든 것이 객체로 존재하는데, 이러한 객체들은 모두 프로토타입 객체를 이용하여 만들어진다.

 

즉 모든 객체들은 method와 member variable, 즉 속성들을 상속받기 위한 템플릿으로써 프로토타입 객체를 가지고 있다.

이 프로토타입 객체 또한 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속받을 수 있는데,

이러한 연쇄적인 관계를 `프로토 타입 체인`이라고 한다.

 

JavaScript는 어떤 속성 또는 메서드를 찾는 과정에서 프로토 타입 체인을 사용한다.

해당 객체에 목표로 하는 속성이나 메소드가 존재하지 않는 경우, 프로토타입 체인을 따라 올라가며 매칭되는 속성이나 메소드를 탐색한다.

이는 객체의 __proto__ 속성을 통해 이루어질 수 있으며, __proto__ 속성을 따라 끝까지 탐색해도 해당하는 값을 찾기 못할 경우 undefined를 리턴하게 된다.

 

다음과 같은 예시를 통해 프로토 타입의 활용 방식을 살펴볼 수 있다.

 

function House(){
}

// 함수를 이용하여 객체를 생성
const house1 = new House();
const house2 = new House();

House.prototype.password = 100;


console.log(house1.password);
// 100이 출력된다.
console.log(house2.password);
// 100이 출력된다.

위 예시를 보면, House라는 함수 정의를 사용해서 house1, house2 object를 생성하였다.

 

 이후 프로토타입 객체에 접근하여 password 변수를 선언하고 100을 대입하였다.

 

마지막으로 house1과 house2를 이용하여 password를 출력하면 100이 출력되는 것을 확인할 수 있다.

 

즉, 마치 하나의 클래스를 상속받아 공통된 변수를 공유하는 것 처럼 사용할 수 있다.

 

즉 프로토타입 객체를 사용하면 따로 class와 상속관계를 구현하지 않아도 마치 클래스를 상속받은 것 처럼 코드를 작성할 수 있다는 장점이 존재한다.