Object Prototypes

prototype

 

프로토타입은 흔히 '시제품'이나 '견본'의 의미를 뜻하며, 자바스크립트 내에서는 객체의 속성이 아닌 객체의 프로토타입 속성으로 정의된다.

 

즉, 객체의 원형으로 하나의 틀이라고 생각하면 된다.

 

자바스크립트는 흔히 프로토타입 기반의 언어라고 부르며, 모든 객체와 속성을 받는 템플릿으로 프로토타입 객체를 가진다고 할 수 있다.

 

상위 프로토타입 객체로 상속받기 위해 연결하는 것은 프로토타입 체인이라고 부른다,

 

프로토타입 속성에서 파생된 객체를 __proto__ 로 접근이 가능 하다.

 

---

prototype 예제

 

프로토타입을 이해하기 위해서 우선 프로토타입의 예제를 통해서 알아보자.

 

function player(name, team, position){
  this.name = name
  this.team = team
  this.position = position
}

player 라는 생성자 함수를 우선 정의 하였다.

 

var player1 = new player('D.H Lee', 'Lotte Giants', '1B') 

그 다음 player1이라는 인스턴스를 하나 생성하였다.

 

player1.name // 'D.H Lee'
player1.team // 'Lotte Giants'
player1.position // '1B'

콘솔에 찍어보면 player라는 프로토타입의 형태로 player1의 객체가 나오는 걸 알 수 있다.

 

player1.__proto__

다음과 같인 콘솔에 찍어보면 player1의 컨스트럭터가 player로 나타나며, __proto__ 에 정의된 player()의 프로토타입인 Object를 확인 할 수 있다.

 

---

prototype의 상속

 

프로토타입의 상속받은 속성과 메소드는 Object.prototype. 에 정의 된다.

 

player.prototype.homerun = function(num){
    console.log(`${this.name} hit the homerun season ${num}`)
}

player.prototype을 정의하게 되면

 

player1.homerun(4)
// D.H Lee hit the homerun season 4

player1이 player의 속성을 받을 수 있다.

 

player 프로토타입 객체가 아닌 새로운 프로토타입 객체를 만들면서 player의 속성을 그대로 가져오려면 어떻게 해야 하는가?

 

간단하게 player의 프로토타입 속성들을 복사 붙여넣기 하는 경우도 있지만 굉장히 번거러울 것이다.

 

그렇다면 간단하게 할 수 있는 경우가 무엇이 있을까?

 

바로 call 메소드를 사용하는 것이다.

 

function batter(name, team, position, backnumber){
  player.call(this, name, team, position);
  this.backnumber = backnumber;
}

batter1 = new batter('donghee', 'Lotte Giants', '3B', '25')

단, 이 경우에는 player.prototype. 에 접근할 수 없다는 점을 알 수 있다.

 

batter가 player.prototype. 에 접근하기 위해서는 Object.create() 이용하여 새 객체를 만들어야 한다.

 

 

참고: https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes