Javascript & Typescript

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

0

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

자바스크립트는 객체 지향 프로그래밍 언어로, 프로토타입이라는 중요한 개념을 가지고 있습니다. 프로토타입을 이해하는 것은 자바스크립트에서 객체 지향 프로그래밍을 효과적으로 사용하는 데 필수적입니다. 이 글에서는 자바스크립트 프로토타입의 기본 개념과 프로토타입 체인에 대해 자세히 설명하고, 실질적인 응용을 할 수 있도록 예제를 통한 가이드를 제시해드리겠습니다.

1. 프로토타입의 기본 개념

자바스크립트의 모든 객체는 다른 객체로부터 속성과 메서드를 상속받기 위해 프로토타입이라는 내부 링크를 가지고 있습니다. 예를 들어, 생성자 함수를 통해 객체를 생성하면, 해당 객체는 생성자 함수의 프로토타입 객체를 참조하게 됩니다. 이를 통해 객체는 프로토타입에 정의된 메서드와 속성에 접근할 수 있습니다.

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

Person.prototype.greet = function() {
  console.log('Hello, ' + this.name);
};

var person1 = new Person('Alice');
person1.greet(); // 출력: Hello, Alice

위 코드에서 `Person` 생성자 함수를 사용해 `person1` 객체를 생성했습니다. `Person.prototype`에 정의된 `greet` 메서드는 `person1` 객체에서도 사용할 수 있습니다. 이는 `person1` 객체가 `Person.prototype`을 프로토타입으로 참조하기 때문입니다.

2. 프로토타입 체인

프로토타입 체인은 객체가 다른 객체로부터 속성과 메서드를 상속받는 구조를 말합니다. 자바스크립트에서 객체는 특정 프로퍼티나 메서드를 찾을 때 다음과 같은 순서로 탐색합니다.

  • 객체 자신이 해당 프로퍼티나 메서드를 가지고 있는지 확인합니다.
  • 없다면 객체의 프로토타입을 확인합니다.
  • 프로토타입에서도 없다면 프로토타입의 프로토타입을 확인합니다.
  • 이 과정을 최상위 프로토타입인 `Object.prototype`에 도달할 때까지 반복합니다.
  • `Object.prototype`까지 찾아봐도 없다면 `undefined`를 반환합니다.

이 체인 구조 덕분에 객체는 다른 객체로부터 속성과 메서드를 효율적으로 상속받을 수 있습니다.

프로토타입 체인의 예시:
function Animal() {}
Animal.prototype.sound = function() {
  console.log('Some sound');
};

function Dog() {}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.sound = function() {
  console.log('Bark');
};

var myDog = new Dog();
myDog.sound(); // 출력: Bark

delete Dog.prototype.sound;
myDog.sound(); // 출력: Some sound

이 예시에서 `Dog` 객체는 `Animal` 객체를 상속받습니다. `Dog`의 프로토타입에 있는 `sound` 메서드를 삭제하면, 자바스크립트는 프로토타입 체인을 따라 `Animal`의 `sound` 메서드를 호출합니다.

3. 프로토타입의 실질적 활용

프로토타입을 사용하면 코드 재사용성과 메모리 효율성을 높일 수 있습니다. 모든 객체가 동일한 메서드를 개별적으로 가지는 대신, 프로토타입을 통해 메서드를 공유함으로써 메모리를 절약할 수 있습니다.

function Car(model) {
  this.model = model;
}

Car.prototype.drive = function() {
  console.log(this.model + ' is driving');
};

var car1 = new Car('Toyota');
var car2 = new Car('Honda');

car1.drive(); // 출력: Toyota is driving
car2.drive(); // 출력: Honda is driving

위 코드에서 `drive` 메서드는 `Car.prototype`에 정의되어 있습니다. 따라서 `car1`과 `car2`는 각각의 인스턴스에서 `drive` 메서드를 공유하게 됩니다. 이는 메모리 사용을 효율적으로 만들고 코드의 일관성을 유지하는 데 도움을 줍니다.

결론

자바스크립트에서 프로토타입은 객체 지향 프로그래밍을 구현하는 핵심 개념으로, 객체 간에 속성과 메서드를 공유할 수 있게 합니다. 프로토타입 체인을 통해 객체는 다른 객체로부터 프로퍼티와 메서드를 상속받아 사용할 수 있으며, 이는 코드 재사용성을 높이고 메모리 효율성을 개선하는 데 큰 도움을 줍니다. 자바스크립트의 객체 지향 프로그래밍을 효과적으로 활용하려면 프로토타입과 프로토타입 체인을 잘 이해하는 것이 중요합니다.

Leave a Reply