클래스(class)와 인스턴스(instance)

클래스(class)

자바스크립트는 객체 지향 언어 (OOP: Object - Oriented Programming language)이다
JavaScript 에서 클래스는 객체(object)가 아니라 객체를 만들기 위한 템플릿이다.
ES6 에서 클래스를 정의할때 class 키워드를 사용한다.
class 안에 생성자 함수가 포함되고, 이 생성자 함수는 리턴값을 만들지 않는다.
class 의 이름은 일반 함수와 구분하기 위해 대문자로 시작하고, 일반명사의 형태로 만든다. (일반 함수는 소문자, 동사를 사용)

 

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

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

=> constructor는 객체지향 프로그래밍에서 생성자 함수라고 부른다.

   생성자 함수는 return 값을 만들지 않는다.

클래스: 속성의 정의

this 는 인스턴스 객체를 의미한다.

ES5

function Car(brand, name, color){
  this.brand = brand;
  this.name = name;
  this.color = color;
}

 

ES6
class Car{
  constructor(brand, name, color){
    this.brand = brand;
    this.name = name;
    this.color = color;
  }
}

this는 인스턴스 객체를 의미하고 parameter로 넘어온 브랜드, 이름, 색상 등은 인스턴스 생성 시 지정하는 값이며, 위와 같이 this에 할당한다는 것은 만들어진 인스턴스에 해당 브랜드, 이름, 색상을 부여하겠다는 의미이다.

 

클래스: 메소드의 정의

 

ES5

function Car(brand, name, color){}

Car.prototype.refuel = function() {
  // 연료 공급을 구현하는 코드
}
Car.prototype.drive = function() {
  // 운전을 구현하는 코드
}

 

 

ES6

class Car {
  constructor(brand, name, color){}
  
  refuel(){
    // 연료 공급을 구현하는 코드
  }
  drive(){
    // 운전을 구현하는 코드
  }
}

 

• ES5는 prototype이라는 키워드를 사용해야 메서드를 정의할 수 있고 Car 클래스에 메서드를 추가하기 위해서는 Car.prototype.refuel과 같이 prototype을 이용해야 한다.
• ES6에서는 생성자 함수와 함께 class 키워드 안쪽에 묶어서 정의하고 refuel() {}, drive() {}와 같이 작성되어 있는 부분이다
  
  

인스턴스(instance)

클래스를 기반으로 한 객체 (instance object)
인스턴스는 **new 키워드**를 사용해서 만든다.
각각의 인스턴스는 클래스의 속성과 메서드를 갖게 된다.

let avante = new Car('hyundai', 'avante', 'black');
avante.color; // 'black'
avante.drive; // 아반떼가 운전을 시작합니다.




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

• 즉시 생성자 함수가 실행되며 변수에 클래스의 설계를 가진 새로운 객체 즉 인스턴스가 할당된다.
• 각각의 인스턴스는 Car라는 클래스의 고유한 속성, 메소드를 갖게 된다.

 

prototype:모델의 청사진을 만들 때 쓰는 원형 객체(original from)이다.

constructor:인스턴스가 초기화 될 때 실행하는 생성자 함수

this:함수가 실행 될때 해당 scope마다 생성되는 고유한 실행 context(execution context),

          new 키워드로 인스턴스를 생성했을 때에는  해당 인스턴스가 바로 this의 값이 된다.

 

상속

• 클래스 내부의 constructor 의 규칙을 다른 클래스에 상속 시키는 것을 이야기한다.
• 즉, 상속하는 클래스의 constructor 의 규칙을 상속받는 하위 클래스가 재사용하는 것을 이야기한다.

extends

상위 클래스와 하위 클래스를 연결하는 키워드

class 상속받을 클래스 extends 상속시킬 클래스 로 사용한다.

super

하위 클래스에서 상위 클래스의 생성자 규칙을 그대로 사용하겠다고 선언하는 것.

super(규칙을 그대로 사용할 상위 클래스 매개변수) 로 사용한다.

extends 가 사용된 경우 반드시 super 가 사용되어야 한다.

super 는 constructor 내부의 최상단에 위치하여야 한다.

 

class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  showName() {
    console.log(this.name + "난부모야");
  }

  showShow() {
    console.log("부모부모" + this.age);
  }
}

class sora extends User {
  /* 자체 생성자가 없는 클래스를 상속받으면 자동으로 만들어짐
   constructor(...args) {
    super(...args);
  }*/
  constructor(name, age) {
    super(name, age);
    this.like = "bread";
  }
  nuum() {
    console.log("maam");
  }
  showName() {
    super.showName();
    return "나는 자식이야";
    // console.log(this.name);
  }
}
const soso = new sora("갸갸갸", 29);