Class

Class는 객체를 생성하기 위한 템플릿입니다. 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화합니다. 자바스크립트에서 클래스는 프로토타입을 이용해서 만들어졌지만 ES5의 클래스 의미와는 다른 문법과 의미를 가집니다.

Class를 사용하는 가장 큰 이유는 재사용성이고 작은 사이트의 경우 잘 만든 함수 하나로도 충분히 개발이 용이했다고 하면 더 복잡한 사이트를 만들게 될 경우에는 Class의 장점을 알 수 있습니다.

class student {
  constructor(name, bootcamp) {
    this.name = name;
    this.bootcamp = bootcamp;
  }
  // 프로토타입 메소드
  myspec() {
    console.log(`안녕 내이름은 ${this.name} 이고 ${this.bootcamp} 다니고 있어!`);
  }
  // 정적 메서드
  static hi(){
    console.log("만나서 반가워");
  }
}

const yeahhun = new student("예훈","코드스테이츠");

yeahhun.myspec();
student.hi();

---

Instance

인스턴스란? 메모리에 저장되는 객체의 실체에 초점을 맞춘 용어입니다.

비슷한 성질을 가진 여러개의 객체를 만들기 위해 일종의 설계도라고 할 수 있는데 생성자 함수(constructor)을 만들어 사용하는데 이렇게 생성된 객체를 인스턴스라고 부를 수 있다.

위에 있는 코드도 생성자 함수 라고 볼 수 있는데 생성자 함수 안에 여러 객체 인스턴스를 볼 수 있다.

class student {
  constructor(name, bootcamp) {
    this.name = name;
    this.bootcamp = bootcamp;
  }

}

const yeahhun = new student("예훈","코드스테이츠");

constructor(생성자)

생성자 함수 안에서는

• 클래스 내에 한개만 존재 할 수 있다.
• 클래스에서는 return을 생햑한다.
• 생성자 내부안에서 this로 선언 한 값들은 새로 만들어진 인스턴스에 적용된다.
• 함수 이름의 첫 글자는 대문자로 시작한다.

new 연산자

new 연산자는
새로운 인스턴스를 만들때 쓰는 연산자로
변수 변수명 = new class스명(매개변수); 로 사용합니다.

---

ES5

function car(name, fuel, brand) {
	this.name = name;
	this.fuel = fuel;
	this.brand = brand;
}

car.prototype.getbrand = function(){
    console.log(`차 브랜드는 ${this.brand}입니다.`);
}

const sedan = new car("카브리올레", 'gasolin, "벤츠");

sedan.getname(); // 차 브랜드는 벤츠 입니다..

ES5에서는 function을 사용하여 prototype을 추가하는 방식으로 ES6랑 약간의 차이가 있는 것을 확인 할 수 있습니다. ES6에서는 function을 쓰지 않아도 매서드를 추가할 수 있으며 더 간단한 모습을 확인 할 수 있다.

ES6

class car {
  constructor (name, fuel, brand){
	this.name = name;
	this.fuel = fuel;
	this.brand = brand;
}

  getbrand(){
    console.log(`차 브랜드는 ${this.brand}입니다.`);
 	}
}
const sedan = new car("카브리올레", 'gasolin, "벤츠");

sedan.getname(); // 차 브랜드는 벤츠 입니다..