클래스와 인스턴스에 대한 전반적인 개념

→ 객체 지향 프로그래밍은 하나의 모델이 되는 청사진(blueprint)을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴

[예시]

→ 예를 들어 청사진은 자동차 생산을 위한 설계도에 비유  /  클래스

→ 자동차가 기능하기 위해서는 네 바퀴와 핸들, 좌석 그리고 엔진이 필요

→ 기본적인 설계는 차의 종류에 상관없이 대체적으로 동일하게 적용

→ 설계도(청사진)를 바탕으로 각각의 객체가 특정한 자동차 모델로 나오게 되는 것

 

→ 자바스크립트에는 "객체"라는 개념이 객체 지향 프로그래밍과 무관하게 이미 존재

→ 용어를 잘 구분하는 것이 중요

→ 객체가 아닌 "청사진"을 바탕으로 한 객체는 인스턴스 객체(instance object), 줄여서 인스턴스(instance)

→ 청사진은 클래스(class)

→ 객체를 어떤 식으로 만드는지 살펴보면, 그냥 일반적인 함수를 정의하듯 만듭니다. 

→ 이때, 함수를 이용하는 방법이 조금 다른데 그냥 실행하는 것이 아니고 new 키워드를 써서 만듭니다.  (= 새로운 인스턴스를 만드는 방법)

→ 클래스를 그냥 함수로 정의하기 때문에 일반적인 다른 함수와 구분하기 위해서 클래스를 만드는 암묵적인 규칙으로, 보통 클래스는 대문자, 그리고 일반명사로 만듭니다. 

→ 따라서 일반적인 함수를 만들 때에는, 적절한 동사를 포함하고, 소문자로 시작하도록 만들면 좋습니다.

→ 클래스를 만드는 새로운 문법이 ES6(ECMAScript 6, 비교적 최근 자바스크립트 문법입니다)에 도입되었는데 바로 class 키워드입니다.

→ 여기서 보이는 함수는, 객체지향 프로그래밍에서 생성자(constructor) 함수라고 부릅니다 (= 인스턴스가 만들어질 때 실행되는 코드)

→ 생성자 함수 내부에 속성을 선언한다.

→ 참고로, 생성자 함수는 return값을 만들지 않습니다.

→ 인스턴스를 만들 때에는 new 키워드를 사용

→ new로 생성시 즉시 생성자 함수가 실행되며, 변수에 클래스의 설계를 꼭 닮은 새로운 객체, 즉 인스턴스가 할당

→ 각각의 인스턴스는 클래스의 고유한 속성과 메소드를 갖게 됩니다.

 

→ 메소드는 쉽게 말해 "객체에 딸린 함수"

→ 속성은 해당 클래스를 나타내는 특징을 나타낸다.

→ this라는 새로운 키워드가 등장  /  this는 인스턴스 객체를 의미

→ parameter로 넘어온 브랜드, 이름, 색상 등은 인스턴스 생성시 지정하는 값

→ 위와 같이 this에 할당한다는 것은, 만들어진 인스턴스에 해당 브랜드, 이름, 색상을 부여하겠다는 의미

(생성자 함수로 클래스 생성시 넘겨온 파라미터로 속성값 할당함, this는 인스턴스 객체를 의미하기 때문)

→ ES5는 prototype이라는 키워드를 사용해야 메소드를 정의

→ 예를 들어 Car 클래스에 메소드를 추가하기 위해서는 `Car.prototype.refuel`과 같이 `prototype`을 이용해야 합니다  /  클래스 외부 작성

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

→ `refuel() {}`, drive() {}`와 같이 작성되어 있는 부분  /  클래스 내부 작성

→ 여기에 있는 용어는 오직 자바스크립트에서만 유효한 용어

→ 생성자 함수 정도만 객체 지향 프로그래밍에서 보편적인 개념

→ prototype이나 this는 코드상에서 어떻게 쓰이는 지만 알아도 좋습니다.

→ 이 그림을 눈에 담아두고 용어를 익혀두는 것이 필요 ( 해당 코드는 ES5 방식)

 

[ES6 방식]

class Car {

  // 속성 부분(constructor)

  constructor(brand, name, color) {

    this.brand = brand;

    this.name = name;

    this.color = color;

  }

  // 메소드 부분

  drive() {

    console.log(this.name + ‘가 운전을 시작합니다’);

  }

 

}

→ 우리가 그동안 만들었던 배열은, 전부 (대문자) Array의 인스턴스

→ 배열은 (대문자) Array의 인스턴스이기 때문에 new Array(__, ___, ___) 와 같은 방식으로도 배열을 만들 수 있습니다.

→ 여러분이 배열 메소드 (push, filter, forEach...)등을 배울 때에, mdn 문서를 유심히 살펴보신 분들은, 메소드들이 대부분 Array.prototype.메소드명 과 같이 안내되어 있음을 발견

→ 모든 메소드들이 클래스의 원형 객체(prototype)에 정의