[JavaScript] 프로토타입

윤지·2024년 10월 31일

JavaScript

목록 보기

15/30

프로토타입 정의

프로토타입: 자바스크립트 함수의 특별 객체로, 생성자 함수로 만든 객체들이 공유하는 공통 공간. 함수와 1:1 매칭되며, 해당 생성자의 모든 인스턴스가 접근 가능

프로토타입의 역할: 프로토타입 객체에 공통적으로 사용될 속성이나 메서드를 정의하여, 메모리 낭비 감소
프로토타입 객체가 필요한 이유: 생성자 함수로 인스턴스를 만들 때마다 같은 메서드를 계속 생성하면 메모리 낭비 발생. 반복적으로 사용할 메서드는 프로토타입에 정의하여 모든 인스턴스가 공유하는 것이 효율적

프로토타입을 이용한 메모리 최적화

메모리를 비효율적으로 사용하는 예

: 각 인스턴스가 개별적으로 getInfo 메서드를 가져옴

function Animal(name, color) {
  this.name = name;
  this.color = color;
  this.getInfo = function() {
    return `이 동물의 이름은 ${this.name}이고 색깔은 ${this.color}입니다.`;
  }
}

const cat = new Animal("나비", "하얀색");
const dog = new Animal("멍멍이", "갈색");

console.log(cat.getInfo()); // 출력: 이 동물의 이름은 나비이고 색깔은 하얀색입니다.
console.log(dog.getInfo()); // 출력: 이 동물의 이름은 멍멍이이고 색깔은 갈색입니다.

위 예시에서 cat과 dog 인스턴스가 각각 자신의 getInfo 메서드를 가져 메모리 낭비 발생

프로토타입으로 메모리 최적화하는 예

프로토타입에 getInfo 메서드를 추가하여 모든 인스턴스가 이를 공유하도록 개선

function Animal(name, color) {
  this.name = name;
  this.color = color;
}

// Animal의 프로토타입에 추가
Animal.prototype.getInfo = function() {
  return `이 동물의 이름은 ${this.name}이고 색깔은 ${this.color}입니다.`;
}

const cat = new Animal("나비", "하얀색");
const dog = new Animal("멍멍이", "갈색");

console.log(cat.getInfo()); // 출력: 이 동물의 이름은 나비이고 색깔은 하얀색입니다.
console.log(dog.getInfo()); // 출력: 이 동물의 이름은 멍멍이이고 색깔은 갈색입니다.

getInfo 메서드를 프로토타입에 한 번만 정의하여 cat과 dog 인스턴스가 이를 공유. 이로 인해 메모리 사용 최적화 및 코드 효율성 향상

참고: 화살표 함수는 this가 동적으로 바인딩되지 않아 프로토타입 메서드로 적합하지 않음

프로토타입 체인과 체이닝

프로토타입 체인: 자바스크립트의 객체 간 상속을 구현하는 메커니즘. 객체는 자신의 프로토타입을 통해 상위 객체의 속성과 메서드에 접근 가능하며, 이를 통해 상속 체계 형성

프로토타입 체이닝: 객체의 프로퍼티나 메서드에 접근 시, 해당 객체에 원하는 프로퍼티가 없다면 객체의 프로토타입을 따라 상위 프로토타입 객체들을 차례로 검색해 나가는 과정

proto 속성

모든 자바스크립트 객체는 __proto__ 속성을 가짐. 이 속성으로 객체의 프로토타입을 참조하고, 프로토타입 체인을 통해 상위 객체의 속성과 메서드를 상속받음.

const cat = new Animal("나비", "하얀색");
console.log(cat.__proto__ === Animal.prototype); // 출력: true

cat.__proto__는 Animal.prototype을 참조하며, 이로 인해 cat은 Animal의 프로토타입에 정의된 getInfo 메서드 사용 가능

예시: 프로토타입 체인의 동작

function Car(name, color) {
  this.name = name;
  this.color = color;
}

Car.prototype.getInfo = function() {
  return `이 차의 이름은 ${this.name}이고 색깔은 ${this.color}입니다.`;
};

const car1 = new Car("택시", "빨강");

console.log(car1.getInfo()); // 출력: 이 차의 이름은 택시이고 색깔은 빨강입니다.
console.log(car1.__proto__.getInfo()); // 출력: undefined, undefined

car1.getInfo()와 car1.__proto__.getInfo()의 차이점

인스턴스 호출 (car1.getInfo()):
- this가 car1을 가리킴
- this.name과 this.color 정상 출력
프로토타입 직접 호출 (car1.__proto__.getInfo()):
- this가 Car.prototype을 가리킴
- name과 color 속성 없어 undefined 출력

이는 프로토타입 체인과 this 바인딩의 중요한 특성을 보여줌

프로토타입 체인의 끝: Object.prototype

모든 객체는 최상위 프로토타입인 Object.prototype 까지 프로토타입 체인을 통해 연결됨Object.prototype은 모든 객체가 공통으로 사용하는 메서드들이 정의된 곳. 프로토타입 체인을 따라 상위 객체가 계속 연결되다가, Object.prototype에서 끝이 나며, 이 다음에는 null이 존재

console.log(Object.prototype.__proto__); // 출력: null

💡 프로토타입 이해를 통해 얻은 중요 인사이트

hasOwnProperty 메소드 사용은 객체의 인스턴스 특성에 기인. 인스턴스는 프로토타입 체인을 통해 상위 객체의 속성과 메소드에 접근 가능

이는 단순 객체 특성이 아닌, 인스턴스만의 고유한 성질

생성자 함수로 만든 인스턴스는 부모 프로토타입을 상속받음. 이 프로토타입 역시 다른 객체의 인스턴스
개발자 도구에서 프로토타입의 proto 속성을 통해 확인 가능

인스턴스

인스턴스: 생성자 함수와 new 키워드로 만든 객체. 생성자 함수 내 this로 정의된 속성 포함. 프로토타입 상속받아 그 속성과 메서드 사용 가능함

인스턴스의 주요 특징

멤버 속성: 생성자 함수 내 this로 정의된 인스턴스 고유 속성
- this.name = name;으로 설정된 속성은 각 인스턴스의 멤버 속성
- 각 인스턴스는 독립적인 멤버 속성과 고유 값 보유
__proto__ 속성으로 부모 프로토타입 객체 접근

주의: 생성자 함수 내 let/const 변수는 지역 변수로, 인스턴스에 포함되지 않음

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

const car1 = new Car("택시");
console.log(car1.name); // 출력: 택시
console.log(car1.__proto__ === Car.prototype); // 출력: true