객체지향_클래스와 인스턴스

클래스

• 객체 지향 프로그래밍에서 객체를 생성하기 위한 설계 도면이나 템플릿이다.
• 클래스는 객체의 상태를 나타내는 속성과 동작을 나타내는 메서드를 포함할 수 있다.
• 클래스는 객체를 생성하기 위한 설계 도면이라고 생각하면 된다.

class Car {
  constructor(brand, model, color) {
    this.brand = brand; // 브랜드명
    this.model = model; // 모델명
    this.color = color; // 색상
    this.speed = 0;
  }
// 엑셀을 작동한다.
  accelerate() {this.speed += 10;}
// 브레이크를 작동한다.
  brake() {this.speed -= 10;}
}

constructor()는 클래스 생성자 함수로서 클래스로부터 생성된 인스턴스를 초기화하기 위해 호출되는 함수라고 보면 된다.
위 코드와 같이 클래스를 이용하여 자동차의 기본적인 구조나 작동방식을 나타내는 기본 설계도를 완성시킬 수 있다.

---

인스턴스

• 클래스로부터 생성된 개별 객체를 가리키는 것
• 인스턴스 객체를 생성할 때 new 키워드를 사용하여 클래스를 생성하게 된다.

const newCar = new Car("Hyundai", "Sonata", "Black"); // newCar라는 인스턴스 생성

newCar라는 변수에 인스턴스를 생성하면 아래와 같은 객체가 할당된다.

Car {
  brand: "Hyundai",
  model: "Sonata",
  color: "Black",
  speed: 0
}

작동방식

1. 빈 객체 생성
2. 생성된 객체의 프로토타입이 생성자 함수의 prototype 프로퍼티와 연결
3. 생성자 함수의 코드 블록 실행, this 키워드는 생성된 객체를 가리킨다.
4. 생성된 객체에 속성과 메서드 추가, this 키워드를 사용하여 객체의 속성과 메서드를 정의할 수 있다.
5. 생성된 객체(인스턴스) 반환

생성자 함수

• 객체를 초기화하는 데 사용되며, new 키워드로 호출된다.
• 새로운 인스턴스를 생성하기 위한 과정이라고 보면 된다.

---

ES5 클래스 작성 문법과 ES6 클래스 작성 문법의 차이

ES5

function Car(brand, model, color) {
  this.brand = brand;
  this.model = model;
  this.color = color;
  this.speed = 0;

  this.accelerate = function() {
    this.speed += 10;
  };

  this.brake = function() {
    this.speed -= 10;
  };
}

• 생성자 함수와 프로토타입을 사용하여 객체와 메서드를 정의
• 생성자 함수는 일반 함수로 정의되고, 객체를 초기화하기 위해 new 키워드와 함께 호출
• 생성자 함수 내부에서 this 키워드를 사용하여 인스턴스에 속성을 정의
• 메서드는 생성자 함수의 프로토타입에 추가된다.

ES6

class Car {
  constructor(brand, model, color) {
    this.brand = brand;
    this.model = model;
    this.color = color;
    this.speed = 0;
  }

  accelerate() {
    this.speed += 10;
  }

  brake() {
    this.speed -= 10;
  }
}

• 클래스를 사용하여 객체와 메서드를 정의
• 인스턴스를 생성하기 위해 new 키워드와 함께 생성자를 호출
• 생성자 함수를 포함하여 초기화 정의
• 클래스의 메서드는 클래스의 프로토타입에 할당