Core Javascript 06 프로토타입

Rachel·2022년 1월 28일
0

Core Javascript

목록 보기
6/8
post-thumbnail

06 프로토타입

6-1 프로토타입의 개념 이해

6-1-1 constructor, prototype, instance

var instance = new Constructor();
  • 어떤 생성자 함수(Construcor)를 new 연산자와 함께 호출하면
  • Constructor에서 정의된 내용을 바탕으로 새로운 인스턴스(instance)가 생성
  • 이때 instance에는 __proto__ (던더 프로토)라는 프로퍼티가 자동으로 부여됨
  • 이 프로퍼티는 Constructor의 prototype이라는 프로퍼티를 참조
// Person이라는 생성자 함수의 prototype에 getName이라는 메서드를 지정
var Person = function (name) {
	this._name = name;
};
Person.prototype.getName = function () {
	return this._name;
};

var suzi = new Person('Suzi');
suzi.__proto__.getName(); // undefined
Person.prototype === suzi.__proto__ // true

suzi.__proto__._name = 'SUZI__proto__';
suzi.__proto__.getName(); // SUZI__proto__

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); // Grade(2) [100, 80]
g.pop();
console.log(g); // Grade(1) [100]
g.push(90);
console.log(g); // Grade(2) [100, 90]
profile
Frontend Developer

0개의 댓글