06 프로토타입
6-1 프로토타입의 개념 이해
6-1-1 constructor, prototype, instance
var instance = new Constructor();
- 어떤 생성자 함수(Construcor)를 new 연산자와 함께 호출하면
- Constructor에서 정의된 내용을 바탕으로 새로운 인스턴스(instance)가 생성
- 이때 instance에는
__proto__
(던더 프로토)라는 프로퍼티가 자동으로 부여됨
- 이 프로퍼티는 Constructor의
prototype
이라는 프로퍼티를 참조
var Person = function (name) {
this._name = name;
};
Person.prototype.getName = function () {
return this._name;
};
var suzi = new Person('Suzi');
suzi.__proto__.getName();
Person.prototype === suzi.__proto__
suzi.__proto__._name = 'SUZI__proto__';
suzi.__proto__.getName();
suzi.__proto__.getName
-> suzi(__proto__).getName
-> suzi.getName
- 생성자 함수의 prototype에 어떤 메서드나 프로퍼티가 있다면 인스턴스에서도 마치 자신의 것처럼 해당 메서드나 프로퍼티에 접근할 수 있다.
6-1-2 constructor 프로퍼티
- constructor 프로퍼티는 원래의 생성자 함수(자기 자신)를 참조한다.
- constructor는 읽기 전용 속성이 부여된 예외적인 경우(기본형 리터럴 변수 - number, string, boolena)를 제외하고는 값을 바꿀 수 있다.
6-2 프로토타입 체인
6-2-1 메서드 오버라이드
- 인스턴스가 prototype에 있는 프로퍼티나 메서드와 동일한 이름의 프로퍼티 또는 메서드를 갖고 있어서 덮어씌워지는 현상
- call이나 apply를 사용해서 prototype에 있는 메서드에 접근 가능
6-2-2 프로토타입 체인
- 어떤 데이터의
__proto__
프로퍼티 내부에 다시 __proto__
프로퍼티가 연쇄적으로 이어진 것을 프로토타입 체인이라고 하고, 이 체인을 따라가며 검색하는 것을 프로토타입 체이닝이라고 한다.
- 어떤 메서드를 호출하면 자바스크립트 엔진은 데이터 자신의 프로퍼티들을 검색해서 원하는 메서드가 있으면 그 메서드를 실행하고, 없으면
__proto__
를 검색해서 있으면 그 메서드를 실행하고, 없으면 다시 __proto__
를 검색해서 실행하는 식으로 진행
6-2-3 객체 전용 메서드의 예외사항
- 어떤 함수이든 prototype은 반드시 객체이기 때문에 Object.prototype이 언제나 프로토타입 체인의 최상단에 존재한다.
- 그래서 객체만을 대상으로 동작하는 객체 전용 메서드들은 부득이 Object.prototype이 아닌 Object에 스태틱 메서드로 부여할 수밖에 없다. 그리고, this의 사용을 포기하고 대상 인스턴스를 인자로 직접 주입해야 한다.
- Object.create(null)은
__proto__
가 없는 객체를 생성한다.
6-2-4 다중 프로토타입 체인
- 두 단계 이상의 체인을 지니는 다중 프로토타입 체인도 가능하다.
var Grade = function () {
var args = Array.prototype.slice.call(arguments);
for (var i = 0; i < args.length; i++) {
this[i] = args[i];
}
this.length = args.length;
};
var g = new Grade(100, 80);
Grade.prototype = [];
console.log(g);
g.pop();
console.log(g);
g.push(90);
console.log(g);