본문 바로가기
Frontend

자바스크립트의 프로토타입(Prototype)

by 신인프로그래머 2024. 3. 5.

 

 

자바스크립트의 프로토타입(Prototype)

 

자바스크립트의 프로토타입(Prototype)은 객체 지향 프로그래밍의 핵심 개념 중 하나다

프로토타입은 객체가 다른 객체의 속성과 메소드를 상속할 수 있게 해주는 메커니즘이다

이를 통해 자바스크립트는 프로토타입 기반 상속을 구현하며, 이는 클래스 기반 언어의 전통적인 상속과는 다른 방식이다

 

프로토타입의 작동 원리

  • 프로토타입 체인(Prototype Chain):
    • 자바스크립트에서 객체의 속성이나 메소드에 접근하려고 할 때, 해당 객체에 해당 속성이나 메소드가 없다면 자바스크립트는 객체의 프로토타입(즉, 상속받은 객체)에서 해당 속성이나 메소드를 찾는다
    • 이 과정은 프로토타입 체인을 따라 상속 계층을 거슬러 올라가며 반복된다
    • 최상위에 도달할 때까지 계속되며, 최상위에서도 찾지 못하면 undefined를 반환한다
  • 프로토타입 객체(Prototype Object):
    • 모든 자바스크립트 함수에는 prototype 속성이 있으며, 이 속성은 객체를 가리킨다
    • 이 객체는 그 함수를 사용하여 생성된 모든 객체의 프로토타입으로 사용된다
    • 즉, 함수를 생성자로 사용하여 객체를 생성할 때, 생성된 객체의 내부 [[Prototype]] 링크는 생성자 함수의 prototype 객체를 가리킨다

예시

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

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

const alice = new Person('Alice');
alice.sayHello(); // 출력: "Hello, my name is Alice"

 

위 예시에서 Person 함수의 prototype 속성에 sayHello 메소드를 추가했다

Person을 생성자로 사용하여 생성된 모든 객체(예: alice)는 Person.prototype을 통해 sayHello 메소드를 상속받는다

 

프로토타입의 중요성

  • 코드 재사용
    • 프로토타입을 통해 함수나 객체의 속성 및 메소드를 여러 객체에 쉽게 상속할 수 있다
    • 이는 코드의 중복을 줄이고 재사용성을 높여준다
  • 메모리 효율성
    • 프로토타입을 사용하면 모든 객체가 메소드와 속성을 공유할 수 있기 때문에, 각 객체마다 메소드를 복사할 필요가 없어 메모리 사용이 효율적이다
  • 동적 속성/메소드 추가
    • 프로토타입에 속성이나 메소드를 추가하면, 해당 프로토타입을 상속받는 모든 객체가 즉시 그 변경사항을 반영한다
    • 이는 런타임에 객체의 행동을 동적으로 확장할 수 있게 해준다

 

프로토타입은 자바스크립트의 객체 지향 프로그래밍을 이해하고 사용하는 데 있어 핵심적인 개념이다

이를 통해 개발자는 더욱 풍부하고 다양한 객체 지향적인 코드를 작성할 수 있게 된다

'Frontend' 카테고리의 다른 글

자바스크립트 불변성 유지하려면?  (0) 2024.03.05
자바스크립트 깊은 복사 & 얕은 복사  (1) 2024.03.05
자바스크립트 데이터 타입  (4) 2024.03.05
자바스크립트 형 변환  (0) 2024.03.05
실행 컨텍스트란  (1) 2024.03.04