프로토타입

프로토타입이란?

상속 메소드

• 모든 객체가 가지는 [[Prototype]]이라는 내부 속성이다.
• 프로토타입은 다른 객체를 참조한다.
• 함수도 객체이므로 함수의 프로토타입에 정의하면 프로토타입 체인을 통해 속성이나 메소드를 상속 받을 수 있게 된다.
• 프로토타입 기반 상속이 자바스크립트에서 객체지향 프로그래밍을 가능하게 하는 메커니즘이다.
• 프로토타입은 객체가 공통의 속성과 메소드를 상속 받기 위해 사용한다.

프로토타입과 생성자 함수

• 객체를 생성하기 위한 함수 (붕어빵 틀에 비유할 수 있다.)
• 생성자 함수에 프로토타입을 정의하면 이 생성자 함수로 생성되는 객체는 프로토타입 체인이 발생하여 상속된다.
• 기본적으로는 동일한 유형의 객체를 생성하기 좋은 방법이다.

프로토타입 체인

• 객체는 프로토타입 체인을 통해 다른 객체의 속성과 메소드를 상속 받을 수 있다.

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

//생성자 함수의 프로토타입에 메소드 정의
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

//생성자 함수로 인스턴스 생성
const john = new Person("John");
//인스턴스에서 메소드 실행 가능
john.sayHello(); // "Hello, my name is John" 출력

이 예제에서 john 객체는 Person의 인스턴스다. john.sayHello()를 호출할 때, JavaScript는 먼저 john 객체에서 sayHello 메소드를 찾는다. 찾지 못하면, Person.prototype에서 sayHello 메소드를 찾아 호출한다. 이 과정이 바로 프로토타입 체인을 통한 상속이다.

프로토타입을 활용한 예시 : Map 객체와 메소드

생성자 함수를 정의하고 이 생성자 함수의 prototype 속성을 사용하여 여러 메소드를 추가할 수 있다.

이렇게 추가된 메소드는 생성자 함수로 생성된 모든 객체에서 사용할 수 있다.

JavaScript의 내장 Map 객체는 여러 유용한 메소드를 제공하는데, 이 메소드들은 Map.prototype을 통해 접근하고 확장할 수 있는 좋은 예시이다.

Map() : 생성자 함수로서, JavaScript의 내장 객체 중 하나이다.

Map 객체는 키-값 쌍을 저장하는데 사용되며, 이를 조작하기 위한 다양한 메소드를 제공한다. 여기에는 set, get, has, delete, clear 등이 포함된다.

Map 메소드:

1. set(key, value): 키-값 쌍을 Map에 추가하거나 업데이트한다.
2. get(key): 주어진 키에 해당하는 값을 반환한다. 키가 Map에 없다면 undefined를 반환한다.
3. has(key): Map이 주어진 키를 가지고 있는지에 대한 불리언 값을 반환한다.
4. delete(key): 주어진 키와 관련된 요소를 Map에서 삭제하고, 성공적으로 삭제되면 true를, 그렇지 않으면 false를 반환한다.
5. clear(): Map의 모든 키-값 쌍을 삭제한다.
6. forEach(callbackFn): Map의 각 키-값 쌍에 대해 주어진 콜백 함수를 실행한다.

// Map 객체 생성
const map = new Map();

// set 메소드를 사용하여 키-값 쌍 추가
map.set('name', 'John Doe');
map.set('age', 30);

// get 메소드를 사용하여 값 검색
console.log(map.get('name')); // John Doe
console.log(map.get('age')); // 30

// has 메소드를 사용하여 키 존재 여부 확인
console.log(map.has('name')); // true
console.log(map.has('gender')); // false

// delete 메소드를 사용하여 키-값 쌍 삭제
map.delete('age');
console.log(map.has('age')); // false

// forEach 메소드를 사용하여 모든 키-값 쌍 출력
map.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});
// 출력:
// name: John Doe

// clear 메소드를 사용하여 모든 키-값 쌍 삭제
map.clear();
console.log(map.size); // 0

이와 같이, 내장 객체 Map은 프로토타입을 통해 여러 함수를 포함하고 있다. 따라서 생성자를 사용해 새로운 객체를 생성할 때, 이 내장 객체의 프로토타입에 연결된 함수들을 새 객체에서도 사용할 수 있게 된다.

프로토타입 사용 이유

• 코드 재사용성 : 공통적인 기능을 프로토타입에 정의하여 여러 객체가 재사용한다.
• 메모리 효율성 : 메소드를 공유하므로 복사할 필요 없다.

React에서는

함수형 컴포넌트를 사용하는 react에서는 생성자 함수를 직접 다룰 일이 거의 없다.

Hooks로 기능들을 해결했기 때문이다.

연관 키워드

객체지향 프로그래밍