class ES6 문법 상속기능

class

constructor , prototype 을 이용한 상속기능을 만들 수 있게 도와주는 문법.

기존 function부터 시작하던 문법과 기능상 차이는 크게 없고 약간 더 보기쉽게 표현해줄 뿐.

 

 class  속성 기능  사용 방법 

1. constructor를 만들 때 

(constructor를 만들기 위해서는 함수를 사용하던지 혹은 class를 사용한다. )

 

만약 부모요소에 함수를 추가하고 싶다면 ?

부모요소의 constructor  안에다 작성할 수 있다.   

__장점!!   새로 생성되는 자식은 sayaHiho()를 직접 가지게 됨. 자유롭게씀.

         

class Parents {
   constructor(){
      this.name = 'kim',
      this.sayHiho = function(){
         console.log('안농ddd');
      }
   }
}
let sun = new Parents();
sun.sayHiho();

 

 

2. 부모요소의 prototype 에 추가.  

__ 장점 : 모든 자식들이 공통적으로 사용할 수 있는 내장함수 생성 가능. 관리 용이.

         

class Parentss{
   constructor(){
      this.name = 'kim'
   };
   sayHiho(){console.log('안농 ㅇㅇㅇ')};  
   // class 밖에 부모.prototype.sayHi = function(){} 이렇게 해도 똑같이 생성됨.
};

let daughter = new Parentss();
console.log(daughter.__proto__);   // 결과값 {constructor: ƒ, sayHiho: ƒ} 으로 같다
console.log(Parentss.prototype);   // 결과값 {constructor: ƒ, sayHiho: ƒ} 으로 같다
daughter.sayHiho();

 

 

 

자식요소.__proto__  부모요소.prototype   와 같은데 보기 쉬운 말.

 Object.getPrototypeOf() 

괄호 안에 넣은 것의 부모 prototype을 출력해줘 라는 말. 

 

console.log(daughter.__proto__); 
console.log(Parentss.prototype);
Object.getPrototypeOf(daughter);

 

3가지 모두 결과값은 같지만 Object.getPrototypeOf() 가 한눈에 보이기 쉬움.