💡 class 는 객체를 생성하기 위한 템플릿

💡 인스턴스 객체 는 그 템플릿을 기준으로 만든 객체

❤️ ES5 에서의 class

function Car(brand, name, color){
	// 속성의 정의
	// 인스턴스가 만들어질 때 실행되는 코드
	// 여기서 this는 인스턴스 객체를 가리킨다
	this.brand = brand;
	this.name = name;
	this.color = color;

	// 메서드 정의
	Car.prototype.refuel = function() {
		console.log(`${this.name} 에 연료를 공급합니다.`);
	}

	Car.prototype.drive = function() {
		console.log(`${this.brand} 가 주행을 시작합니다.`);
	}
}

🔥 class 함수 작성하기

❗️ class 선언 규칙

1. function 키워드 사용
2. 그냥 함수와 class 함수를 구분하기 위해서 class 함수의 이름은 명사로, 첫 글자는 대문자로 지어준다.

❗️메소드 정의

prototype 을 이용하여 메서드를 정의해야 한다.

클래스함수이름.prototype.메서드이름 의 형태로 정의할 수 있다.

❤️ ES6 에서의 class

class Car {
	// 속성의 정의
	constructor(brand, name, color) {
		// 인스턴스가 만들어질 때 실행되는 코드
		// 여기서 this는 인스턴스 객체를 가리킨다
		this.brand = brand;
		this.name = name;
		this.color = color;
	}

	// 메서드 정의
	refuel(){
		console.log(`${this.name} 에 연료를 공급합니다.`);
	}

	drive() {
		console.log(`${this.brand} 가 주행을 시작합니다.`);
	}
}

🔥 class 함수 작성하기

함수를 정의하는 방법에 함수 표현식과 함수 선언식이 있는 것처럼 class 를 정의하는 방법에도 표현식과 선언식이 존재한다.

❗️ class 선언

class Car {
	constructor() {
	.
	.
	.
	}
}

❗️ class 표현식

let Car = class {
	constructor() {
	.
	.
	.
	}
}
console.log(Car.name); // Car

let Car = class NiceCar {
	constructor() {
	.
	.
	.
	}
}
console.log(Car.name); // NiceCar

class 함수의 이름을 알고 싶다면 name 속성을 이용할 수 있다.

| 👩‍💻 예제

Rectangle 이라는 변수에 class 함수를 할당해주었다. 그리고 그 class 함수의 찐 이름은 Rectangle2 다.

그러나 Rectangle2 로 class 를 호출하면 아래와 같은 오류가 뜬다.

Rectangle2 is not defined at <anonymous>:1:1

이를 통해 class 표현식도 함수 표현식과 비슷하게 함수의 진짜 이름은 무시되고, 변수의 이름으로만 함수를 호출할 수 있다는 것을 알 수 있다.

❗️ constructor

여기서 constructor() 라는 메서드는 생성자 함수라고 불린다.

constructor() 메서드는 class 의 인스턴스 객체를 생성하고 초기화할 수 있다. 그래서 따로 return 문이 필요없다.

constructor() 메서드는 클래스 안에서 딱 한 개만 존재할 수 있다.

❗️ class 선언 규칙

1. class 키워드 사용
2. class 함수의 이름의 첫글자는 대문자로, 이름은 명사로 지어준다.

❗️메소드 정의

class 함수 안에서 간단하게 메소드이름(){} 의 형태로 정의할 수 있다.

❤️‍🔥 인스턴스 객체

🤔 위에서 만든 Car 라는 클래스 함수의 속성과 메서드를 인스턴스 객체에서 사용하려면 어떻게 해야 할까?

• 👀 class 함수 보기

  class Car {
  	// 속성의 정의
  	constructor(brand, name, color) {
  		// 인스턴스가 만들어질 때 실행되는 코드
  		// 여기서 this는 인스턴스 객체를 가리킨다
  		this.brand = brand;
  		this.name = name;
  		this.color = color;
  	}
  
  	// 메서드 정의
  	refuel() {
  		console.log(`${this.name} 에 연료를 공급합니다.`);
  	}
  
  	drive() {
  		console.log(`${this.brand} 가 주행을 시작합니다.`);
  	}
  }

  constructor() 메서드 안에서 쓰인 this 는 인스턴스 객체를 가리키고, 만들어진 인스턴스 객체에 해당 값을 부여하겠다는 의미이다.
  

let mini = new Car("bmw", "mini", "white");
mini.brand; // "bmw"
mini.refuel(); // 미니에 연료를 공급합니다.

위처럼 new 키워드를 사용하여 인스턴스 객체를 만들 수 있다.

let 인스턴스 객체 이름 = new class함수이름 (속성, ... 속성);

console.log(mini);

---

혹시나 잘못된 정보가 있다면 댓글로 알려주세요 ! 저의 성장의 큰 도움이 될 것 같습니다.🌱