Class

🚨 오늘은 class에 대하여 공부해보자,,,,

• 지금까지 비슷한 형태의 객체를 생성하기 위해서 생성자 함수를 사용했었는데 class를 사용해서도 만들 수 있다.

• Class는 ES6에 추가된 스펙입니다.

// 생성자 함수
const User = function (name, age) {
  this.name = name;
  this.age = age;
  this.showName = function () {
    console.log(this.name);
  };
};

🌀 생성자 함수

: 객체를 생성하는 함수를 의미한다.

• 생성자 함수 특징
  • 대문자로 시작하게 된다.
  • new라는 키워드를 사용해서 객체를 생성할수있다
• prototype & proto
  • 실제 객채를 만들 때 생성자의 prototype이 참조된 모습이다. 생성자의 프로토타입을 참조하기 때문에 _proto_와 prototype은 같다.
• 간략하게 정리

  • prototype은 생성자 함수에 정의한 모든 객체가 공유할 원형

  • _proto_는 생성자 함수를 new로 호출할 때, 정의해두었던 prototype을 참조한 객체

  • prototype은 생성자 함수에 사용자가 직접 넣는 거고, _proto_는 new를 호출할 때 prototype을 참조하여 자동으로 만들어진다.

  • 생성자에는 prototype, 생성자로부터 만들어진 객체에는 _proto_

  • 생성자에는 prototype, 생성자로부터 만들어진 객체에는 _proto_

    👉  prototype이 개발자입장에서 객체에 변화를 주기위해 access해야 될 것이고, _proto_는 생성자로부터 만들어진 객체가 prototype을 참조한 객체이다.

🌀 Prototype, _proto_와 constructor의 관계

• prototype과 constructor는 부모자식 관계라고 생각하면 된다.

class를 사용하여 만든 함수

class User2 {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  showName() {
    console.log(this.name);
  }
}

const tom = new User2("hoo", 26);

🤔  차이점은 ???!!!

• new를 통해서 호출했을 때 내부에서 정의 된 내용으로 객체를 생성하는 것은 동일합니다.
• class라는 키워드를 사용하고 내부에 constructor가 있습니다. 🙄  그럼 constructor가 무엇이냐?!!
  • constructor은 객체를 만들어주는 생성자 메서드입니다. (new를 통해 호출하면 자동으로 실행된다.)
• 👇  객체를 초기화 하는 값은 이곳에서 정해지는데, 인수로 (name, age)를 넘겨 받을 수 있습니다. 이렇게 되면 name과 age가 만들어진다. 그리고 이 showName처럼 class내에 정의된 메서드는 user2에 프로토타입에 저장된다.
  

🤔  그럼 생성자 함수를 class함수와 동일하게 동작하도록 만들려면 어떻게 해야할까??

// 생성자 함수
const User = function (name, age) {
  this.name = name;
  this.age = age;
  // this.showName = function () {
  //   console.log(this.name);
  // };
};

User.prototype.showName = function () {
  console.log(this.name);
}

• 위에 코드에서 //부분을 지우고 밑에 코드를 새로 추가 했다.

• 그럼 이렇게 똑같은 결과를 가질 수 있게 된다.

🤔  그렇다면 class를 사용하는 이유는 무엇일까???

const User = function (name, age) {
  this.name = name;
  this.age = age;
  // this.showName = function () {
  //   console.log(this.name);
  // };
};

User.prototype.showName = function () {
  console.log(this.name);
};

const tom = User("Tom", 30);

• new를 제거한 후에 실행하면 tom 과 undefined가 뜨게 된다.

• class에 똑같이 new를 제거해 보았다. 👇

class User2 {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  showName() {
    console.log(this.name);
  }
}

const hoo = User2("Hoo", 26);

그럼 error가 뜨게 된다.

• TypeError ⇒ class는 new 없이 실행되지 않는다.

• tom과 hoo를 비교해보았다.
  • 프로토타입 내부에 있는 constructor를 확인해보면 User2의 constructor는 class라고 명시되어 있다.
  • constructor가 class라는 것을 알 수 있고, 이 경우에 new없이 호출하면 error가 발생하는 것을 확인 해보았다.

🌀 for in문으로 확인해보기

• tom을 for in문을 사용하여 순회해보면 name, age, 프로토타입의 showName까지 다 확인할 수 있다.
• 반면에 hoo를 for in문으로 확인해보면 name, age만 나오는 것을 확인 할 수 있다.

🤔  왜????

⇒ for in문은 프로토타입에 포함된 프로퍼티들은 다 보여주고 객체가 가진 프로퍼티만 판별하기 위해서 hs on 프로퍼티를 사용해야 한다. 그런데 class의 메서드는 for in문에서 제외된다.

• 막간 차이점
  • 클래스에 정의된 메서드는 열거할 수 없습니다(non-enumerable)
  • for..in으로 객체를 순회할 때, 메서드는 순회 대상에서 제외됩니다.
  • 클래스는 항상 엄격 모드로 실행됩니다(use strict). 클래스 생성자 안 코드 전체엔 자동으로 엄격 모드가 적용됩니다.

🌀 상속

class의 경우의 상속은 extends 키워드를 사용한다.

• Car라는 class

class Car {
  constructor(color) {
    this.color = color;
    this.wheels = 4;
  }
  drive() {
    console.log("Drive...");
  }
  stop() {
    console.log("STOP!!!");
  }
}

• Car를 상속해서 만든 Audi

class Audi extends Car {
  park() {
    console.log("PARK::");
  }
}

const A6 = new Audi("white");

• extends키워드를 사용하여 만든다.

• A6를 검색해보면 Car class에서 선언한 color와 wheels가 안에 들어있다.
• prototype에는 park가 들어있다. class내부에서 선언한 이 메서드는 prototype밑으로 들어간다.
• A6.drive()를 찾아보면 A6 객체에서 찾고 없어서 proto에가서 찾고 없으니깐 또 proto에가서 찾아봐서 drive메서드를 사용할 수 있다.

🌀  class 메소드 오버라이딩 (method overriding)

🤔  만약 Audi안에 Car에서 정의한 메서드와 동일한 메서드가 존재하면 어떻게 될까유??

class Car {
  constructor(color) {
    this.color = color;
    this.wheels = 4;
  }
  drive() {
    console.log("Drive...");
  }
  stop() {
    console.log("STOP!!!");
  }
}

class Audi extends Car {
  park() {
    console.log("PARK::");
  }
  stop() {
    console.log("OFF!!");
  }
}

const A6 = new Audi("white");

• class Audi에 stop을 추가해보았다.

→ off가 나오게 된다.

• 이렇게 동일한 이름의 메소드를 정의할 경우 덮어 쓰게 된다.

🤔  만약 부모의 메서드를 그대로 사용하고 싶으면서 확장하고 싶을 때는 어떻게 해야될까??

🙈  그때 사용하는 것이 바로 !!! super()!!!!

class Audi extends Car {
  park() {
    console.log("PARK::");
  }
  stop() {
    super.stop();
    console.log("OFF!!");
  }
}

const A6 = new Audi("white");

• stop안에 super를 추가했다.

→ 이렇게 stop이 나오고 off가 나온다.

• super.메소드명으로 부모 class에 정의된 메소드를 사용할 수 있게 된다.
• 이 방식을 오버라이딩이라고 한다.

🌀 생성자 오버라이딩

class Audi에 constructor를 사용해서 네비게이션을 추가해보겠습니다.

class Audi extends Car {
  constructor() {
    this.navigation = 1;
  }
  park() {
    console.log("PARK::");
  }
}

const A6 = new Audi("white");

이렇게 저장하면 ERROR가 난다. ㅋㅋㅋㅋ

• constructor에서 this를 사용하기 전에 super constructor 즉, 부모 생성자를 반드시 먼저 호출해야한다.
• class에 constructor 은 {} 빈 객체로 만들어주고 this로 이 객체를 가르쳐줘야한다.
• 반면 extends를 사용하서 만든 자식 class는 빈객체를 만들고 this에 할당해주는 이 과정을 건너 뛸 수 있다.
• 그래서 항상 super키워드로 부모 class의 constructor키워드를 실행해줘야함.

class Audi extends Car {
  super();
  constructor() {
    this.navigation = 1;
  }
  park() {
    console.log("PARK::");
  }
}

const A6 = new Audi("white");

다시 A6를 콘솔창에 확인해보면

→ navigation 은 1로 잘 뜨지만, color은 undefined가 뜬다. 왜???!!!!

• 자식 class의 constructor에 부모와 동일한 인수를 받는 작업을 해주어야 한다.

class Audi extends Car {
  constructor(color) {
    super(color);
    this.navigation = 1;
  }
  park() {
    console.log("PARK::");
  }
}
const A6 = new Audi("white");

constructor에 color을 받고 super에 color을 넘겨줘야 한다.

→ 그럼 잘 들어가진다.!!!!

정리!!

class Car {
  constructor(color) {
    this.color = color;
    this.wheels = 4;
  }
  drive() {
    console.log("Drive...");
  }
  stop() {
    console.log("STOP!!!");
  }
}

class Audi extends Car {
  park() {
    console.log("PARK::");
  }
}
const A6 = new Audi("white");

• 처음에 이 코드였다. 자식 class의 Audi에는 constuctor가 없다. 이럴때 자바스크립트는???!!!

class Car {
  constructor(color) {
    this.color = color;
    this.wheels = 4;
  }
  drive() {
    console.log("Drive...");
  }
  stop() {
    console.log("STOP!!!");
  }
}

class Audi extends Car {
	constructor(...args){
		super(...args);
}
  park() {
    console.log("PARK::");
  }
}

const A6 = new Audi("white");

• constructor가 없으면 constructor가 있는척 행동한다. 그렇기 때문에 자식 생성자는 무조건 부모 생성자를 호출해야한다.
• constructor만 사용하면 처리되지 않기 때문에 항상 super를 사용해서 호출해줘야 한다.
• 그 후에 this.property로 할당해줘야 한다.