TIL : Prototype

1. Prototype

자바스크립트의 모든 객체는 부모 객체와 연결되어 있어 부모 객체의 프로퍼티 또는 메서드를 상속받아 사용할 수 있다.

이때, 부모 객체를 prototype(프로토타입)이라고 한다.

 

-> __proto__(프로토타입 링크) : 부모 함수의 프로토타입을 가리킨다.

const Human = function(name) {
  this.name = name;
}
Human.prototype.sleep = function() {};
const student = new Human('steve');


student.__proto__ === Human.prototype // true

---

2. Prototype Chain

프로토타입 객체가 상위 프로토타입 객체로부터 프로퍼티와 메서드를 상속받을 수 있는 것처럼 그 상위/하위로 계속 연결될 수 있는데, 이를 prototype chain이라고 한다.

function Ultra() {}
Ultra.prototype.ultraProp = true;

function Super() {}
Super.prototype = new Ultra();

function Sub () {}
Sub.prototype = new Super();

var func = new Sub();
console.log(func.ultraProp); // true

---

3. Object.create()

지정된 프로토타입 객체 및 속성을 갖는 새 객체를 만든다. 생성자는 실행하지 않는다는 점에서 new 키워드를 사용하는 방식과 다르다.

Object.create(proto[, propertiesObject])
// proto : 프로토타입으로 사용할 객체
// propertiesObject : 새로 만든 객체에 추가될 속성 설명자를 지정 (optional)

---

4. ES6 (class, super)

· class : ES5 이전에는 함수를 이용했지만 ES6 이후부터는 class로 클래스를 만든다.

· extend : 클래스를 상속한다.

· super : 부모 객체의 함수를 호출할 때 사용한다. (생성자에서는 super 키워드 하나만 사용하거나 this 키워드가 사용되기 전에 호출되어야 한다.)

class Vehicle {
  constructor(name, color) {
    this.name = name;
    this.color = color;
  }
  drive() {}
  reverse() {}
}


class Car extends Vehicle {
  constructor (name, brand, color) {
    super(name, color)
    this.brand = brand;
  }
  drive1() {}
  reverse1() {}
}