[JavaScript] 프로토타입 (Prototype)

자바스크립트에서 만들어지는 객체는 프로토타입(Prototype)이라는 속성이 모두 내장되어 있습니다. 어떠한 프로토타입을 가지면, 그 프로토타입의 속성과 메서드를 상속받게 됩니다. 간단한 예시로 강아지라는 객체는 동물이라는 프로토타입을 가지고 있다고 가정한다면, 동물 객체가 가지는 속성과 메서드를 강아지 객체가 상속받아서 사용할 수 있게 됩니다.

 

프로토타입을 사용함으로써 같은 코드를 재사용할 수 있게 되어 효율성과 코드 가독성을 높일 수 있습니다. 또한, 여러 개의 객체를 생성할 때 같은 프로토타입에서 속성과 메서드를 불러오기 때문에 메모리도 아낄 수 있습니다. 

 

앞서 모든 객체가 프로토타입을 가진다고 언급했는데, 프로토타입도 객체이기 때문에 프로토타입 자체도 프로토타입을 가지게 됩니다. 이것을 프로토타입 체인(Prototype Chain)이라고 부릅니다. 

어떠한 객체에서 속성을 접근하고자 했을 때, 만약 객체 안에서 속성을 찾지 못한다면 프로토타입에서 그 속성을 탐색합니다. 이 과정은 프로토타입 체인의 끝에 도달할 때까지 계속되는데, 끝의 기준은 null을 자신의 프로토타입으로 가지고 있는 프로토타입을 만나는 것입니다. 

---

① 프로토타입 설정

객체가 가지게 될 프로토타입을 설정하는 방법은 크게 두 가지가 있습니다. 

첫 번째는 Object.create() 메서드를 사용하는 것이고, 두 번째는 생성자 함수를 사용하는 것입니다. 

먼저 다음과 같이 프로토타입으로 사용될 personPrototype 객체를 선언하겠습니다. 

const personPrototype = {
  sayHello() {
    console.log('Hello World!');
  },
  sayName() {
    console.log(`My name is {$this.name}`);
  },
};

 

먼저 Object.create() 메서드를 통해 James 객체를 생성하는 코드 예시입니다. 프로토타입의 메서드 sayHello()를 사용할 수 있는 것을 확인할 수 있습니다. 

const James = Object.create(personPrototype);
James.sayHello();
// Hello World!

 

다음은 생성자 함수를 통해 Lily 객체를 생성하는 코드 예시입니다. 5번째 줄을 보시면 Object.assign() 메서드를 통해 personPrototype에서 정의된 메서드들을 Person() 생성자 함수의 프로토타입 속성으로 지정합니다. 이를 통해 Person() 메서드는 name 속성을 지정함과 동시에, Person() 메서드로 만들어진 객체는 Person.prototype을 가지게 됨을 알 수 있습니다.

function Person(name) {
  this.name = name;
}

Object.assign(Person.prototype, personPrototype);

const Lily = new Person("Lily");
Lily.sayName();
// My name is Lily

 

* ES6에서 소개되는 클래스(Class)도 프로토타입을 기반으로 작동하는 것입니다. 

 

② 프로토타입 속성 활용

객체에 설정되어 있는 프로토타입을 속성으로 사용해서 속성이나 메서드를 추가할 수도 있습니다. 즉, 프로토타입을 확장할 수 있게 되는 것입니다.

 

다음은 Person 객체의 프로토타입에 age 속성과 sayAge() 메서드를 추가하는 코드 예시입니다.

Person.prototype.age = this.age;
Person.prototype.sayAge = function() {
  console.log(`My age is ${this.age}`);
}
Lily.age = 25;
console.log(Lily.age);

 

 

이 글에서는 자바스크립트의 프로토타입의 개념, 선언, 사용 방법에 대해서 살펴보았습니다. 감사합니다!