프로토타입(prototype)

자바스크립트는 흔히 프로토타입 기반 언어라고 불린다. 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체를 가진다는 의미이다.

 

자세한 내용은 아래 링크 참조

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

Object prototypes - Web 개발 학습하기 | MDN

 

이전에 생성자 코드에서 수정할 수 있는 부분이 하나 있다.

function Player(username, mora, level, pet) {
    this.username = username,
    this.mora = mora,
    this.level = level,
    this.pet = pet,
    this.showUserInfo = function() {
        console.log(this.username + ': ' + this.level + '(level) ' + this.mora + '(mora) ' + this.pet + '(pet)')
    }
}

위 코드에서 showUserInfo 메소드는 생성자를 통해 객체를 만들때 마다 새롭게 생성되어 메모리 낭비를 하고 있다.

이런 경우에 프로토타입을 사용해서 Player 생성자를 통해 만든 객체들이 모두 사용할 수 있는 메소드를 만들 수 있다.

결과적으로 showUserInfo 메소드를 Player 생성자에서 빼낼 수 있어 불필요한 메모리 사용을 없앨 수 있다.

 

function Player(username, mora, level, pet) {
    this.username = username,
    this.mora = mora,
    this.level = level,
    this.pet = pet
}

Player.prototype.showUserInfo = function() {
    console.log(this.username + ': ' + this.level + '(level) ' + this.mora + '(mora) ' + this.pet + '(pet)')
}

var new_player = new Player('lumine', 1000000, 57, 'paimon')
new_player.showUserInfo()

 

실행결과

프로토타입을 사용할 때는 (생성자.prototype.함수or속성) 형식으로 사용하면 된다.

프로토타입을 사용해서 Player 생성자를 통해 만들어지는 객체들은 모두 showUserInfo 메소드를 갖게 되었다.

 

프로토타입은 같은 이름의 속성이나 메소드가 없을 때 적용된다.

만약 같은 이름의 속성이나 메소드가 이미 존재한다면 그 속성이나 메소드를 사용하고 프로토타입으로 정의된 속성, 메소드는 사용되지 않는다.

function Player(username, mora, level, pet) {
    this.username = username,
    this.mora = mora,
    this.level = level,
    this.pet = pet
}

Player.prototype.showUserInfo = function() {
    console.log(this.username + ': ' + this.level + '(level) ' + this.mora + '(mora) ' + this.pet + '(pet)')
}

var new_player = new Player('lumine', 1000000, 57, 'paimon')
var second_player = new Player('aether', 100000, 57, 'paimon')

second_player.showUserInfo = function() {
    console.log('aether version')
}

new_player.showUserInfo()
second_player.showUserInfo()

 

실행결과

위 코드에서 second_player 객체는 showUserInfo 메소드가 정의되어 프로토타입으로 정의된 showUserInfo가 무시되었다.

 

일반적으로 객체의 속성들은 생성자 함수에 넣고 메소드들은 프로토타입에 추가한다.

---

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/cs124

자바스크립트의 시작