프로토타입과 프로토타입 체인

JavaScript에서 프로토타입과 프로토타입 체인

자바스크립트는 프로토타입 기반의 객체 지향 프로그래밍 언어입니다. 프로토타입은 객체 생성자 함수를 통해 생성된 모든 객체에 공유되는 속성과 메서드의 집합입니다. 이러한 프로토타입 체인은 객체 간에 상속을 구현하고 코드 재사용을 촉진합니다.

1. 프로토타입

프로토타입은 JavaScript 객체의 기본 템플릿입니다. 모든 JavaScript 객체는 프로토타입을 가지며, 객체 생성자 함수를 통해 프로토타입을 정의할 수 있습니다. 예를 들어, 다음은 Person 객체의 프로토타입을 정의하는 코드입니다.

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

Person.prototype.sayHello = function() {
  console.log('안녕하세요, 저는 ' + this.name + '입니다.');
};

const person1 = new Person('John');
person1.sayHello(); // 출력: 안녕하세요, 저는 John입니다.

위의 코드에서 `Person.prototype`은 모든 Person 객체가 상속받는 속성과 메서드를 정의합니다. `sayHello` 메서드는 프로토타입에 추가되어 모든 Person 객체에서 사용할 수 있습니다.

2. __proto__와 .prototype

JavaScript 객체는 `__proto__`라는 내부 속성을 가집니다. 이 속성은 해당 객체의 프로토타입에 대한 참조를 가지고 있습니다. `__proto__`를 통해 객체의 프로토타입에 접근할 수 있습니다.

반면, 객체 생성자 함수는 `prototype`이라는 속성을 가지며, 이 속성을 통해 해당 생성자 함수로부터 생성된 객체들의 프로토타입을 정의할 수 있습니다. 생성자 함수의 `prototype`에 추가된 메서드와 속성은 생성자 함수를 통해 생성된 모든 객체에 상속됩니다.

console.log(person1.__proto__ === Person.prototype); // 출력: true

위의 예제에서 `person1` 객체의 `__proto__`는 `Person.prototype`을 가리킵니다. 이는 `person1` 객체가 `Person.prototype`에 정의된 메서드와 속성을 상속받을 수 있음을 의미합니다.

3. 클래스, 인스턴스, 프로토타입의 관계

ES6부터 JavaScript에는 클래스 문법이 도입되었습니다, 클래스는 객체를 생성하기 위한 템플릿으로 사용됩니다. 클래스는 생성자 함수와 프로토타입 메서드를 포함하며, 이를 통해 객체를 생성하고 상속 관계를 구현할 수 있습니다.

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

  sayHello() {
    console.log('안녕하세요, 저는 ' + this.name + '입니다.');
  }
}

const person1 = new Person('John');
person1.sayHello(); // 출력: 안녕하세요, 저는 John입니다.

위의 코드에서 `Person` 클래스는 `constructor` 메서드를 통해 객체를 초기화하고, `sayHello` 메서드를 정의합니다. `person1`은 `Person` 클래스의 인스턴스로, 클래스의 프로토타입에 정의된 메서드를 상속받아 사용할 수 있습니다.

4. 프로토타입 체인

프로토타입 체인은 객체의 프로토타입이 다른 객체의 프로토타입을 가리키는 연결 구조입니다. 객체에서 속성이나 메서드에 접근할 때, JavaScript는 해당 객체의 프로토타입 체인을 따라 올라가며 찾습니다.

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

  sayHello() {
    console.log('안녕하세요, 저는 ' + this.name + '입니다.');
  }
}

class Student extends Person {
  constructor(name, grade) {
    super(name);
    this.grade = grade;
  }

  study() {
    console.log(this.name + '이(가) 공부합니다.');
  }
}

const student1 = new Student('Amy', 3);
student1.sayHello(); // 출력: 안녕하세요, 저는 Amy입니다.
student1.study(); // 출력: Amy이(가) 공부합니다.

위의 코드에서 `Student` 클래스는 `Person` 클래스를 상속받습니다. `student1` 객체에서 `sayHello` 메서드를 호출하면, JavaScript는 먼저 `student1` 객체에서 해당 메서드를 찾습니다. 찾지 못하면 `student1` 객체의 프로토타입인 `Student.prototype`으로 이동하여 메서드를 찾습니다. 그리고 `Student.prototype`의 프로토타입인 `Person.prototype`으로 이동하여 메서드를 찾을 수 있습니다.

5. Object

JavaScript에서 `Object`는 모든 객체의 최상위 객체입니다. 모든 객체는 `Object`를 상속받으며, `Object`의 메서드와 속성을 사용할 수 있습니다.

const person = {
  name: 'John',
  age: 30
};

console.log(person.toString()); // 출력: [object Object]

위의 코드에서 `person` 객체는 `Object`의 인스턴스이므로 `toString` 메서드를 사용할 수 있습니다. `toString` 메서드는 객체를 문자열로 변환하는 기능을 제공합니다.

결론

JavaScript에서 프로토타입과 프로토타입 체인은 객체 지향 프로그래밍에서 중요한 개념입니다. 프로토타입을 통해 객체 간에 속성과 메서드를 공유하고 상속 관계를 구현할 수 있습니다. 프로토타입 체인은 객체의 프로토타입이 다른 객체의 프로토타입을 가리키는 연결 구조로, 속성과 메서드에 접근할 때 사용됩니다. 또한, JavaScript의 모든 객체는 `Object`를 상속받으므로 `Object`의 메서드와 속성을 활용할 수 있습니다.

프로토타입과 프로토타입 체인을 이해하면 객체 지향 프로그래밍에서 JavaScript의 독특한 기능을 효과적으로 활용할 수 있습니다.