Prototype

프로토타입

• js는 프로토타입 기반 언어입니다.

• 클래스 기반 언어 : 상속 사용

• 프로토타입 기반 언어 : 어떤 객체를 원형으로 삼고 이를 복제(참조)함으로써 상속과 비슷한 효과가 가능해요.

javascript는 프로토타입 기반 언어예요. 방금 상속과 비슷한 효과라고 말하긴 했지만 상속을 생각하지 말아요! 연결, 링크라고 생각하는게 좋다고 생각합니다!

프로토타입 이해를 위해 3가지 constructor, prototype, instance를 기억해봅시다.

const instance = new Constructor(); 

• 생성된 instance에는 숨겨진 프로퍼티인 proto가 자동으로 생성됩니다. 그리고 이 숨겨진 프로퍼티는 생성자 함수의 prototype을 참조합니다.

• 혹시 개발할 때 객체를 console.log() 찍어본 경우 있지 않으신가요? 본인이 만들지도 않은 proto가 붙어 있는 걸 본 적이 있을 거예요.

• proto 프로퍼티는 생략할 수 있도록 구현되어 있어요. 따라서, 생성자 함수의 prototype에 어떤 메서드나 프로퍼티가 있다면 instance에서도 마치 자신의 것처럼 해당 메서드나 프로퍼티에 접근할 수 있게 됩니다. (거의 생성자 함수를 상속 받는 아니죠, 연결된! 느낌이네요.)

예를 들어볼까요?

const a = { 
  attr1: 'hi'
};

const b = {
  attr: 'hello'
};

a.__proto__ = b;

console.log(a.attr2) // "hello"

• 이렇게 연결되는 느낌이라고 생각하시면 편할 것 같아요.

Mixin

Mixin은 다른 언어와 달리 자바스크립트에 없는 클래스 복사 기능을 흉내 낸 것이라고 생각하시면 됩니다.

• Mixin은 특정 행동을 실행해주는 메서드를 제공하는데 단독으로 쓰이지 않고, 다른 객체에 행동을 더해주는 용도로 사용됩니다.

const clickableMethods = {
  hover() {
    console.log('hovering')
  },
  press() {
    console.log('button pressed')
  },
  click() {
    console.log('button clicked')
  },
}

----------------------------------------

function Button(size, color) {
  this.size = size
  this.color = color
}

----------------------------------------

Object.assign(Button.prototype, clickableMethods) // Button 객체에 clickableMethods라는 행동을 더해주는 용도로 사용되고 있어요.

new Button(20, 'primary').hover() // hovering