프로토타입(prototype)

Javascript

2022.08.10.

프로토타입(prototype)

자바스크립트의 모든 객체(obj)는 자기 부모 역할을 하는 프로토타입이라는

객체를 가지고 있으며, 객체 지향의 상속과 같이 모든 객체는

그 객체의 부모 객체인 프로토타입으로부터 프로퍼티와 메서드를 상속받습니다.

모든 객체는 최소한 하나 이상의 다른 객체로부터 상속받으며,

이때 상속되는 정보를 제공하는 객체를 프로토타입이라고 합니다.

arr.push()를 예로 들어보면

배열 arr는 자식이고 그 안에 Array라는 부모객체가 있고 Array 안에

prototype 객체가 있고 그 안에 .push() 같은 메서드가 있는 것입니다.

일반적인 객체 생성

//생성자 함수
function Rectangle(width, height) {
  this.width = width
  this.height = height

  this.getArea = function () {
    return this.width * this.height
  }
}

//두 개의 정사각형 인스턴스 생성
const rec1 = new Rectangle(5, 5)
const rec2 = new Rectangle(6, 6)

console.log(rec1.getArea === rec2.getArea) // false

console.log(rec1.getArea()) //25
console.log(rec2.getArea()) //36

위 코드는 생성자 함수 Rectangle을 이용해 동일한 구조를 갖는 2개의 객체를 생성하는 코드입니다.

이러한 방식은 여러 객체를 생성하는데 유리하지만 문제가 있습니다.

Rectangle객체의 width, height속성은 일반적으로 인스턴스마다 서로 다릅니다.

그러나 getArea메서드는 모든 객체에서 동일한 내용을 수행합니다.

하지만 위의 코드에서는 getArea를 포함한 모든 속성이 독립적으로 유지됩니다.

쉽게말하면 Rectangle 생성자 함수 아래 rec1/rec2가 독립적으로 존재하는데

getArea()는 중복이라서 불필요한 메모리의 낭비가 됩니다.

이런 문제를 해결할 수 있는것이 프로토타입을 이용한 객체 생성입니다.

프로토타입을 이용한 객체 생성

//생성자 함수
function Rectangle(width, height) {
  this.width = width
  this.height = height
}

//공유해서 사용할 수 있도록 프로토타입에 추가
//프로토타입은 생성자 함수의 prototype에 바인딩되어있다.
Rectangle.prototype.getArea = function () {
  return this.width * this.height
  //this는 함수를 호출하는 시점에 결정된다.
  //이제 왜 this가 이러한 동작을 하는지 어느정도 납득이 가능할것이다.
}
//두 개의 정사각형 인스턴스 생성
const rec1 = new Rectangle(5, 5)
const rec2 = new Rectangle(6, 6)

//생성자 함수가 생성한 모든 인스턴스는 프로토타입을 부모 객체로 상속하며 생성된다.
console.log(rec1.getArea === rec2.getArea) // true

console.log(rec1.getArea()) //25
console.log(rec2.getArea()) //36