[Javascript] class를 통한 상속( constructor, extends, super )

 

 

Class

// 1. 생성자 함수로 비슷한 객체 만들기
function Info() {
  this.name = 'hong'
  this.age = '10'
}
Info.prototype.names = function(){
  console.log('생성자 함수') //prototype에 저장
}

const info2 = new Info();




// 2. class로 비슷한 객체 만들기
class info3{
  constructor(){
    this.name = 'hong'
    this.age = '10'
  }
  //constructor에 작성하지 않은 코드는 prototype에 저장
  names(){ 
   console.log('클래스')
  }
}

const info4 = new info3();

console.log(info2)
console.log(info4)

 

비슷한 객체를 만들때 생성자 함수를 사용하지않고  class를 사용해서도 만들 수 있다.

 

new를 통해 객체를 생성하는 것은 동일하다.

 

1번은 생성자 함수를 통해서 비슷한 객체를 생성하고 prototype을 사용해서 프로토타입 상속을 하였다.

 

2번은 class를 사용해서 constructor안에는 객체에 저장되는 값이고 new를 통해도 자식에도 똑같이 저장된다.

 

그 아래로는 prototype에 저장된다.

 

 

 

 

 

 

 

 

prototype을 사용한거랑 constructor안에 적지 않은 코드들은 prototype에 저장된것을 알 수 있다.

 

 

 

 

 

const info4 =  info3(); // class를 통해서 생성한 객체
const info2 =  Info(); // 생성자 함수로 만든 객체

console.log( info4 ) // 오류
console.log( info2 )  // undefined or return 값

 

new를 작성하지 않았을 경우에 생성자 함수로 만든 경우에는 undefined 리턴값이 있으면 리턴값

 

class로 생성하는 new는 오류를 출력한다.

 

 

 

 

 

 

 

 

생성자 함수를 통해 만든 객체는 for in문 에서 prototype값을 출력한다.

 

 

class를 통해 만든 객체는 for in문 에서 prototype값을 출력하지 않는다.

 

 

 

 

---

 

 

 

 

extends, super

 

// 생성자 함수로 비슷한 객체 만들기
class Info{
  constructor(i){
    this.name ='hong'
    this.age = i;
  }
}

class Info2 extends Info{
  constructor(i){
    super(i) // 상위 class constructor안에 값을 대입
  }
}

const ex = new Info2(10);

 

class를 상속한 class를 만드는 extends

 

constructor안에서의  super()는 상속받은 class의 constructor값을 물려 받는다는 뜻이다.

 

 

 

 

 

상위 class에 매개변수가 있다면

 

상속받은 class의 매개변수를 super, constructor 안에 대입해야한다

 

 

 

 

 

 

 

 

 

 

 

상위 class와 하위 class에 동일한 메소드가 있다면

가장 가까이에 있는 메소드를 출력한다.

 

 

 

 

 

 

 

 

constructor 밖에서 사용하는 super는 상속받은  class의 prototype을 의미한다.

 

부모 class의 메소드를 그대로 사용하면서 확장하려면

 

super.메소드()로 부모 class의 메소드를 사용할 수 있다.