- prototype
- [[Prototype]] - 편의상 ‘프로트’라고 부름
- constructor
프로토타입 예시)
- royClone1,2,3,4들은 모두 Person의 인스턴스가 된다.
- 이는 모두 동일한 프로퍼티에 접근할 수 있다.
- roy.proto에 의해서 Person.prototype에 접근할 수 있고,
- [[Prototype]]라는 프로퍼티에 의해서 Person.prototype에 접근할 수 있다.
- Object.getPrototypeOf()에 의해서Person.prototype에 접근할 수 있다.
- Person.prototype 자체로 Person.prototype에 접근할 수 있다.
위를 정리하자면)
- 네 가지 방식에 의해서 생성자함수의 prototype이라고 하는 프로퍼티에 접근이 가능하다.
- 또한, 네 가지 방식은 모두 동일한 함수 Person 생성자 함수를 가리킨다.
- 일반화 하면 오른쪽 사진 처럼 표현됨
상속 예시)
- 위 그림은 setOlder, getAge메서드와 setOlder, getAge메서드는 중복되는 내용이 많다. 이는 반복을 줄이려면
- 위 처럼 프로토타입으로 메서드를 이동시킴
- 이에 대한 이점 : 다수의 객체들이 중복되지 않는 메서드를 계속 참조함.
- 좌측 코드는 오른쪽으로 표현될 수 있다.
- 이 상태에서 roy객체, jay객체 등을 만들면 위 그림 처럼 표현됨
- 이렇게 다수의 객체들이 (밑의) 한번만 만들어 놓은 메서드를 계속 참조함.
Person.prototype.setOlder = function() {
this.age += 1;
}
Person.prototype.getAge = function() {
this.age;
}
- 빨갠색 점선을 의미하고
- [[Prototype]]으로 이어진 각 prototype들에 모두 접근할 수 있는 것이 “프로토타입 체인”이라고 한다.
프로토타입 체인 예시)
- 인스턴스는 Object.prototype에 있는 메서드도 마치 자신의 것처럼 사용할 수 있다.
- 대각선의 빨간선을 따라서 연결되어 있는 것이 ‘프로토타입 체인’ 이다.
- 모든 데이터 타입(숫자형, 문자형, 함수, 배열)은 이와 동일한 구조를 따른다.
- 또한, 모든 데이터타입에 대해 [[Prototype]]으로 연결된 Object.prototype에는 js 전체를 통괄하는 공통된 메서드들 즉, hasOwnProperty()등이 정의 되었다.
- 이 메서들은 프로토타입 체이닝을 통해 접근할 수 있다.