JS 모던튜토리얼 프로토타입

수박·2020년 9월 4일
0

JavaScript

목록 보기
12/22

JS 모던튜토리얼 #01 프로토타입


자바스크립트는 객체지향언어, 프로토타입 기반 언어라고 불린다

JS에는 클래스가 없다. Class라는 예약어가 있지만 함수의 한 종류일 뿐이다.

따라서 Class가 없으니 상속기능도 없다.

상속을 구현해 사용하는 것이고 이를 함수new를 통해 흉내내는 것이다.

프로토타입을 기반으로 상속을 구현한다라고 이해하면 될 것 같다.

이 프로토타입은 객체와 링크를 통해 구성되어있다. 하나씩 알아보자!


8. 프로토타입

  • 프로토타입 기반 프로그래밍 = 클래스가 없고, 상속과는 다르게 객체를 원형(프로토타입)으로 하여 복제를 통해 객체 동작방식을 다시 사용할 수 있는 것.

  • 객체의 [[Prototype]] 은 부모의 prototype 객체를 바라보며, 이것이 반복(체인) 되다가, prototype 으로 null 을 가지고 있는 객체에서 끝이 난다.


프로토타입에 대해서 간략하게 정리했다. 체인이라는 용어와 prototype에 감이오지 않는다. 다음을 계속 알아보자.


8.1 prototype , proto 맛보기

  • 함수에는 prototype이라는 객체가 존재한다.

  • 함수의 (new)통해 만들어지는 새로운 객체의 생성시점에 __proto__라는 프로퍼티에 null이 아닌 값이 할당된다.

  • __proto__부모의 prototype 객체를 바라보면서 부모로 거슬러 올라가며 반복(체인)되다가 null을 가진 객체(prototype)에서 반복이 끝이난다.

=> prototype은 부모함수가 가진 객체이고 부모를 통해 만들어진 자식객체들은 자신을 만들어낸 부모의 prototype을 가리키는 __proto__라는 속성을 가지고 있다.


8.1 프로토타입 = (프로토타입 객체 + 프로로타입 링크)


조금씩 와닿고 있다. 그럼 동작을 자세하게 알아보자.


함수를 생성할 때 생기는 일.

함수를 생성하면, Person.prototype Object가 생성된다.

Prototype Object는 기본 속성으로 다음 두가지(constructor, __proto__)를 가진다

  • constructor : 내가 선언한 생성자함수 Person를 가리킨다.
  • __proto__ : [[Prototype]] Link이다. 부모의 prototype을 참조한다.
  • prototype: 부모로부터 생성된 모든 객체가 공유할 부모의 프로퍼티 == 원형객체


다시 정리하자면, 함수를 정의할 때 두가지 일이 동시에 부여된다. 그중 하나는 생성자 자격부여, Prototype Object생성.


생성자 자격부여

  • constructor자격이 부여되면 new를 통해 객체를 만들어 낼 수 있다.

함수의 Prototype Object 생성 및 연결

  • 함수를 정의하면 Prototype Object도 같이 생성된다.
  • prototype Object의 프로퍼티를 조정함으로써 새로 생성되는 객체도 이를 반영하여 생성된다. 다음 예를 보자.
function Person() {}

Person.prototype.eyes = 2;
Person.prototype.nose = 1;

let me = new Person();
let you = new Person();
let who = Person(); // => who.eyes는 undefined -> Person에는 해당 프로퍼티가 없기 때문, prototype객체에 존재함.
console.log(me.eyes, you.eyes); => 2 2
//Person이 생성되면 prototype객체가 만들어진다.
//이 후 eyes, nose라는 프로퍼티를 prototype객체에 추가한다.
//2개의 프로퍼티가 추가된 prototype객체를 가진 Person 생성자를 me, you에 호출한다.

me, younew연산자를 통해 생성된 객체이다. Person함수다. (typeof찍어보면됨)

prototype속성은 함수만 가지고 있고, __proto__는 모든 객체가 전부 갖고 있는 속성이다.

따라서 me, you에는 __proto__만 존재하고

Person에는 prototype, __proto__를 갖고 있는 것이다.

__proto__는 객체가 생성될 때 부모 함수의 Prototype Object를 가리킨다.

console.log(me.__proto__);// => {eyes:2, nose:1, constructor...};//가리키는 프로토타입객체 = Person.prototype
console.log(me.__proto__ === Person.prototype); // => true!
console.log(Person.__proto__); // => undefined 가리키는 부모가 없음

요약
  • 함수를 생성하면, new연산자를 쓸수 있는 권한, prototype Object이 생성.
  • new를 통해 생성된 객체는 자신의 부모를 가리키는 __proto__속성을 지님
  • __proto__속성으로 상위 부모의 prototype Object를 가리킬 수 있음.
  • 이 가리키는 방향은 그 상위부모를 다시 가리키므로 체인이라고 표현함.
  • 함수를 통해 생성된 객체는 함수의 prototype Object를 가리키고, 이 prototype Object에는 그 상위를 가리킬 수 있는 __proto__속성과 생성자를 가짐-> 객체의 생성자는 function Object(){...}이므로 함수를 통해 생성된 객체는 objecttoString과 같은 속성을 사용할 수 있는 것 => 프로토타입 체인을 통해서 가능해진 것


참고
  • JS와 프로토타입

  • (new연산자를 되도록 쓰지말고 되도록 리터럴을 통해 생성할 것을 권함. 인자에 따라 생성자함수가 다른 내장 생성자에게 객체생성 위임할 수 있어서 다른 객체가 반환되기도 한다 참고)

  • 어려운데 재밌네..

0개의 댓글