(TIL) D+20 클래스, 인스턴스

클래스와 인스턴스

• 클래스 : 모델이 되는 청사진

• 인스턴스 : 청사진을 바탕으로 한 객체

• 이해하기 어려운 이유

  • 함수를 이용하는 방법이 다름
  • 그냥 실행하는 것이 아니라 new 키워드를 써서 새로운 인스턴스를 만듦

• 클래스는 대문자로 시작, 일반명사로 만듦 (다른 함수와 구분하려고)

• 클래스는 함수로 정의할 수 있음

• class 라는 키워드를 이용해서 정의할 수도 있음(최근문법)

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

// 여기서 함수를 생성자(constructor) 함수라고 부름
// 생성자 함수는 return 값을 만들지 않는다!!

• 인스턴스 생성: new 키워드 사용 ⇒ 즉시 생성자 함수가 실행(호출)되고 변수에 인스턴스가 할당됨 ⇒ 각각의 인스턴스는 클래스의 고유한 속성과 메서드를 가지게 됨

  let avante = new Car('hyeundai', 'avante', 'black');
  let mini = new Car('bmw', 'mini', 'white');
  let beetles = new Car('volkswagen', 'beetles', 'red'); 
  
  // 각각의 인스턴스는 Car 라는 고유한 속성과, 메소드를 갖는다.

• 속성과 메소드 ⇒ 클래스에 속성과 메소드를 정의하고 ⇒ 이를 인스턴스에서 사용 ⇒ 메서드는 ‘객체에 딸린 함수’!
  

• 속성을 정의한다 : this 키워드 ⇒ 인스턴스 객체를 의미 ⇒ 함수가 실행될 때, 해당 스코프마다 생성되는 고유한 실행 컨텍스트(execution context) ⇒ new 키워드로 인스턴스를 생성했을 때 해당 인스턴스가 바로 this 의 값이 됨 ⇒ constructor 는 인스턴스가 초기화될 때 실행하는 생성자 함수를 의미

  class Car {
  	constructor(brand, name, color) {
  		this.brand = brand;
  		this.name = name;
  		this.color = color;
  	}
  }
  
  // this에 할당한다는 것은 만들어질 인스턴스에 해당 브랜드, 이름, 색상을 부여하겠단 의미

• 메서드를 정의한다 : ⇒ 프로토타입이라는 키워드를 사용한 메서드 정의(es5) → 프로토타입이란 모델의 청사진을 만들 때 쓰는 원형 객체(original form)

  function Car(brand, name, color) { /* 생략 */ }
  Car.prototype.refuel = function() {
  	// 연료 공급을 구현하는 코드
  }
  Car.prototype.drive = function() {
  	// 운전을 구현하는 코드
  }

  ⇒ 생성자 함수와 함께 class 키워드 안쪽에 묶어서 정의(es6)

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

• 그럼 설정한 속성과 메서드를 인스턴스에서 어떻게 사용?

  let avante = new Car('hyeundai', 'avante', 'black');
  avante.color; // 'black'
  avante.drive(); // 아반떼가 운전을 시작합니다.
  
  let mini = new Car('bmw', 'mini', 'white');
  mini.brand; // 'bmw'
  mini.refuel(); // 미니에 연료를 공급합니다.

• 관련용어 한눈에 총정리!
  

es5 방식

es6 방식 ⇒ 피그마로 범위 그리면서 위와 같이 작성해보기

• 유용한 클래스 예제
  • 배열은 전부 Array의 인스턴스임
  • 코드를 보면 속성이나 메서드 사용법이 동일함

 let avante = new Car('hyundai', 'avante', 'black');
 avante.color;   // 'black'
 avante.drive();  // 아반떼가 운전을 시작합니다.
    
 let arr = ['code', 'stats', 'pre'];
 arr.length; // 3
 arr.push('course'); // 새 element를 추가
    
 // 즉 배열을 정의하는 것은 Array의 인스턴스를 만들어내는 것과 동일해서 아래와 같은 방식으로도 배열을 만들 수 있음
 let arr = new Array('code', 'states', 'pre');

• mdn 문서에서 보는 Array.prototype.메서드명 같은 배열 메서드(push, filter, forEach)들이 클래스의 원형객체(프로토타입)에 정의되어 있기 때문
  ⇒ 이는 모든 메서드들이 클래스의 원형 객체(프로토타입)에 정의되어 있기 때문