javascript 클래스(class)

* class: ES6에 추가된 스펙. class라는 키워드를 사용하고 내부에 constructor가 있음. new를 통해서 호출하면 자동으로 실행됨.

- class에 있는 constructor 부분은 객체를 초기화하기 위한 값으로 인수를 넘겨받을 수 있는데 여기서는 name과 age가 만들어짐

- showName처럼 클래스를 정의한 메서드는 User2의 프로토타입을 잘라냄.

const User = function(name,age){
  this.name = name;
  this.age = age;
  this.showName = function () {
    console.log(this.name);
  };
};
const mike = new User("Mike",30);

class User2 {
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
  showName(){
    console.log(this.name);
  }
}
const tom = new User2("Tom",19);

=> 그래서 mike는 객체 내부에 showName이 있고,

Tom은 프로토타입 내부에 showName이 있음

사용법은 mike.showName(); , tom.showName(); 동일

-  class로 만든 class User2에서 new를 빼고 실행할 경우 console창에서 에러가 발생하도록 설계되어 있음.

 

 

 

 

- 생성자함수에서 쓴 부분을 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 mike = new User("Mike",30);

- new를 빼고 실행할 경우 undefined가 나오는데 User함수가 반환하는 값에서 return문이 없으므로 아무것도 반환하지 않기 때문. ( const mike = User("Mike",30)에서 반환한 값이 undefined고 그 값이 mike로 들어감)

 

- for in 문 사용해 순회할 경우 mike는 name, age, showName 다 나오지만 tom의 경우에는 name과 age만 나옴

<- for in문은 프로토타입에 포함된 프로퍼티들을 다 보여주고 객체가 갖고 있는 프로퍼티를 판별하기 위해서 hasOwnproperty를 사용해야 했는데 class 메서드는 for in문에서 제외됨

 

 

 

 

* 생성자함수는 프로토타입을 이용해 상속을 구현했었는데 class에서의 상속은  extends 키워드 사용

- car class에서 선언한 color와 wheels가 들어가있고 프로토타입에서는 park가 있음.

- 클래스 내부에서 선언한 메서드는 프로토타입 밑으로 들어가는데 여기에 drive와 stop이 있음.

class car{
  constructor(color){
    this.color = color;
    this.wheels = 4;
  }
  drive(){
    console.log("drive..");
  }
  stop(){
    console.log("stop!");
  }
}
//car를 상속해서 bmw 만들기
class Bmw extends car{
  park(){
    console.log("park");
  }
}
const z4 = new Bmw("blue");

* Class - 메소드 오버라이딩(method overriding)

- 동일한 메소드가 존재할 경우 덮어쓰기가 됨.

- 만약 기존의 메소드를 사용하고 싶을 경우 super를 사용. -> stop과 no가 같이 출력

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

class Bmw extends Car{
  park(){
    console.log("park");
  }
  stop(){
    super.stop();
    console.log("NO");
  }
}
const z4 = new Bmw("blue");

=> 이렇게 super.메소드 이용해서 부모 class에 정의된 메소드를 사용할 수 있음.

 

*Class - 오버라이딩(overriding) (생성자 오버라이딩)

- constructor에서 this를 사용하기 전에 super constructor 즉 부모 생성자를 반드시 호출해야 함

- class의 constructor는 빈 객체로 만들어지고 this로 객체를 가르키게 됨. 반면에 extends 써서 만든 자식 클래스는 빈 객체가 만들어지고 this에 할당하는 작업을 건너뛰기 때문에 항상 super();를 이용하여 부모클래스의 constructor를 실행해줘야 함.

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

class Bmw extends Car{
  constructor(){
    super();
    this.navigation = 1;
  }
  park(){
    console.log("park");
  }
}
// const z4 = new Bmw("blue"); -> undefined

- super(); 쓰지 않는 경우 에러가 발생

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

class Bmw extends Car{
  constructor(){
    this.navigation = 1;
  }
  park(){
    console.log("park");
  }
}
// const z4 = new Bmw("blue"); -> 에러발생

- 제대로 동작하기 위해서는 자식 클래스의 constructor에 동일한 인수를 추가해줘야 함

constructor가 없으면 있는 것처럼 행동해서 자식생성자는 부모 생성자에 있는 것을 무조건 호출해야함

자식생성자에 constructor가 있으면 super를 이용해 호출해주고 this.프로퍼티로 할당해줘야 함

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

class Bmw extends Car{
  constructor(color){
    super(color);
    this.navigation = 1;
  }
  park(){
    console.log("park");
  }
}
// const z4 = new Bmw("blue"); -> z4 / Bmw {color: 'blue', wheels: 4, navigation: 1}