1. Prototype

상속을 구현할 수 있는 prototype 프로토타입 이라는 또 하나의 문법이 있다.

constructor를 만들면 prototype이라는 속성이 자동으로 생긴다.

function Students(num, name) {
  this.num = num;
  this.name = name;
  this.age = 20;
}

console.log(Students.prototype);

생성자의 프로토타입에 접근하니 무언가 출력되는 것을 확인할 수 있다.

---

2. 동작원리

prototype에 추가한 데이터는 어떻게 자유롭게 가져다 쓸 수 있을까?

프로토타입은 부모의 역할을 하는 공간이라고 생각하면 쉬울것같다. 그래서 생성자의 프로토타입에 데이터가 들어가 있으면 그 생성자에서 생성되는 오브젝트들은 전부 그걸 상속받아 사용할 수 있다.

자바스크립트는 오브젝트의 데이터에 접근하는 순서가 있다.

1. 그 오브젝트가 직접 가지고 있는지 검사
2. 없으면 프로토타입을 검사.
3. 없으면 상위 프로토타입을 검사. (반복)

function Students(num, name) {
  this.num = num;
  this.name = name;
  this.age = 20;
}

Students.prototype.gender = "male"; // Students생성자의 프로토타입에 데이터 추가

var student1 = new Students(1, "Kim");

console.log(student1); // student1의 gender속성은 없지만
console.log(student1.gender); // gender에 접근해보면 값이 있다.

결과

student1 을 출력해보니 gender속성이 없지만 student1.gender를 출력하니 프로토타입에 넣은 데이터가 출력되는것을 확인할 수 있다.

• prototype에는 값을 여러 개 부여할 수 있다. 함수도 가능. object처럼 다룬다.
• prototype에 추가된 데이터는 자식들이 직접 가지는 것이 아니라 부모만 가지고 있다.

내장함수를 쓸 수 있는 이유

자바스크립트의 Array / Object 에는 붙일 수 있는 내장함수들이 많이 존재한다.
map(), sort(), push() ... 등 그동안 많이 봐왔던 함수들이다.

var arr = [1, 2, 3]

arr라는 Array가 있다고 하자. arr.map() 이렇게 Array에 내장함수를 붙일 수 있는 이유는 Array의 프로토타입이 map()을 포함한 내장함수들을 가지고 있기 때문이다.

var arr = [1,2,3]; // 우리가 array생성하는 빙식
var arr = new Array(1,2,3); // 실제로 생성되는 방식

Array는 위의 방식으로 생성해도 new 키워드를 이용해서 생성자 함수로 Array/Object를 만들기 때문에 프로토타입에 저장된 내장함수들을 사용할 수 있다.

Array / Object뿐만 아니라 Number와 String 타입도 사실 생성자함수를 이용하여 만든다.

각 자료형별로 프로토타입에 저장된 내장함수들을 확인해보자.

자료형별 프로토타입

Array.prototype

Array 프로토타입에 저장된 내장함수들을 확인할 수 있다.

Object.prototype

Object 프로토타입에 저장된 내장함수들을 확인할 수 있다.

Number.prototype

Number 프로토타입에 저장된 내장함수들을 확인할 수 있다.

String.prototype

String 프로토타입에 저장된 내장함수들을 확인할 수 있다.

---

3. Constructor과 prototype의 상속 차이점

• 자식들이 값을 직접 소유하게 하고싶다 -> constructor
• 부모만 가지게 하고 그걸 참조해서 사용하게 하고싶다 -> prototype

4. __proto__ 속성

생성자로부터 생성된 자식 object들은 __proto__ 라는 속성이 있다. 이걸 출력하면 부모의 prototype이 출력된다.

function Students(num, name) {
  this.num = num;
  this.name = name;
  this.age = 20;
}

var student1 = new Students(1, "Kim");

console.log(student1.__proto__);
console.log(Students.prototype);

동일한 값이 출력된다.

__proto__와 부모의 prototype은 같은 의미이다.