JavaScript(prototype과 class를 활용한 상속 기능)

■ protorype

상속을 구현시키는 prototype

 

prototype은 상속을 구현하는 방법 중 하나로 모든 함수는 prototype 속성을 가지며, 이 속성은 객체입니다.

이 객체 내에 추가되는 메소드와 속성은 해당 함수를 호출하여 새로운 객체를 생성할 때 생성된 객체의 프로토타입으로 상속됩니다.

쉽게 함수에는 prototype라는 유전자를 담는 공간이 있고 이 공간에 추가되는 데이터는 자식들에게도 상속이 됩니다.

 

// prototype 이라는 공간을 가지고 있음
function Person(name) {
  this.name = name;
} 

// greet 메소드를 prototype 공간에 담음
Person.prototype.greet = function() {
  console.log("Hello, my name is " + this.name);
}; 

// '소개'에서도 greet 메소드가 상속됨
var 소개 = new Person("Alice");
소개.greet(); // "Hello, my name is Alice"

위의 예제를 통해 살펴보면, Person과 name 속성을 가진 인스턴스 '소개'를 만들었습니다.

이 경우, Person 함수는 prototype 속성을 가지고 있으며, greet 메소드를 함수의 prototype 객체에 추가하고 있습니다.

이렇게 하면 소개 객체는 greet 메소드를 호출할 수 있게 됩니다.

 

즉, protype을 사용하여 상속을 구현하면 기존 메소드를 한 번만 선언하고 여러 객체에서 재사용할 수 있습니다.

 

 

prototype의 특징

 

1. protype은 constructor 함수에만 생성됩니다.

 

2. 부모 요소의 protorype을 알고 싶을 때는, __proro__ 를 출력해보면 됩니다.

function 기계(){
  this.name = 'Kim';
  this.age = 15;
}
var 학생1 = new 기계();
console.log(학생1.__proto__);
console.log(기계.prototype); // 위의 코드와 동일하게나옴

 

3. __proto__ 를 직접 등록하면 object의 상속기능을 구현할 수 있습니다.

var 부모 = { name : 'Kim' };
var 자식 = {};

자식.__proto__ = 부모;
console.log(자식.name); // 자식 객체에도 name 속성이 상속됨

 

 

 

■ class 키워드로 구현하는 constructor

constructor 만들기

 

class 부모 {
  constructor(){
    this.name = 'Kim'
  }
}

var 자식 = new 부모();

 

상속가능한 함수 추가

 

class 부모 {
  constructor(){
    this.name = 'Kim';
    this.sayHi = function(){ console.log('hello') }
  }
}

var 자식 = new 부모();

class 부모 {
  constructor(){
    this.name = 'Kim';
  }
  sayHi(){ 
    console.log('hello') 
  }
}

var 자식 = new 부모();

 

 

class 를 상속시켜주는 extends

 

class로 constructor를 만들었을 때, 이를 상속시키려면 하드코딩하는 방법도 있지만, extends와 super를 활용할 수 있습니다.

class 할아버지{
  constructor(name){
    this.성 = 'Kim';
    this.이름 = name;
  }
  sayHi(){
    console.log('안녕 나는 할아버지')
  }
}

class 아버지 extends 할아버지{
  constructor(name){
    super(name);
    this.나이 = 50;
  }
  sayHi2(){
    console.log('안녕 나는 아버지');
    super.sayHi();
  }
}

var a = new 아버지('만수');

 

위의 코드와 같이 extend를 통해 할아버지 클래스를 상속하고,

constructor 안에 super 키워드를 사용하여 할아버지 클래스의 성과 이름 속성을 상속할 수 있습니다.

 

함수를 상속하고 싶다면, constructor 안에 쓰는 것이 아닌 바깥에 super 키워드를 사용하여 할아버지 class의 prototype을 상속할 수 있습니다.