TIL_객체지향(클래스, 인스턴스)

박성훈·2022년 7월 22일

JavaScript

목록 보기
20/25
post-thumbnail

객체지향 프로그래밍

하나의 모델이 되는 청사진을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴

자동차로 예를 들면, 자동차의 바퀴, 핸들, 엔진 등 생산에 필요한 정보가 담겨있는 설계도 즉, 청사진을 만들어놓고

그 청사진을 토대로 생산라인에서 자동차들을 생산해내는 과정이 객체지향이라고 할 수 있다.

클래스

청사진

클래스는 자동차의 설계도라고 말할 수 있다.
자동차 클래스에는 자동차의 이름, 제조사, 색상등과 'Engine Start', 'Speed Up', 'Speed Down'등과 같은 기능을 담고 있다.
이때, '이름, 제조사, 색상'은 속성에 해당하고, 'Engine Start, Speed Up, Speed Down'은 메소드에 해당한다.

그렇다면, 이를 바탕으로 자동차 클래스를 코드로 구현해보면,

ES5버전

function Car(brand, name, color){
	this.brand = brand;
    this.name = name;
    this.color = color;
    
    Car.prototype.engineStart(){
    	console.log(this.name + '에 시동이 켜졌습니다');
    }
    
    Car.prototype.SpeedUp(){
    	console.log(this.name + '의 속도가 증가했습니다');
    }
    
    Car.prototype.SpeedDown(){
    	console.log(this.name + '의 속도가 감소했습니다');
    }
}

ES6버전

class car{
	constructor(brand, name, color){
    	this.brand = brand;
        this.name = name;
        this.color = color;
    }
    
    engineStart(){
    	console.log(this.name + '에 시동이 켜졌습니다');
    }
    SpeedUp(){
    	console.log(this.name + '의 속도가 증가했습니다');
    }
    SpeedDown(){
    	console.log(this.name + '의 속도가 감소했습니다');
    }
}

일단 참고로, 현재 ES5보단 ES6문법을 주로 사용하고 있다.

위의 코드에서 constructor부분은 생성자 함수이다.
클래스에서 필요한 속성을 정의해준다고 생각하면 된다.

여기서 this의 역할은 인스턴스 객체를 가리키는 것이다.
위의 클래스를 통해 새로운 인스턴스 객체를 만들 때, 파라미터로 들어오는 값을 해당 인스턴스에 할당하겠다는것을 의미한다.

인스턴스

설계도에 따라 만든 제품

클래스를 통해 만든 설계도면을 이용하여 새로운 제품을 만들어내는데 그 제품들이 바로 인스턴스이다.

위에서 설정한 클래스의 속성과 메서드를 인스턴스로 사용하는 방법은 다음과 같다.

let avante = new Car('hyundai', 'avante', 'black');

avante.color;
avante.engineStart();

new
new라는 키워드로 객체의 인스턴스를 생성한다.
이제 avante라는 변수에는 Car클래스의 인스턴스가 할당이 되었으므로, avante를 활용하여 클래스의 속성과 메소드를 사용할 수 있다.

avante.color가 실행되면 인스턴스를 생성할 때 준 파라미터 값으로 적용되어 black이 리턴된다.

avante.engineStart()가 실행되면 Car클래스의 enginStart()메소드가 실행되어 'avante의 시동이 켜졌습니다'가 출력된다.

profile
프론트엔드 학습일지

0개의 댓글