프로토타입 과 클래스

자바스크립트에서 객체를 생성하는 방법 중 하나가 프로토타입(Prototype)을 이용하는 것이다. 프로토타입은 객체 생성 시 상속 관계를 설정하기 위한 부모 역할을 합니다. 이번 글에서는 프로토타입에 대해 좀 더 자세히 알아보겠다.

1. 프로토타입이란?

프로토타입은 객체를 생성하는 생성자 함수(Constructors)와 함께 사용된다. 생성자 함수로 객체를 만들 때, 해당 생성자 함수의 프로토타입 객체를 상속받는 객체가 만들어진다. 이 객체는 생성자 함수의 인스턴스(Instance)라고도 부른다.

프로토타입 객체는 자식 객체(Instance)에서 사용 가능한 메서드(Methods)와 프로퍼티(Properties)를 가지고 있다. 프로토타입 객체는 두 가지 방법으로 접근할 수 있다.

1-1. 생성자 함수의 프로토타입

생성자 함수에는 .prototype이라는 프로퍼티가 있다. 이 프로퍼티에 접근하면, 해당 생성자 함수의 프로토타입 객체를 가져올 수 있다.

.js

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

const person1 = new Person("John");

console.log(Person.prototype); // {constructor: ƒ}
console.log(person1.__proto__); // {constructor: ƒ}

1-2. 인스턴스 객체의 __proto__

인스턴스 객체에는 __proto__라는 프로퍼티가 있다. 이 프로퍼티에 접근하면, 해당 인스턴스 객체의 프로토타입 객체를 가져올 수 있다.

.js

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

const person1 = new Person("John");

console.log(person1.__proto__); // {constructor: ƒ}
console.log(person1.__proto__ === Person.prototype); // true

2. 프로토타입 체인(Prototype Chain)

프로토타입 객체는 자신의 부모 역할을 하는 프로토타입 객체를 가질 수 있다. 이렇게 연결된 프로토타입 객체의 체인을 프로토타입 체인(Prototype Chain)이라고 부른다.

예를 들어, 아래와 같은 코드가 있다고 가정해보자.

.js

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

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
}

function Student(name, grade) {
  Person.call(this, name);
  this.grade = grade;
}

Student.prototype = Object.create(Person.prototype);

Student.prototype.sayGrade = function() {
  console.log(`My grade is ${this.grade}`);
}

위 코드에서, Student 생성자 함수는 Person 생성자 함수를 상속한다. 이를 위해서, Student.prototype 객체는 Person.prototype 객체를 상속하도록 설정한다.

이 상속 관계로 인해, Student 인스턴스에서 Person 생성자 함수의 메서드(sayHello)를 사용할 수 있다.

.js

const student1 = new Student("John", 3);
student1.sayHello(); // Hello, my name is John

여기서 student1 객체에서 sayHello 메서드를 호출할 때, student1 객체의 프로토타입 체인을 따라서 Person.prototype 객체를 찾는다. 그리고 sayHello 메서드를 호출한다.

3. 프로토타입 객체의 역할

프로토타입 객체는 상속을 구현하기 위한 객체이다. 이를 통해 코드를 더 간결하게 작성할 수 있다. 예를 들어, 같은 메서드를 가진 객체를 여러 개 만들어야 할 때, 각 객체마다 메서드를 정의하는 대신에, 프로토타입 객체를 활용해서 메서드를 정의하면 된다.

또한, 프로토타입 객체를 통해 객체의 상속 관계를 파악할 수 있다. 객체의 프로토타입 체인을 이용해서, 객체가 어떤 클래스(생성자 함수)에서 상속받았는지 파악할 수 있다.

4. 마치며

프로토타입은 자바스크립트에서 객체를 생성하는 방법 중 하나이다. 생성자 함수와 함께 사용되며, 프로토타입 객체를 상속받는 인스턴스 객체를 만들 수 있다. 이를 통해 상속을 구현하고, 객체의 메서드와 프로퍼티를 공유할 수 있다. 프로토타입을 이해하는 것은 자바스크립트를 제대로 이해하기 위한 필수적인 내용 중 하나이다.