6.21 Dev.Feedback (Class, Instance, Prototype)

클래스와 인스턴스

객체 지향 프로그래밍은 어떤 기능을 하는 제품(자동차, 비행기)의 설계도를 먼저 만들고,

그 설계도를 바탕으로 한 다양한 디자인들의 자동차(객체)(ex 자동차 => 아반떼, BMW, Beetle, Mini 등등)를 만드는 프로그래밍 패턴이다. (ex 비행기 => 여객기, 전투기, 화물기 등등)

여기서 설계도가 Class 그리고 그 기능을 가진 다양한 디자인들의 자동차가 Instance라고 생각하면 된다.

(Class instance 둘다 객체이지만, 확실한 이해와 구분을 위해 이제부터는 위의 용어로 정의해야 한다.)

 

Class와 Instance를 만드는 방식

먼저 Class를 만들 때는 암묵적인 규칙이 있다. 일반 함수로 정의하기는 하지만, 반드시 대문자 + 일반 명사로 만들어야 한다. 그래야 다른 개발자들도 이것이 클래스라는 것을 알 수 있게 된다. (ES5까지)

new 키워드를 써서 만들어야 instance를 만들 수 있다.

 

ES6부터는 class 키워드를 사용해 정의할 수 있다.

여기서 포인트는 class 생성자를 사용하여 만든 생성자 함수이기때문에 return 값을 만들면 안된다.

Class에 속성과 메소드를 정의하고, instance에서 이용할 수 있다.

여기서 속성을 한 번 더 정리해보면, 속성은 브랜드, 차 이름, 색상, 현재 연료 상태, 최고 속력 등이 있을 수 있다.

그리고 메소드는 객체 내부에 있는 함수로, 연료 주입, 속력 설정, 운전 등이 메소드이다.

만일 학생이라는 클래스를 만든다고 했을 때, 어떤 속성과 메소드가 있을까?

Class 속성의 정의

class Car {
	constructor(brand, name, color){
    	this.brand = brand;
        this.name = name;
        this.color = color;
       }
     }

위를 이용하기 위해선 this라는 새로운 키워드가 등장하는데,

Class 내부에서 this는 instace객체를 의미한다. 즉 parameter로 넘어온 브랜드, 이름, 색상 등은 instatce 생성시 지정하는 값이고, this에 할당한다는 것은 만들어진 instace에 해당 브랜드, 이름, 색상을 부여하겠다는 의미인 것이다.

 

Class Method 정의

//ES5
function Car (brand, name, color) {
    	this.brand = brand;
        this.name = name;
        this.color = color;
       }
       Car.prototype.refuel = function () {
       //연료 공굽을 구현하는 코드
       }
       
       Car.prototype.drive = function () {
       //운전을 구현하는 코드
       }

//ES6
class Car {
	constructor(brand, name, color){
    	this.brand = brand;
        this.name = name;
        this.color = color;
       }
       refuel(){
       }
       drive(){
       }
     }

기존 ES5 문법에서는 prototype 을 이용해야만 했다.

 ES6에서는 생성자 함수와 함께 class 키워드 안쪽에 묶어서 정의한다.

 

Instace에서 사용

let coope = new Car('bmw', 'coope', 'blue');
coope.barnd; //'bmw'
coope.refuel(); // coope에 연료를 공급합니다.

let carnivalNew = new Car('hyundai', 'carnivalNew', 'white');
carnivalNew.color; //'white'
carnivalNew.drive() // carnivalNew가 운전을 시작합니다.

 

용어 정리

 

prototype : 어떤 기능의 설계도를 만들 때 쓰는 원형 객체(original form)

constructor : instance가 초기화될 때 실행하는 생성자 함수

this : 함수가 실행될 때, 해당 scope마다 생성되는 고유한 실행  context(execution context) new 키워드로 인스턴스를 생성했을 때에는, 해당 인스턴스가 this의 값이 된다.