코딩앙마 자바스크립트 중급 강의 12. 클래스(Class)

클래스(Class)

ES6에 추가 된 스펙

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

const mike = new User("Mike", 30);

 

// ES6 클래스
class User {
  constructor (name, age) {
    this.name = name;
    this.age = age;
  }
  showName() {
    consle.log(this.name);
  }
}

const mike = new User("mike", 30)

constructor는 객체를 만들어주는 생성자 함수다. showName()은 User의 프로토타입에 저장된다.

 

이렇게 작성하면 기존 생성자 함수도 프로토타입에 저장할 수 있다.

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

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

const mike = new User("Mike", 30);

 

 

뭐가 다를까?

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

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

const mike = User("Mike", 30); // new키워드를 빼먹음

console.log(mike) // undefined

기존 생성자 함수는 개발자가 실수로 new 키워드를 빼먹었어도 undefined가 들어올 뿐 에러는 발생하지 않고 동작한다. 

 

// ES6 클래스
class User {
  constructor (name, age) {
    this.name = name;
    this.age = age;
  }
  showName() {
    consle.log(this.name);
  }
}

const mike = User("mike", 30) // 에러발생

클래스는 new없이 사용하면 타입에러가 발생한다. 

 

또 확인해보면 클래스로 만든 mike는 constructor가 User라고 확인할 수 있다.

 

 

 

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

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

const mike = new User("Mike", 30);

for (const p in mike) {
  console.log(p)
}
// name
// age
// showName

for in 문을 돌려보면 기존 생성자 함수로 만든 mike는 모든 키들이 다 나오는 것을 볼 수 있다.

 

// ES6 클래스
class User2 {
  constructor (name, age) {
    this.name = name;
    this.age = age;
  }
  showName() {
    consle.log(this.name);
  }
}

const mike = new User2("mike", 30) // 에러발생

for (const p in mike) {
  console.log(p)
}
// name
// age

for in 문을 돌려보면 클래스로 만든 mike는 constructor에 있는 키만 나오는 것을 볼 수 있다.

---

클래스 상속

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")
  }
}

const z4 = new Bmw("blue")

z4.drive(); // drive!

z4는 Bmw에서 drive()를 찾아보고 없으면 프로토타입에서 찾는다. 그래서 상속받은 Car의 drive를 출력한다.

 

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

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() {
    console.log("stop!stop!")
  }
}

const z4 = new Bmw("blue")

z4.stop(); // stop!stop!

부모에 있는 함수와 같은 이름의 함수를 지정하면 덮어 쓰게 된다.

 

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("stop!stop!")
  }
}

const z4 = new Bmw("blue")

z4.stop(); 
// stop!
// stop!stop!

super라는 키워드를 사용하면 부모의 값과 함께 쓸 수 있다. 이런 방식을 오버라이딩이라고 한다.

 

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")
  }
  stop() {
    super.stop();
    console.log("stop!stop!")
  }
}

const z4 = new Bmw("blue");
console.log(z4) // undefined

부모의 constructor를 사용하려고 super 키워드도 적어줬지만 이렇게 하면 blue라는 값을 넣어줬음에도 undefined가 나온다.

제대로 동작하기 위해서는 자식의 constructor에서도 동일하게 인자를 받는 작업을 해줘야 한다.

 

자식생성자가 비어있으면 비어있는데로 작동하기 때문에 무조건 부모생성자를 호출해야하고, 부모생성자에서처럼 인자를 받는 작업을 해줘야한다.

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")
  }
  stop() {
    super.stop();
    console.log("stop!stop!")
  }
}

const z4 = new Bmw("blue");
console.log(z4);
// { color: "blue", navigation: 1, wheels: 4}