Chapter 4 - Item 34. 메서드는 프로토타입에 저장하라

JavaScript에서 모든 함수 객체는 prototype 속성을 가진다.
생성자로 만든 인스턴스들은 공유된 프로토타입 객체를 통해 메서드를 사용한다.
메서드를 개별 인스턴스에 직접 붙이면, 매번 새로운 함수 객체가 만들어져 메모리를 낭비하고 성능에도 불리하다.

// 잘못된 예: 인스턴스에 메서드 저장
function Person(name) {
  this.name = name;
  this.sayHello = function() {
    console.log(`Hello, I'm ${this.name}`);
  };
}

const p1 = new Person("Alice");
const p2 = new Person("Bob");
console.log(p1.sayHello === p2.sayHello); // false (서로 다른 함수)

 

 

 

올바른 방법은 메서드를 프로토타입에 정의하는 것이다.

function Person(name) {
  this.name = name;
}
Person.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}`);
};

const p1 = new Person("Alice");
const p2 = new Person("Bob");
console.log(p1.sayHello === p2.sayHello); // true (같은 함수 공유)

이렇게 하면 모든 인스턴스가 같은 함수 객체를 참조하므로 메모리 절약과 성능 향상이 가능하다.

 

 

---

 

 

 

ES6이 도입되면서 class 문법을 사용하면 메서드는 자동으로 프로토타입에 저장된다.
따라서 생성자 내부에 메서드를 두는 실수를 줄일 수 있다.

class Person {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log(`Hello, I'm ${this.name}`);
  }
}

위 sayHello는 실제로 Person.prototype.sayHello에 저장된다.

 

단, 클래스에서도 화살표 함수로 메서드를 정의하면 인스턴스에 직접 붙게 된다.

class Person {
  constructor(name) {
    this.name = name;
    this.sayHi = () => console.log(`Hi, I'm ${this.name}`);
  }
}

이 경우, 인스턴스마다 함수 객체가 새로 생성되므로 공유가 안 된다.

특별한 이유(예: this 바인딩 유지)가 아니라면 피하는 것이 좋다.

 

 

 

 

• 인스턴스 고유 데이터(속성)는 생성자 내부에,
  모든 인스턴스가 공유하는 동작(메서드)은 프로토타입에.
• ES6 class 사용 시 기본적으로 안전하지만, 화살표 함수 메서드 남용 주의.
• 성능, 메모리 효율성, 유지보수를 위해서라도 메서드는 기본적으로 프로토타입에 두는 습관을 들이자.