클래스와 인스턴스_JS 객체지향 프로그래밍

용어 정리

*JavaScript에서만 적용되는 용어입니다.

Prototype
: 모델의 청사진을 만들 때 쓰는 원형 객체(Original form).
Constructor
: instance가 초기화될 때 실행하는 생성자함수.
This
: 함수가 실행도리 때 해당 scope마다 생성되는 고유한 실행 context(execution context).
new 키워드로 instance를 생성했을 때에는, 해당 인스턴스가 바로 this의 값이 됨.

1. 객체지향 프로그래밍(OOP. Object-oriented programming)

Java나 C#은 OOP를 더 철저하게 적용합니다. 그러나 JS는 조금 독특합니다. 절차지향프로그래밍(Procedural programming: 개체를 순차적으로 처리하여 프로그램 전체가 유기적으로 연결되어야 함.)과 다르게 데이터와 기능을 한 곳에 묶어서 처리합니다. 속성과 메소드는 객체에 포함되며, 여기서의 객체는 class라 불립니다. 이는 object literal과 다릅니다.

How To

모델이 되는 청사진을 만들고 --- class
그를 바탕으로 객체를 만드는 --- instance object
프로그래밍 패턴.

ES5

function Car(color) {
	let avante = new Car('blue');
    let mini = new Car('cyan');
    let beetles = new Car('red');
}


ES6

class Car {
    constructor(brand, name, color) {
        let avante = new Car('blue');
        let mini = new Car('cyan');
        let beetles = new Car('red');
    }
}

//new 키워드를 사용해서 새 인스턴스 생성.
//함수명은 일반적 함수와 구분하기 위해 대문자로 시작하는 일반명사로 이름짓기.
	(일반적 함수의 이름은 보통 소문자로 시작해 적절한 동사로 이름을 지음.)
//각 instance는 Car라는 클래스의 고유속성과 메소드를 갖는다.

2. 클래스: 속성의 정의

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;
  }
}

//parameter 내용은 instance 생성 시 지정하는 값.
//this에 할당한다는 것은 만들어진 instance에 브랜드, 이름, 색상값을 부여하겠다는 의미.

3. 클래스: 메소드의 정의

ES5

function Car(brand, name, color) { ... 생략 ...}

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


ES6

class Car {
	constructor(brand, name, color) { ...생략... }
    
    refuel() {
    }
}

//Car class에 메소드를 추가하는 방법입니다.

4. 인스턴스에서의 사용

let avante = new Car('hyundai', 'avante' 'black');
avante.color; //'black'
avante.drive(); //아반떼가 운전을 시작합니다.

5. 실전 예제 - 배열

let arr = new Array('code', 'states', 'pre');
arr.length; //3
arr.push('course') //새 element를 추가합니다.