[JavaScript 심화 시리즈] 3일차: JavaScript의 프로토타입과 상속 이해하기

3. 프로토타입과 상속

프로토타입이란 무엇인가?

JavaScript의 프로토타입은 객체 지향 프로그래밍의 중요한 개념 중 하나입니다. 모든 객체는 자신의 프로토타입 객체에 대한 참조(링크)를 가지고 있으며, 이를 통해 상속받은 속성과 메서드에 접근할 수 있습니다. 이러한 참조 체인을 프로토타입 체인(prototype chain)이라고 합니다.

프로토타입 체인

프로토타입 체인은 객체의 속성이나 메서드를 찾을 때, 현재 객체에서 찾지 못하면 프로토타입 객체를 따라가며 계속해서 찾는 구조입니다.

예제:

let person = {
  name: 'Alice',
  greet: function() {
    console.log('Hello, ' + this.name);
  }
};

let student = {
  age: 20
};

student.__proto__ = person;

console.log(student.name);  // 출력: Alice
student.greet();            // 출력: Hello, Alice

이 예제에서 student 객체는 person 객체를 프로토타입으로 설정했습니다. 따라서 student 객체는 person 객체의 속성과 메서드를 상속받습니다.

생성자 함수와 프로토타입

생성자 함수는 새로운 객체를 생성할 때 사용되며, 이 객체들은 생성자 함수의 프로토타입 속성을 상속받습니다.

예제:

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

Person.prototype.greet = function() {
  console.log('Hello, ' + this.name);
};

let alice = new Person('Alice');
let bob = new Person('Bob');

alice.greet();  // 출력: Hello, Alice
bob.greet();    // 출력: Hello, Bob

이 예제에서 Person 생성자 함수는 greet 메서드를 자신의 프로토타입에 정의합니다. 그리고 alice와 bob 객체는 이 프로토타입을 상속받아 greet 메서드를 사용할 수 있습니다.

클래스와 상속

ES6에서는 클래스를 사용하여 객체 지향 프로그래밍을 더 쉽게 구현할 수 있습니다. 클래스는 사실상 프로토타입을 사용하지만, 더 직관적인 문법을 제공합니다.

클래스 선언:

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log('Hello, ' + this.name);
  }
}

let charlie = new Person('Charlie');
charlie.greet();  // 출력: Hello, Charlie

상속:

클래스를 사용하여 상속을 구현할 수 있습니다.

class Student extends Person {
  constructor(name, age) {
    super(name);  // 부모 클래스의 생성자를 호출
    this.age = age;
  }

  study() {
    console.log(this.name + ' is studying.');
  }
}

let dave = new Student('Dave', 21);
dave.greet();   // 출력: Hello, Dave
dave.study();   // 출력: Dave is studying.

이 예제에서 Student 클래스는 Person 클래스를 상속받아 greet 메서드를 사용할 수 있습니다. 또한, study라는 새로운 메서드를 추가했습니다.

프로토타입 메서드와 정적 메서드

프로토타입 메서드는 인스턴스 객체에서 호출할 수 있는 메서드이고, 정적 메서드는 클래스 자체에서 호출할 수 있는 메서드입니다.

예제:

class Person {
  constructor(name) {
    this.name = name;
  }

  // 프로토타입 메서드
  greet() {
    console.log('Hello, ' + this.name);
  }

  // 정적 메서드
  static info() {
    console.log('This is a person class.');
  }
}

let eve = new Person('Eve');
eve.greet();  // 출력: Hello, Eve

Person.info();  // 출력: This is a person class.

결론

JavaScript의 프로토타입과 상속은 객체 지향 프로그래밍을 구현하는 중요한 개념입니다. 프로토타입 체인, 생성자 함수, 클래스와 상속을 이해하면 더 효율적이고 강력한 코드를 작성할 수 있습니다.

다음 글에서는 비동기 프로그래밍: 콜백, 프로미스, async/await에 대해 알아보겠습니다.

다음 글에서 만나요!