Javascript _ 프로토타입

1. 프로토타입이란?

프로토타입이란, 클래스 간의 상속을 구현하기 위해서 사용된다. 이 프로토타입은 어떤 클래스의 부모 클래스 역할을 하는 객체로서 다른 클래스에 메서드를 포함한 공유 프로퍼티를 제공한다. 프로토타입을 제공받는 자식 클래스는 상위 클래스의 프로퍼티를 자신의 프로퍼티처럼 자유롭게 사용할 수 있다.

class Car {
  constructor (name, color) {
    this.name = 'avante';
    this.color = 'blue';
  }
}

let car1 = new Car(); //상위 클래스인 Car의 프로퍼티를 상속받음
let car2 = new Car();

console.log(car1); //Car {name: 'avante', color: 'blue'}
console.log(car2); // Car {name: 'avante', color: 'blue'}

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

모든 인스턴스는 하나의 프로토타입을 갖는다. 그리고 모든 프로토타입은 클래스와 연결되어 있다. 즉, 인스턴스와 프로토타입과 클래스는 서로 연결되어 있다.

인스턴스는 .proto 접근자 프로퍼티를 통해 자신의 프로토타입에 간접적으로 접근할 수 있고

프로토타입은 자신의 constructor 프로퍼티를 통해 클래스에 접근할 수 있으며

클래스는 자신의 prototype 프로퍼티를 통해 프로토타입에 접근할 수 있다.

3. .__proto__ 접근자 프로퍼티

모든 인스턴스는 .__proto__ 접근자 프로퍼티를 통해 자신의 프로토타입에 간접적으로 접근할 수 있다.

.__proto__ 접근자 프로퍼티는 인스턴스가 직접 소유하는 프로퍼티가 아니라 상속을 통해서 사용할 수 있는 프로퍼티이다. 이 프로퍼티는 확인하는 용도로만 쓰고 실제 코딩할 때는 쓰는 것을 지양하는 것이 좋다. (상속이 되기 때문에 실제로 쓸 필요가 없기도 하다)

4. 프로토타입 체인

인스턴스 객체의 key에 접근할 때, 해당 객체에게 key가 없다면 그 다음으로 상위 프로토타입(원형) 속성에서 key가 있는지 확인한다.

없다면 그것을 찾기 위해 더 상위의 프로토타입(부모)에서 찾는다. 이것을 프로토타입 체인이라고 한다.

프로토타입 체인은 자바스크립트가 객체지향 프로그래밍의 상속을 구현하는 매커니즘이다.

class Human {
  constructor () {
    this.name = 'seungmi';
    this.color = '25';
  }
}

class Student extends Human {
  constructor () {
    super();
    this.grade = 3;
  }
}

Student.__proto__ //Human.prototype과 같다
Student.__proto__.__proto__ //Object.prototype과 같다. 

5. Object.prototype

프로토타입 체인의 최상위에 위치하는 객체는 언제나 Object.prototype 이다. 따라서 모든 객체는 Object.prototype을 상속받으며 Object.prototype을 프로토타입 체인의 종점이라고 부른다. 그러므로 Object.prototype의 프로토타입은 null이다.

6. extends와 super

class Human {
  constructor () {
    this.name = 'seungmi';
    this.color = '25';
  }
}

class Student extends Human { //Student는 Human으로부터 상속받는다.
  constructor () {
    super(); // 부모 클래스인 Human의 함수를 호출할 때 사용된다. 
    this.grade = 3;
  }
}

extends와 super 키워드는 서로 뗄레야 뗄 수 없는 관계이므로 무조건 같이 써주는 것이 좋다.