[JavaScript]프로토타입 확장(prototype extend)

프로토타입 확장

지금까지 프로토타입을 주제로 작성된 포스팅 내용을 정리하자면, 모든 객체(숫자, 문자열, 객체, 배열, 함수 등)는 내부 프로퍼티인 [[Prototype]]를 가지고 있습니다.

프로토타입 관련 포스팅(클릭하면 해당 포스팅으로 이동합니다.)
☞ [JavaScript]프로토타입(Prototype)이란?
☞ [JavaScript]프로토타입 체인(Prototype Chain)
☞ [JavaScript]함수의 프로토타입(prototype in function)

[[Prototype]]는 현재 객체의 상위 객체를 참조하며, 이 상위 객체를 프로토타입이라고 말합니다. 그리고 프로토타입 체인으로 상위 객체를 계속해서 참조했을 때, 프로토타입 체인의 종점은 Object.prototype 객체입니다. 즉, JavaScript의 모든 객체는 Object.prototype 객체에 존재하는 프로퍼티와 메서드를 접근할 수 있습니다.

JavaScript는 사용자 정의 객체가 아닌 Object.prototype 객체와 같은 표준 프로토타입 객체에도 개발자가 메서드를 추가할 수 있습니다. 따라서, 모든 객체는 Object.prototype 객체에 개발자가 추가한 프로퍼티를 접근할 수 있습니다.

다음 예제는 Object.prototype 객체에 개발자가 추가한 함수를 호출합니다.

Object.prototype.hello = function() {
  console.log('hello~');
}

var arr = [];
var obj = {};
var num = new Number(10);

arr.hello(); // hello~
obj.hello(); // hello~
num.hello(); // hello~

Object.prototype 객체의 프로퍼티를 확인해보면 개발자가 추가한 hello 함수를 확인할 수 있습니다.

---

프로토타입 확장의 장점

JavaScript에서 함수를 클래스처럼 구현할 수 있습니다. 다음 예제는 함수를 클래스처럼 구현하고 new 연산자를 사용하여 객체를 생성합니다.

function UserInfo(name, age) {
  this._name = name;
  this._age = age;

  this.getName = function() {
    return this._name;
  }

  this.setName = function(value) {
    this._name = value;
  }

  this.getAge = function() {
    return this._age;
  }

  this.setAge = function(value) {
    this._age = value;
  }
}

var user1 = new UserInfo('Bob', 20);
var user2 = new UserInfo('Tom', 24);
var user3 = new UserInfo('Nick', 63);

위 예제는 문제없이 정상적으로 동작 하지만, 한 가지 문제가 있습니다. 메모리를 불필요하게 사용한다는 점이죠.

위 예제를 실행하면 다음 그림처럼 세 개의 객체가 생성되고 객체마다 프로퍼티와 함수가 존재합니다.

함수를 객체에 생성하지 않고 공통적으로 사용할 수 있는 영역에 할당하기 위해 프로토타입을 활용할 수 있습니다.

function UserInfo(name, age) {
  this._name = name;
  this._age = age;
}

UserInfo.prototype.getName = function() {
  return this._name;
}

UserInfo.prototype.setName = function(value) {
  this._name = value;
}

UserInfo.prototype.getAge = function() {
  return this._age;
}

UserInfo.prototype.setAge = function(value) {
  this._age = value;
}

var user1 = new UserInfo('Bob', 20);
var user2 = new UserInfo('Tom', 24);
var user3 = new UserInfo('Nick', 63);

UserInfo 함수 객체의 prototype 프로퍼티에 함수를 정의함으로써 객체에는 함수가 생성되지 않고 프로토타입 체인으로 함수를 접근할 수 있습니다.

따라서, 메모리를 효율적으로 사용할 수 있습니다.

---

정리

• 프로토타입(=상위 객체)의 prototype 객체에 프로퍼티를 추가하는 것을 프로토타입 확장이라고 말합니다.
• 프로토타입 확장의 장점은 메모리를 효율적으로 사용할 수 있다는 점입니다.