JavaScript : Prototype-based inheritance - 프로토타입 기반 상속

아... 이건 뭔가 벌집을 쑤신듯 한 기부니가 드는데... 흠 일단 제목을 잡았으니 시작해 볼까나...

 

자바스크립트는 전통적인 클래스 기반 상속 대신 프로토타입 기반 상속(prototype-based inheritance)을 사용한다. 이로 인해서 자바스크립트는 클래스가 없다라는 오해에 한동안 시달려왔다카더라... 

 

"우~ 클래스 개념도 없는 자바스크립트가 뭔 프로그래밍 언어냐..."

"자바스크립트 개발자는 개발자도 아니다"

 

한 동안 서러웠다... 물론, 아주 오래전 이야기다...

 

1. 기본 개념

1.1 Object와 Prototype

내부 프로퍼티

자바스크립트의 모든 객체는 보이지 않는 내부 프로퍼티인 Prototype을 가지고 있다. 이 프로퍼티는 다른 객체에 대한 참조로, 해당 객체의 프로토타입 역할을 한다.

 

프로토타입 체인

객체에서 어떤 프로퍼티나 메서드를 접근할 때, 먼저 객체 자체에 해당 속성이 있는지, 확인하고, 없으면 그 객체의 프로토타입에서, 그리고 그 프로토타입의 프로토타입에서 계속 찾아 나가는 과정을 프로토타입 체인이라고 한다.

 

1.2 함수와 프로토타입

생성자 함수와 프로토타입 프로퍼티

자바스크립트에서는 생성자 함수를 통해 새로운 객체를 만들 때, 해당 함수의 prototype 프로퍼티가 새로 생성된 객체의 [[Prototype]]에 할당된다.

function Person(name) {
    this.name = name;
}
Person.prototype.sayHello = funcion () {
    console.log(`안녕하세요, ${this.name}입니다.`);
};

const person1 = new Person("철수");
person1.sayHello(); // "안녕하세요, 철수입니다."

위 예제에서, person1 객체는 자신의 프로퍼티(name)을 갖고 있고, sayHello 메서드는 Person.prototype에 정의되어 있어, person1이 직접 가지고 있지 않더라도 호출할 수 있다.

 

2. 프로토타입 체인의 작동 방식

2.1 프로퍼티 검색

우선순위:

객체에 어떤 프로퍼티나 메서드를 접근할 때, 자바스크립트 엔진은 먼저 객체 자신이 해당 속성을 가지고 있는지 확인한다.

 

체인 따라 검색:

만약 해당 속성이 없다면, 객체의 [[Prototype]]에 저장된 프로토타입 객체를 차례로 확인한다. 이 과정을 프로토타입 체인이라 하며, 체인의 끝은 null이다.

 

2.2 상속과 메서드 공유

메서드 재사용:

프로토타입에 정의된 메서드는 여러 인스턴스가 공유하여 사용할 수 있으므로 메모리 효율적이다.

 

오버라이딩:

만약 인스턴스 자체에 동일한 이름의 속성이 있다면, 프로토타입의 속성은 숨겨지게 된다. 이를 통해 필요에 따라 메서드를 오버라이드할 수 있다.

 

3. 객체 생성 방식과 프로토타입 설정

3.1 생성자 함수와 new 연산자

생성자 함수(Constructor function): 

new 연산자를 사용하면, 빈 객체가 생성되고 해당 객체의 [[Prototype]]이 생성자 함수의 prototype 프로퍼티로 설정된다.

 

예제:

위의 Person 예제처럼, 생성자 함수와 new 연산자를 사용하면 각 인스턴스는 공통된 프로토타입(Person.prototype)을 공유한다.

 

3.2 Object.create를 사용한 객체 생성

직접 프로토타입 설정:

Object.create 메서드를 사용하면, 원하는 객체를 프로토타입으로 지정하여 새 객체를 만들 수 있다.

const animal = {
    speak: function() {
      console.log("소리를 냅니다.");
    }
};

const dog = Object.create(animal);
dog.speak(); // "소리를 냅니다."

 

4. ES6 클래스와 프로토타입 상속

ES6에서 도입된 class 문법은 전통적인 클래스 기반 어어의 문법과 유사하지만, 내부적으로는 여전히 프로토타입 기반 상속을 사용한다. 즉, class는 문법적 설탕(syntactic sugar)에 불과하며, 작동 원리는 동일하다.

class Person {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log(`안녕하세요, ${this.name}입니다.`);
  }
}

const person2 = new Person("영희");
person2.sayHello(); // "안녕하세요, 영희입니다."

위 코드에서도 Person 클래스의 메서드는 Person.prototype에 정의되어, 인스턴스가 이를 상속받게 된다.

---

결론

자바스크립트의 프로토타입 기반 상속은 

• 각 객체가 다른 객체를 참조하여 속성과 메서드를 공유할 수 있도록 함으로써,
• 메모리 효율성과 재사용성을 높이고,
• 유연한 객체지향 프로그래밍을 가능하게 한다.

 

그러므로, 자바스크립트에 클래스가 없다는 개소리는 집어 치워라,

 

이러한 개념은 자바스크립트의 핵심적인 특징 중 하나로, 함수생성자, Object.create 그리고 ES6의 class 문법을 통해 다양한 방식으로 활용될 수 있다는 것을 알고들 계세요~