[자바스크립트] 프로토타입

JavaScript의 프로토타입은 객체 지향 프로그래밍의 중요한 개념 중 하나다. 이 포스트에서는 프로토타입의 개념과 생성 방법, 프로토타입 체인에 대해 살펴본다.

생성자 개념

생성자(constructor function)

• 객체 생성하는 함수
• 함수명 첫글자 대문자
• new 키워드 사용하여 호출
• this 키워드 이용

JavaScript에서 생성자는 객체를 생성하고 초기화하는 특별한 메서드다. new 키워드와 함께 호출되며, 이를 통해 새로운 객체를 생성할 수 있다.

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

var john = new Person('John');
console.log(john.name); // 'John'

ES6 클래스가 도입하기 전에 클래스 처럼 사용할수 있게 하는것이 생성자 함수이다. 클래스는 ES6부터 도입된 문법으로, 객체 지향 프로그래밍을 더 쉽고 명확하게 표현할 수 있게 해주고 생성자 함수보다 문법이 더 간결하고 직관적이다. 둘 다 사용할 수 있지만, 최신 프로젝트에서는 클래스를 사용하는 게 일반적이고 권장되는 방식이다.

프로토타입이란

프로토타입(prototype)

• 객체의 원래 상태
• 같은 생성자로부터 생성된 객체는 프로토타입을 공유
  ⇒메모리 절약

프로토타입은 JavaScript에서 객체 간 상속을 가능하게 하는 메커니즘이다. 모든 함수는 prototype 속성을 가지며, 이 속성은 해당 함수를 생성자로 사용할 때 생성되는 객체의 부모 객체가 된다.

function Dog(breed) {
  this.breed = breed;
}

Dog.prototype.bark = function() {
  console.log('Woof!');
};

var myDog = new Dog('Beagle');
myDog.bark(); // 'Woof!'

프로토타입 생성

생성자 함수의 prototype 속성을 사용해 프로토타입을 생성하고, 메서드를 추가할 수 있다. 이 메서드들은 생성자를 통해 생성된 모든 객체에서 사용 가능하다.

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

Car.prototype.displayInfo = function() {
  console.log(this.make + ' ' + this.model);
};

var myCar = new Car('Toyota', 'Camry');
myCar.displayInfo(); // 'Toyota Camry'

물론이지! 프로토타입 체인 부분을 좀 더 상세하게 작성해볼게.

프로토타입 체인

프로토타입 체인은 JavaScript의 객체 간 상속 메커니즘의 핵심이다. 객체의 특정 프로퍼티나 메서드에 접근하려 할 때, 해당 객체에 해당 프로퍼티나 메서드가 없으면 JavaScript 엔진은 객체의 프로토타입에서 해당 프로퍼티나 메서드를 찾는다. 이 과정은 프로토타입 체인의 끝에 도달할 때까지 계속된다.

예시

function Animal() {}

Animal.prototype.eat = function() {
  console.log('Eating...');
};

function Bird() {
  Animal.call(this);
}

Bird.prototype = Object.create(Animal.prototype);
Bird.prototype.constructor = Bird;

Bird.prototype.fly = function() {
  console.log('Flying...');
};

var myBird = new Bird();
myBird.eat(); // 'Eating...'
myBird.fly(); // 'Flying...'

위 코드에서 Bird 객체는 Animal의 프로토타입을 상속받으며, Bird의 인스턴스 myBird는 Animal의 eat 메서드에 접근할 수 있다.

동작 원리

1. myBird.eat()을 호출하면 JavaScript 엔진은 먼저 myBird 객체에서 eat 메서드를 찾는다.
2. myBird 객체에 eat 메서드가 없으므로, 엔진은 Bird.prototype에서 eat 메서드를 찾는다.
3. Bird.prototype에도 eat 메서드가 없으므로, 엔진은 Animal.prototype에서 eat 메서드를 찾는다.
4. Animal.prototype에 eat 메서드가 있으므로, 해당 메서드가 실행된다.

결론

프로토타입은 JavaScript의 핵심 중 하나로, 객체 간 상속과 메서드 공유를 가능하게 한다. 이를 이해하고 활용하면 코드의 재사용성과 유지 보수성을 높일 수 있다. 프로토타입 체인을 통해 상속 구조를 더욱 유연하게 만들 수 있으며, 객체 지향 프로그래밍을 효과적으로 수행할 수 있다.