JavaScript 프로토타입 개념과 실전 예제 정리

JavaScript의 프로토타입 개념 이해하기

JavaScript는 프로토타입 기반의 객체 지향 프로그래밍 언어입니다. 이는 JavaScript에서 객체가 서로 상속을 통해 프로퍼티와 메소드를 공유하는 방식과 관련이 깊습니다. 프로토타입은 모든 객체가 지니고 있는 내부 링크로, 객체가 속성과 메소드를 상속받을 수 있도록 해주는 중요한 역할을 합니다.

프로토타입 및 생성자 함수

JavaScript에서는 객체를 생성할 때, 생성자 함수를 사용하여 인스턴스를 만들 수 있습니다. 이때 생성자 함수에 정의된 프로퍼티와 메소드가 프로토타입 객체에 저장되어, 인스턴스는 이를 통해 접근할 수 있습니다.

예를 들어, 다음은 Animal이라는 생성자 함수를 통해 동물을 생성하는 코드입니다:

function Animal(type) {
  this.type = type;
}
Animal.prototype.makeSound = function() {
  console.log(${this.type} makes a sound);
};
const dog = new Animal("Dog");
dog.makeSound(); // Dog makes a sound

위의 코드에서 Animal 함수는 새로운 객체를 생성하는 역할을 하며, makeSound 메소드는 Animal.prototype에 정의되어 있습니다. 이렇게 함으로써 dog 객체는 makeSound 메소드를 사용할 수 있게 됩니다.

프로토타입 체인과 상속

객체가 프로퍼티나 메소드에 접근할 때, 해당 객체에 정의되지 않은 경우에는 프로토타입 체인에 따라 상위 객체를 탐색합니다. 이 방식은 JavaScript의 상속 메커니즘과 매우 유사합니다. 프로토타입 체인은 다음과 같이 작동합니다:

• 객체가 특정 속성을 시도할 때, 해당 속성이 객체 내에 존재하지 않으면, 프로토타입을 통해 상위 객체를 탐색합니다.
• 이 과정은 최상위 객체인 Object.prototype까지 이어지며, 여기에서도 찾지 못할 경우 undefined를 반환합니다.

아래는 간단한 프로토타입 체인의 예시입니다:

const student = {
  name: "John",
  score: 90
};
console.log(student.hasOwnProperty("name")); // true
console.log(student.__proto__ === Object.prototype); // true

여기서 student 객체는 Object.prototype에 있는 hasOwnProperty 메소드를 사용할 수 있습니다.

constructor 프로퍼티의 역할

모든 생성자 함수는 prototype 속성을 갖고 있으며, 이 속성은 생성된 인스턴스의 constructor 프로퍼티를 정의합니다. constructor 프로퍼티는 해당 객체를 생성한 함수 자체를 가리킵니다.

예를 들어, 다음과 같은 코드에서는 constructor 프로퍼티를 활용할 수 있습니다:

function Person(name) {
  this.name = name;
}
const person = new Person("Alice");
console.log(person.constructor === Person); // true

이처럼 constructor 프로퍼티를 통해 각 객체가 어떤 생성자 함수를 통해 만들어졌는지를 알 수 있습니다.

prototype과 __proto__의 차이점

JavaScript에서 prototype과 __proto__는 서로 다른 개념입니다. prototype은 생성자 함수에 정의된 프로퍼티이며, 새로운 객체가 생성될 때 이 prototype이 인스턴스의 __proto__로 연결됩니다. 반면, __proto__는 모든 객체에 내장된 속성으로, 해당 객체의 프로토타입을 참조합니다.

아래 코드를 확인해보겠습니다:

function Car(brand) {
  this.brand = brand;
}
Car.prototype.start = function() {
  console.log(${this.brand} is starting);
};
const myCar = new Car("Toyota");
myCar.start(); // Toyota is starting
console.log(myCar.__proto__ === Car.prototype); // true

프로토타입을 활용한 고급 예제

프로토타입을 활용하면 복잡한 객체 체계와 상속 구조를 손쉽게 구현할 수 있습니다. 예를 들어, 여러 종류의 동물 객체를 생성하고 이들을 상속받아 특정 동물의 특성을 추가할 수 있습니다.

function Dog(name) {
  Animal.call(this, "Dog");
  this.name = name;
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.bark = function() {
  console.log(${this.name} says woof!);
};
const myDog = new Dog("Buddy");
myDog.makeSound(); // Dog makes a sound
myDog.bark(); // Buddy says woof!

위의 코드에서 Dog는 Animal을 상속받아, bark 메소드를 추가하여 고유의 행동을 나타냅니다. 이러한 방식은 객체 지향 프로그래밍에서 상속을 구현할 수 있는 방법입니다.

결론

JavaScript의 프로토타입은 객체 간의 상속 관계를 형성하며, 프로토타입 체인을 통해 속성과 메소드를 공유하는 중요한 개념입니다. 생성자 함수와 prototype 속성을 이해하는 것은 JavaScript의 객체 지향 프로그래밍을 깊이 있게 배우는 데 필수적입니다. 프로토타입을 적절하게 활용하면 더욱 효율적이고 관리하기 쉬운 코드를 작성할 수 있습니다.

자주 찾으시는 질문 FAQ