생성자와 프로토타입

Java, C++과 같은 클래스 기반 객체지향 프로그래밍 언어와 달리 (ECMAScript 6에서 클래스가 추가되었긴하지만) 자바스크립트는 프로토타입 기반 객체지향 프로그래밍 언어이다
그래서 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다.
그리고 이것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 한다.
이러한 부모 객체를 Prototype(프로토타입)객체, 줄여서 Prototype(프로토타입)이라 한다.

이러한 Prototype 객체는 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용한다

생성자(Constructor)

생성자는 객체를 생성하고 초기화하기 위해 사용되는 특별한 함수이다. 일반적으로 생성자 함수는 대문자로 시작하는 이름을 가지며, new 키워드를 사용하여 호출된다.
생성자 함수는 this 키워드를 통해 새로운 객체를 가리키고, 객체의 초기 상태를 설정할 수 있는데 만약 생성자 함수는 new를 사용하지 않고 호출하면 일반 함수로 동작하게 된다.

예를 들어, 다음은 Person이라는 생성자 함수를 정의하고, new를 사용하여 객체를 생성하는 예시이다.

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

var person1 = new Person('John', 25);
console.log(person1.name); // 'John' 출력
console.log(person1.age); // 25 출력

위 코드에서 Person 생성자 함수는 name과 age라는 매개변수를 받아 객체를 초기화하고 this.name과 this.age를 통해 객체의 속성을 설정한다.
그래서 new Person('John', 25)라는 방식으로 Person 생성자 함수를 호출하여 새로운 객체 person1을 생성하게 된다.

프로토타입(Prototype)

프로토타입은 자바스크립트 객체의 기본 템플릿이자 공유된 속성 및 메서드를 정의하는 객체이다.
모든 객체는 프로토타입을 가지며, 객체의 속성 및 메서드는 해당 객체의 프로토타입에서 상속된다.

이러한 프로토타입은 생성자 함수의 prototype 속성을 통해 정의되고 생성자 함수를 통해 생성된 객체들은 해당 생성자 함수의 프로토타입을 공유하게 된다.
이를 통해 객체들은 동일한 속성과 메서드를 공유하며, 메모리를 효율적으로 사용할 수 있다.

위의 Person 생성자 함수의 프로토타입에 sayHello라는 메서드를 추가로 작성한 예시를 살펴보자.

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

var person1 = new Person('John', 25);
person1.sayHello(); // 'Hello, my name is John' 출력

Person.prototype.sayHello는 Person 생성자 함수의 프로토타입에 sayHello 메서드를 추가한다. 그 결과 이제 person1 객체는 sayHello 메서드를 상속받아 사용할 수 있게 된 것이다.

자바스크립트는 특정 객체의 프로퍼티나 메소드에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티 또는 메소드가 없다면 [[Prototype]]이 가리키는 링크를 따라 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례대로 검색한다.
이것을 프로토타입 체인(Prototype chain) 이라고 하는데
프로토타입 체인(Prototype chain)은 객체의 프로토타입이 다른 프로토타입을 참조하는 형태이다.
객체에서 속성 또는 메서드를 찾을 때, 먼저 객체 자체에서 해당 속성 또는 메서드를 찾고, 없으면 상위 프로토타입으로 이동하여 찾게 되는 방식으로 상위 프로토타입들을 차례로 검색하며 최종적으로 Object.prototype을 찾을 때까지 이어진다.

이렇게 생성자와 프로토타입을 함께 사용하면 코드의 재사용성과 효율성을 높일 수 있게 된다.