javascript Class, 생성자함수

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);

User는 생성자함수이고

User2는 클래스이다.

User2의 constructor는 객체를 만들어주는 생성자 메서드이다.

User 
age: 30
name: "mike"
showName: ƒ ()
[[Prototype]]: Object

User2 
age: 19
name: "tom"
[[Prototype]]: Object

생성자 함수에서 정의한 메서드는 인스턴스 내에 존재하지만

클래스내에 정의한 메서드는 클래스의 prototype에 저장된다.  (사용법은 동일)

 

생성자함수에서도 prototype에 저장할 수 있는 방법이 있다.

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

이렇게 해주면 된다. User역시 생성자 함수이지만 동시에 Object이기 때문에 가능하다(js에서 함수도 Obj라고 볼 수 있음) 

 

클래스와 생성자함수의 차이는

new를 적지 않았을 때 나타난다.

생성자 함수에서는 new를 적지 않으면 오류가 나지 않고 undefinded가 반환이 되지만

클래스에서는 new를 적지않으면 오류가 난다.

 

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");
  }
}
const z4 = new Bmw();

Car를 상속받아서 Bmw 클래스를 만들 수 있다.

여기서 부모클래스(Car)에 있는 stop메서드를 오버라이딩 할 수 있다. 오버라이딩(이름을 같게함) 하게 되면 부모꺼를 가져다쓰는 것이아니라 자기가 정의한 프로퍼티를 쓸 수 있게된다.

자기가 정의한것도 쓰고 부모에서 정의된 것도 쓰려면

super를 쓰면된다.

 

또한 Bmw에서는 constructor를 만들지 않았지만 오류가 발생하지 않는다.

왜냐하면 constructor를 생략하면 아래와 같이 자동적으로 부모의 constructor가 발생이 되기 때문이다.

constructor(...args) {
	super(...args);
    }

그럼 constructor를 만들면 어떻게 될까?? 오류가 난다!!!!!

 

부모객체에서의 constructor는 {}빈객체를 만들고 this를 사용하여 프로퍼티를 생성하지만

extends로 생긴 자식객체에서는 빈객체를 만드는 것을 생략하기 때문에 오류가 발생하는 것이다.

따라서 constructor를 만들고 싶으면 construct(){ super(), <<< 부모의 constructor를 실행시켜줘야한다. 

또한 부모에서 정의한 this.color = color를 사용하기 위해서는 자식의 constructor에서 받아서 보내주는 작업이 필요하다

class Bmw extends Car {
  constructor(color) {
    super(color);
    this.speed = 100;
  }

즉 정리하자면 자식은 constructor를 사용하면 빈객체를 만드는 작업을 생략하기때문에 오류가 발생한다.

super()를 사용해야 오류가 발생하지 않고 또 부모의 프로퍼티를 정의하고 싶다면 constructor(color) 자식이 color를 대신 받아서 super(color) 부모에 전달하여 입력하는 절차를 거쳐야한다.

(constructor를 생략했을 때 오류가 나지 않았던 이유는 자동적으로

 

constructor(...args) {
super(...args);
    } 처리가 되었기 때문이다.. 그래서 우리가 수동으로 만들때는 이렇게 똑같이 만들어 주어야한다 !!!