prototype과 상속

자바스크립트는 클래스의 개념이 없고 대신 prototype을 이용한다.(최근 자바스크립트 명세로 비슷한 문법의 Class 개념이 생겼다.)

 function Person() {
  this.eyes = 2;
  this.nose = 1;
}
var hwang  = new Person(); => 변수 2개생성
var jang = new Person(); => 변수 2개생성 총 4개
            console.log(hwang.eyes) // 2

위 예제처럼 생성자를 이용하여 객체를 생성하면 그때마다 객체에 선언한 초기값들이 서로 공유되는 것이 아니라 새로 생성되는 현상을 볼 수 있다.
공유 데이터가 무수히 많아지고 생성되는 객체가 무수히 많아진다고 상상하면 성능적으로 비효율적인 것임은 확실한것 같다.
prototype를 사용하여 개선해보자.

 function Person() {}
Person.prototype.eyes = 2;
Person.prototype.nose = 1;
var hwang = new Person(); => 변수공유
var jang = new Person(); => 변수공유
 console.log(hwang.eyes) // 2

언듯 보면 prototype의 데이터를 상속받아 사용하는 것 처럼 보인다. 실제로 상속처럼 데이터를 가져오는 원리이다. 조금 더 자세히 알아보자.

우리가 사용하는 객체는 함수라고 할 수 있다.
그렇다면 어떻게 함수를 객체로 정의할 수 있을까?
함수(function)가 정의될 때는 2가지 일이 동시에 이루어진다.

함수에 Constructor(생성자) 자격 부여 - 생성자 자격이 부여되면 new 키워드를 통하여 객체를 만들어낼 수 있게된다.
Prototype Object 생성

Prototype Object

함수의 prototype 속성을 통해 접근할 수 있으며, 역으로 prototype object의 constructor를 통해 함수로 접근할 수 있다.
내부에 constructor와 proto속성을 가지고 있다.
- constructor : 초기 함께 생성한 함수를 가리킨다.
- proto : Prototype Link으로 새객체가 생성될 때 담기며 조상 함수의 Prototype Object를 가리킨다.

Prototype Link(proto)

Prototype Object속성으로 생성된 proto속성은 생성자로 인하여 생성된 객체의 속성으로도 생성된다.
Prototype Object의 데이터를 참조할 수 있게 해주는 것은 proto속성이다.
prototype의 속성은 함수만 가질 수 있는 속성이라면, proto은 모든 생성 객체가 빠짐없이 갖고있는 속성이라고 할 수 있다.

따라서 hwang.eyes를 실행하면 hwang객체가 eyes를 직접 가지고 있지 않기 때문에 상위 함수의 Prototype Object를 탑색하고
없을 경우 최상위인 Object함수의 Prototype Object를 탐색하여 가져오게 된다.
이러한 형태를 프로토타입 체인이라고 한다.

1	function Person() {
2	this.eyes = 2;
3	this.nose = 1;
4	}
5	var hwang = new Person(); => 변수 2개생성
6	var jang = new Person(); => 변수 2개생성 총 4개
7	console.log(hwang.eyes) // 2

1	function Person() {}
2	Person.prototype.eyes = 2;
3	Person.prototype.nose = 1;
4	var hwang = new Person(); => 변수공유
5	var jang = new Person(); => 변수공유
6	console.log(hwang.eyes) // 2