[JavaScript] 클래스와 인스턴스

객체 지향 프로그래밍 (Object-Oriented Programming)?

하나의 모델이 되는 청사진(blueprint)(=> 클래스Class)을 만들고, 그 청사진을 바탕으로 한 객체(=> 인스턴스Instance)를 만드는 프로그래밍 패턴

 

 

• 클래스

- 일종의 원형(original form)으로, 객체를 생성하기 위한 아이디어나 청사진

- 클래스는 보통 대문자로 시작하며 일반명사로 만듬 

   cf. 일반적인 함수는 적절한 동사를 포함하고 소문자로 시작

- 클래스에 정의된 속성과 메소드는 인스턴스에서 이용됨

- 객체를 만들기 위한 생성자(constructor) 함수를 포함

 

 

• 인스턴스

- 클래스를 통해 만들어진 객체를 인스턴스 객체 (Instance Object) 로 칭함

- 각 인스턴스는 클래스의 고유한 속성과 메서드(객체에 딸린 함수)를 가짐

- 생성자를 통해 함수에 인자를 넣듯, 속성(세부사항)을 넣을 수 있음

 

 

• new 키워드

- 인스턴스를 만들 때 사용

- 즉시 생성자 함수가 실행되며, 변수에 인스턴스가 할당됨

- New 키워드로 인스턴스를 생성한 경우, 해당 인스턴스가 바로 this의 값이 됨 

 

 

• 생성자 함수(constructor)

- 인스턴스가 초기화될 때 실행하는 생성자 함수

- 인스턴스가 만들어질 때 실행되는 코드

- return 값을 만들지 않음

 

 

//* ES5 문법 *//
function Car(brand, name, color) {
	// 인스턴스가 만들어질 때 실행되는 코드
   this.brand = brand;
   this.name = name;
   this.color = color.
}

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



//* ES6 문법 *//
class Car {
   constructor(brand, name, color) {
	// 인스턴스가 만들어질 때 실행되는 코드
   this.brand = brand;
   this.name = name;
   this.color = color.
   }
   
   refuel() {
   }
}

• ES5 클래스 작성 문법

- 일반적인 함수를 정의할 때처럼 function을 이용하여 클래스를 정의함

- prototype 키워드를 사용하여 메서드를 정의함, 모델의 청사진을 만들 때 쓰는 원형 객체(original form)

 

 

• ES6 클래스 작성 문법

// ES6 문법 사용 예시

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

drive(){
        console.log(this.name + '가 운전을 시작합니다.');
    }
}



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

- ES5와 다르게 ES6은 class 키워드를 사용하여 클래스를 만들 수 있음

- 생성자 함수와 함께 class 키워드 안쪽에 묶어서 메소드를 정의함

 

 

*this : 인스턴스 객체를 의미, 함수가 실행될 때, 해당 scope마다 생성되는 고유한 실행 context (execution context)

*parameter의 값(ex.브랜드, 이름, 색상) 등의 값을 인스턴스 생성 시 지정함

 

 

 

 

class Counter {
  constructor() {
    this.value = 0; // 생성자 호출을 할 경우, this는 new 키워드로 생성한 Counter의 인스턴스입니다
  }
  increase() {
    this.value++
  }
  decrease() {
    this.value--
  }
  getValue() {
    return this.value
  }
}

let counter1 = new Counter() // 생성자 호출
counter1.increase()
counter1.getValue() // 1

 

ES6 문법을 이용해 카운터 만들기