개발 지식 한스푼

JavaScript _ 프로토타입 (Prototype)

Monstera Olive 2025. 1. 27. 22:33
반응형

 

 

JavaScript는 프로토타입 기반(Prototype-based) 언어입니다. 객체 지향 언어이지만, 클래스 기반 언어인 Java, C++ 등과 다르게 프로토타입 체인(Prototype chain)을 통해 상속을 구현합니다. 모든 객체는 자신의 부모 역할을 하는 프로토타입 객체(Prototype object)를 참조하며, 이 프로토타입 객체를 통해 다른 객체로부터 속성과 메서드를 상속받습니다.

 

 

프로토타입의 기본 개념

JavaScript의 모든 객체는 __proto__라는 숨겨진 링크를 가지고 있으며, 이를 통해 다른 객체의 프로토타입을 참조합니다.

객체의 프로토타입은 prototype이라는 특수한 속성을 통해 상속 메서드를 제공합니다.

 

 

객체 생성과 프로토타입 연결

function Player(name, score) {
    this.name = name;
    this.score = score;
}

Player.prototype.getScore = function() {
    return "${this.name} has ${this.score} points";
};

const player1 = new Player("Monstera", 1000);
console.log(player1.getScore());
// Monstera has 1000 points

 

Player 생성자 함수에 getScore 메서드를 prototype으로 추가하면, 이를 통해 생성된 모든 객체가 해당 메서드를 공유합니다. player1 객체는 getScore 메서드를 직접 가지고 있지 않지만, 프로토타입 체인을 통해 메서드를 호출 할 수 있습니다.

 

 

프로토타입 체인(Prototype chain)

프로토타입 체인은 객체가 특정 속성이나 메서드를 호출할 때 해당 객체에 존재하지 않으면 부모 프로토타입 객체를 거슬러 올라가면서 탐색하는 구조입니다.

console.log(player1.toString());
// [object Object]

 

toString() 메서드는 player1 객체에 없지만, 프로토타입 체인을통해 최상위 객체 Object.prototype에서 해당 메서드를 찾아 호출합니다.

 

 

__proto__와 prototype의 차이

  • __proto__ : 모든 객체가 가지고 있는 숨겨진 프로퍼티로, 해당 객체의 프로토타입을 가리킵니다.
  • prototype : 함수가 가지는 속성으로, 해당 함수로 생성된 객체가 상속받을 프로토타입을 정의합니다.
console.log(player1.__proto__ === Player.prototype);   // true
console.log(Player.prototype.constructor === Player);   // true

 

 

프로토타입 확장

JavaScript의 기본 객체(ex.Array, Object, String)에 프로토타입 메서드를 추가할 수도 있습니다.

Array.prototype.sum = function() {
    return this.reduce((acc, val) => acc + val, 0);
};

const.numbers = [1, 2, 3, 4, 5];
console.log(numbers.sum());
// return 15

Array.prototype에 sum 메서드를 추가하면 모든 배열 객체에서 sum() 메서드를 사용할 수 있습니다.

※ 기본 객체의 프로토타입을 수정하는 것은 유지보수에 문제가 될 수 있으므로 주의해야 합니다.

 

 


 

 

JavaScript의 prototype은 객체의 상속과 메서드 공유를 구현하는 강력한 메커니즘입니다. 이를 통해 메모리 효율을 높이고, 객체 간의 공통된 기능을 관리할 수 있습니다. 그러나 프로토타입을 잘못 사용하면 유지보수성이 떨어질 수 있으므로, 명확한 설계와 사용법을 이해하고 적용해야 합니다. 특히 ES6의 class 문법이 도입된 후, prototype을 보다 직관적으로 다룰 수 있게 되었으므로, 이를 병행하여 학습하는 것도 추천합니다.

반응형

'개발 지식 한스푼' 카테고리의 다른 글

JavaScript _ 다차원 배열  (0) 2025.01.28
ReactJS _ React Hook 이란?  (0) 2025.01.25
ReactJS _ export default  (1) 2025.01.22
ReactJS _ 폰트 추가 및 설정  (0) 2025.01.20
ReactJS _ JSX란?  (0) 2025.01.19