Prototype - AI🤖

프로토타입(Prototype)은 JavaScript의 객체 지향 프로그래밍에서 중요한 개념으로, 객체들 간의 상속과 프로토타입 체이닝을 가능하게 합니다. 프로토타입은 모든 JavaScript 객체가 가지고 있는 속성으로, 해당 객체의 부모 역할을 하는 객체를 가리킵니다.

1. 프로토타입 체인 (Prototype Chain):
   • JavaScript의 객체들은 프로토타입과 연결된 링크 구조를 가집니다.
   • 객체의 속성 또는 메서드를 찾을 때 해당 객체의 프로토타입에도 없다면, 그 프로토타입의 프로토타입을 계속해서 탐색하는 과정을 말합니다. 이렇게 여러 단계의 프로토타입이 연결된 구조가 프로토타입 체인입니다.
2. 생성자 함수 (Constructor Function):
   • 객체를 생성하기 위해 사용되는 함수를 말합니다.
   • new 키워드를 사용하여 호출하면 해당 생성자 함수로부터 새로운 인스턴스가 생성됩니다.
3. 프로토타입 속성:
   • 모든 함수 객체는 prototype 속성을 가지며, 이 속성은 해당 함수로부터 생성된 인스턴스의 원형(프로토타입 객체)을 가리킵니다.
   • **prototype**에 추가된 메서드와 속성은 해당 생성자 함수로부터 생성된 모든 인스턴스에서 공유됩니다.
4. 옵셔널 체이닝 (Optional Chaining):
   • ES11(ES2020)에서 도입된 문법으로, 중첩된 객체의 속성에 안전하게 접근하기 위한 기능입니다.
   • ?. 연산자를 사용하여 객체의 중첩된 속성을 확인하고, 해당 속성이 존재하지 않을 때 에러를 방지하고 **undefined**를 반환합니다.

예시:

// 생성자 함수
function Person(name) {
  this.name = name;
}

// Person의 prototype에 메서드 추가
Person.**prototype**.sayHello = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

// 객체 생성
const **person1** = new Person('Alice');
const **person2** = new Person('Bob');

// 객체에서 메서드 호출
**person1.sayHello()**; // 출력: "Hello, my name is Alice."
**person2.sayHello();** // 출력: "Hello, my name is Bob."

이 예시에서 **Person.prototype.sayHello**는 Person 생성자 함수의 프로토타입에 메서드를 추가하고, 이 메서드는 Person 생성자로부터 생성된 모든 객체들이 공통적으로 사용할 수 있습니다. 이렇게 프로토타입을 사용하여 코드의 재사용성을 높이고 메모리 효율을 높일 수 있습니다.

프로토타입은 JavaScript의 객체 지향 프로그래밍에서 핵심적인 개념이므로, 잘 이해하고 활용하는 것이 중요합니다. 프로토타입과 프로토타입 체인을 이해하면 JavaScript 코드를 더욱 효율적으로 작성할 수 있습니다.

prototype을 사용하지 않은 경우

Person 객체 자체에 sayHello 메서드를 직접 추가하는 것입니다. 이렇게 정의된 메서드는 생성자 함수(Person)에만 직접 호출이 가능하고, 해당 생성자로 생성된 인스턴스에서는 직접 호출할 수 없습니다.

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

Person.sayHello = function() {
  console.log('Hello!');
};

**//직접 호출**
Person.sayHello(); // 출력: "Hello! (Person object)" (Person.sayHello() 호출)

Prototype을 사용 하면 Person의 모든 인스턴스(person1, person2)에서 사용이 가능하지만,

객체 자체에 메소드를 직접 추가한 이와 같은 방식은 직접 호출만 가능해 재사용이 불가능해진다.