[javascript] 상속과 프로토타입

상속과 프로토타입에 대한 정리 📕

상속

---

• Function

  특정 객체의 속성값을 다른 객체에서 받아 오는 것. 주로 다수의 객체에 공통적인 속성을 정의할 때 사용한다.

  const monster = {
      hitBox: 1
  }
    
  const slime = {
      attack: 10
  }
    
  slime.__proto__ = monster	// { attack:10, hitbox:1 }
    
  const pinkSlime = {
      name: 'pinkSlime',
      color: pink
  }
  pinkSlime.__proto__ = slime	// { name:'pinkSlime', color:pink, attack:10, hitbox:1 }
  

  단, Object.keys, Object.values, hasOwnProperty와 같은 method는 상속받은 속성은 포함하여 실행하지 않는다.

  for in 문은 상속받은 속성까지 반복한다.

• Class

  class Monster = {
  	constructor(){
          this.hitBox: 1
  	}
  	attack() {
          console.log('Attack!')
      }
  }
    
  class Slime extends Monster{
  	constructor(color){
          super();
          this.attack: 10,
          this.color: color
      }
      attack(){
          super.attack()
          console.log('말랑!')		//	Attack!과 말랑!이 함께 출력되는 함수가 되었다.
      }
  }
    
  const pinkSlime = new Slime('pink')
  

  Method 오버라이딩이 가능하며 super 를 통해 부모의 method를 가져다 쓰는 것도 가능하다.

  자식 클래스는 빈 공간에서 생성되는 것이 아니라 부모의 클래스로부터 생성되므로 constructor를 만들 때 super() 함수를 통해 부모의 constructor를 먼저 호출해야한다.

Prototype

상속과 같은 기능을 하며, 생성자 함수를 사용하여 객체를 복사할 때 사용한다.

위 상속처럼 생성한 객체마다 __proto___를 지정해주지 않아도 된다.

const Monster = function (hitRange) {
    this.hitBox = hitRange;
}

Monster.prototype.f_attack = function (){
    console.log('attack!')
}

const slime = new Monster(1)
const mushroom = new Monster(0.5)

상속된 객체 명을 확인할 때에는 .constructor 속성을 사용한다

출처

• https://youtu.be/OpvtD7ELMQo