Prototype을 이용해서 상속을 구현하는 방법

- JavaScript는 객체 기반의 프로그래밍 언어이며 자바스크립트를 이루고 있는 거의 모든 것(원시타입을 제외한 값)이 객체다.

- 상속은 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 객체지향 프로그래밍의 핵심 개념이다.

- 프로토타입 객체는 다른 객체로부터 상속된 속성과 메서드를 포함하고 있다.

function Student() {
  this.table = new Array();
  this.add = function (name, age) {
    this.table.push({ name: name, age: age });
  };
  this.show = function (minAge) {
    return this.table.filter((student) => student.age >= minAge);
  };
}

// math 수업을 듣는 학생들을 저장할 인스턴스 생성
const mathClassStudent = new Student();
mathClassStudent.add('Lee', 20);
mathClassStudent.add('Kim', 30);
mathClassStudent.add('Choi', 50);

console.log(mathClassStudent.show(30)); // [ { name: 'Kim', age: 30 }, { name: 'Choi', age: 50 } ]

// english 수업을 듣는 학생들을 저장할 인스턴스 생성
const englishClassStudent = new Student();
englishClassStudent.add('Lee', 20);
englishClassStudent.add('Kim', 30);
englishClassStudent.add('Park', 40);

console.log(englishClassStudent.show(30)); // [ { name: 'Kim', age: 30 }, { name: 'Park', age: 40 } ]

// Student 생성자 함수는 인스턴스를 생성할 때마다 동일한 동작을 하는
// add, show 메서드를 중복 생성하고 모든 인스턴스가 중복 생성된 메서드를
// 각각 소유하게 된다. 이는 메모리의 낭비이다.
console.log(mathClassStudent.add === englishClassStudent.add); // false

- 위 예제는 prototype으로 구현한 메서드가 아니기 때문에, 인스턴스가 생성될 때마다 add, show 메서드를 중복 생성하고 모든 인스턴스가 중복 소유한다.

function Student() {
  this.table = new Array();
}

Student.prototype.add = function (name, age) {
  this.table.push({ name: name, age: age });
};

Student.prototype.show = function (minAge) {
  return this.table.filter((student) => student.age >= minAge);
};

const mathClassStudent = new Student();
mathClassStudent.add('Lee', 20);
mathClassStudent.add('Kim', 30);
mathClassStudent.add('Choi', 50);

console.log(mathClassStudent.show(30)); // [ { name: 'Kim', age: 30 }, { name: 'Choi', age: 50 } ]

const englishClassStudent = new Student();
englishClassStudent.add('Lee', 20);
englishClassStudent.add('Kim', 30);
englishClassStudent.add('Park', 40);

console.log(englishClassStudent.show(30)); // [ { name: 'Kim', age: 30 }, { name: 'Park', age: 40 } ]

// Student 생성자 함수가 생성한 모든 인스턴스는 부모 객체의 역할을 하는
// 프로토타입 Student.prototype으로부터 add, show 메서드를 상속받는다.
// 즉, Student 생성자 함수가 생성하는 모든 인스턴스는 하나의 add, show 메서드를 공유한다
console.log(mathClassStudent.add === englishClassStudent.add); // true

 

 

 

- 객체의 프로토타입 체이닝은 어떤 객체에서 속성이나 메서드를 찾을 때, 그 객체의 프로토타입 체인을 따라 올라가면서 검색하는 과정을 의미한다.
- 이것은 현재 객체가 원하는 속성 또는 메서드를 직접 가지고 있지 않더라도, 해당 객체의 상위 프로토타입 객체에서 찾을 수 있음을 의미한다.
- 예를 들어, 위의 예제에서 `add`와 `show` 메서드는 `Student.prototype` 객체에 단 한 번 정의되어 있는데, 이로 인해 `Student` 생성자 함수가 생성하는 모든 인스턴스는 `add`와 `show` 메서드를 상속받아 사용할 수 있다.

---

* 정리

- JavaScript는 객체 기반의 프로그래밍 언어이며 자바스크립트를 이루고 있는 거의 모든 것(원시타입을 제외한 값)이 객체이며, 객체지향 프로그래밍에서 상속은 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 핵심 개념이다.

- 프로토타입에서 상속이 되면 객체의 프로토타입 체이닝은 어떤 객체에서 속성이나 메서드를 찾을 때, 그 객체의 프로토타입 체인을 따라 올라가면서 검색하는 과정을 의미하는데, 만약 현재 객체가 원하는 속성 또는 메서드를 직접 가지고 있지 않더라도, 해당 객체의 상위 프로토타입 객체에서 찾을 수 있음을 의미한다.

- 따라서, 프로토타입의 상속을 사용하면 모든 인스턴스가 인스턴스가 생성될 때마다 각각 속성과 메서드를 중복 생성하는 것이 아닌 생성자 객체의 속성 또는 메서드를 공유하게 된다.