[JS] 클래스와 인스턴스(ES5,ES6)

클래스, 인스턴스

• 클래스
• 인스턴스
• new 키워드
• 생성자 함수
• ES5 클래스 작성 문법
• ES6 클래스 작성 문법

 

• ES5 클래스는 함수로 정의할 수 있습니다.

function Car(brand, name, color) {
 // 인스턴스가 만들어질 때 실행되는 코드
}

• ES6에서는 class라는 키워드를 이용해서 정의할 수도 있다.

class Car {
	constructor(brand, name, color) {
    	// 인스턴스가 만들어질 때 실행되는 코드
    }
}

new 키워드

• new 키워드를 통해 클래스의 인스턴스를 만들어낼 수 있다.
• 또한 즉시 생성자 함수가 실행되며, 변수에 클래스의 설계를 가진 새로운 객체, 즉 인스턴스가 할당된다.
• 각각의 인스턴스는 클래스의 고유한 속성과 메서드를 갖게 된다.

let avante = new Car('bmw', 'mini', 'white')

this

• this는 인스턴스 객체를 의미한다.
• parameter로 넘어온 브랜드, 이름, 색상 등은 인스턴스 생성 시 지정하는 값이다.
• 아래와 같이 this에 할당한다는 것은 만들어진 인스턴스에 해당 브랜드, 이름, 색상을 부여하겠다는 의미이다.

// ES5
function Car(brand, name, color) {
  this.brand = brand;
  this.name = name;
  this.color = color;
}

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

메서드

• ES5는 prototype이라는 키워드를 사용해야 메서드를 정의할 수 있다.
• Car 클래스에 메서드를 추가하기 위해서는 Car.prototype.refuel과 같이 prototype을 이용해야 한다.
• ES6에서는 생성자 함수와 함께 class 키워드 안쪽에 묶어서 정의한다.
• refuel() {}, drive() {}와 같이 작성되어 있는 부분이다.

생성자 함수

• 객체지향 프로그래밍에서 인스턴스가 만들어질 때 실행되는 코드
• 참고로 생성자 함수는 return 값을 만들지 않는다.
• (아래 그림에서 constructor 함수

// ES5
function Car(brand, name, color) { /* 생략 */}

Car.prototype.refuel = function() {
	// 연료 공급을 구현하는 코드
}

Car.prototype.drive = function() {
	// 운전을 구현하는 코드
}

// ES6 class Car {
	constructor(brand, name, color) { /* 생략 */}

    refuel() {
    }

    drive() {
    }
}

• prototype? constructor? this?
  • prototype: 모델의 청사진을 만들 때 쓰는 원형 객체(original form)이다.
  • constructor: 인스턴스가 초기화될 때 실행하는 생성자 함수
  • this: 함수가 실행될 때, 해당 scope마다 생성되는 고유한 실행 context (execution context) new 키워드로 인스턴스를 생성했을 때에는, 해당 인스턴스가 바로 this의 값이 됨
• 배열은 (대문자) Array의 인스턴스이다. 따라서 new Array(, , _)와 같은 방식으로도 배열을 만들 수 있다.

let arr = ['code', 'states', 'pre'];

let arr = new Array('code', 'states', 'pre');

객체 : 클래스, 인스턴스, 속성을 포함

클래스 : 세부 사항(속성)이 들어가지 않은 청사진

인스턴스 : 클래스를 통해 만들어진 객체

생성자 : 생성자를 통해 세부 사항(속성) 넣기