[심화] 05. this·프로토타입·클래스

JavaScript 심화

this·프로토타입·클래스: 객체지향을 ‘자바스크립트 방식’으로

this 바인딩을 제어하는 3종(call/apply/bind), 프로토타입 상속, class 문법을 연결해서 정리합니다.

형태 요약노트 대상 심화 포커스 OOP/this

그림 1. call/apply/bind 한 장 정리

그림 2. 프로토타입과 클래스(상속 구조)

call / apply / bind: this를 내가 원하는 대로

중급에서 가장 자주 ‘체감’되는 포인트 중 하나가 this입니다. 특히 콜백이나 이벤트 핸들러에서 this가 바뀌어 혼란스러울 때가 많습니다.

• call/apply: 지금 바로 실행하면서 this를 지정합니다.
• bind: this가 고정된 새 함수를 반환합니다(나중에 호출).

const user = { name: 'Soo' };

function hello() {
  return `Hello, ${this.name}`;
}

console.log(hello.call(user));

팁
이벤트/콜백에서 this가 깨진다면, 우선 bind 또는 화살표 함수 사용 여부를 점검해 보시면 좋습니다.

Prototype: 자바스크립트 상속의 뼈대

자바스크립트는 본질적으로 프로토타입 기반 언어입니다. 어떤 객체에서 프로퍼티를 찾지 못하면, 연결된 프로토타입으로 올라가며 찾습니다.

const parent = { say() { return 'hi'; } };
const child = Object.create(parent);

console.log(child.say()); // 'hi'

• __proto__는 역사적으로 많이 쓰였지만, 표준 API(Object.getPrototypeOf)를 추천드립니다.
• 함수의 prototype과 객체의 [[Prototype]]은 구분해서 이해하시면 좋습니다.

Class: 프로토타입을 더 읽기 좋게 쓰는 문법

class는 프로토타입 모델을 버린 것이 아니라, 읽기 좋은 형태로 작성하도록 도와주는 문법입니다. 실무에서는 팀 합의로 class를 선호하는 경우가 많습니다.

class User {
  constructor(name) {
    this.name = name;
  }
  sayHi() {
    return `안녕하세요, ${this.name}님`;
  }
}

class Admin extends User {
  constructor(name) {
    super(name);
    this.role = 'admin';
  }
}

정리
프로토타입의 동작 원리를 이해하면 class도 훨씬 자연스럽게 읽히고, 디버깅도 쉬워집니다.

참고 링크

• MDN: Function.prototype.call
• MDN: Function.prototype.apply
• MDN: Function.prototype.bind
• MDN: 프로토타입
• MDN: class