자바스크립트 프로토타입 이해하기

프로토타입이란?

자바스크립트에서 프로토타입은 객체의 원형이며, 다른 객체가 상속받을 수 있도록 도와줍니다. 모든 객체는 자신의 프로토타입을 가리키는 [[Prototype]]이라는 숨겨진 프로퍼티를 가집니다.

프로토타입 체인

객체의 프로퍼티에 값을 할당하려고 할 때, 자바스크립트는 먼저 해당 객체에서 해당 프로퍼티를 찾습니다. 그리고 만약 해당 객체에서 해당 프로퍼티를 찾을 수 없다면, 자바스크립트는 그 객체의 프로토타입을 찾아 해당 프로퍼티가 있는지 확인합니다. 이런 방식으로 프로토타입 연쇄(prototype chain)을 통해 계속해서 프로퍼티를 찾아갑니다.

const person = {
  name: "John",
  age: 30,
  greeting: function() {
    console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
  }
};

const student = Object.create(person);
student.name = "Mary";
student.grade = "A";

student.greeting(); // "Hello, my name is Mary and I am 30 years old."

위 예시에서 student 객체는 person 객체를 상속하고 있습니다. 객체가 다른 객체를 상속할 때는 Object.create()를 사용합니다. student 객체에서 greeting() 메소드를 호출할 때, 자바스크립트는 student 객체에서 해당 메소드를 찾지 못하고 그 객체의 프로토타입인 person 객체에서 해당 메소드가 있는지 찾아냅니다.

프로토타입 상속

자바스크립트에서 상속을 구현할 때, 프로토타입 상속(prototype inheritance)이란 방법을 사용합니다. 이미 존재하는 객체에서 객체 생성자(constructors)를 사용하여 새로운 객체를 만드는 것입니다. 이 새로운 객체는 부모 객체의 프로토타입을 상속받습니다.

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

Animal.prototype.speak = function() {
  console.log(this.name + " makes a noise.");
}

function Dog(name) {
  Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);

const puppy = new Dog("Max");
puppy.speak(); // "Max makes a noise."

위 예시에서, Dog 객체는 Animal 객체로부터 상속받았습니다. 이때, Animal.call()을 사용하여 부모 객체에서 사용되는 메소드를 자식 객체에서도 사용할 수 있도록 합니다. 그리고 Dog.prototype = Object.create(Animal.prototype)을 사용하여 Dog 객체의 프로토타입을 Animal 객체의 프로토타입으로 설정합니다.

결론

자바스크립트의 프로토타입은 객체의 상속을 구현하는 데 중요한 개념입니다. 프로퍼티를 검색할 때 프로토타입 체인을 사용하고, 객체 생성자를 사용하여 상속 구현이 가능합니다. 이해를 돕기 위한 간단한 예시를 작성하여 프로토타입의 개념과 어떻게 사용되는지 설명하였습니다.

키워드: 자바스크립트 프로토타입, 상속, 프로토타입 체인