하루 30분 TIL

230219 30분 TIL

devSoo 2023. 2. 19. 14:34

1. Prototype 

  • 자바스크립트는 프로토 타입 기반 언어이다. 
  • 클래스라는 개념이 없기 때문에 프로토타입으로 상속을 흉내내도록 구현해서 사용(ES6에서 클래스 문법이 추가됐지만 클래스 기반으로 바뀐것은 아님)
function Person() {
  this.eyes = 2;
  this.nose = 1;
}
var kim  = new Person();
var park = new Person();
console.log(kim.eyes);  // => 2
console.log(kim.nose);  // => 1
console.log(park.eyes); // => 2
console.log(park.nose); // => 1

kim과 park은 eyes와 nose를 공통적으로 가지는데 메모리에는 eyes와 noserk 두 개씩 총 4개 할당됨

만약 100개를 만들면 200개의 변수가 메모리에 할당되는데 이 문제를 프로토타입이 해결해줌

 

function Person() {}
Person.prototype.eyes = 2;
Person.prototype.nose = 1;
var kim  = new Person();
var park = new Person():
console.log(kim.eyes); // => 2

비유적으로 프로토타입은 부모의 유전자 조작을 하는 것과 같다. 

부모의 유전자가 바뀌면 자식도 유전자를 상속받기 때문에 그대로 갖다 쓸 수 있다.

 

Prototype Link와 Prototype Object

  • 자바스크립트에는 Prototype Link 와 Prototype Object 이 존재하는데 이것을 통틀어 Prototype이라고 부름

 

Prototype Object

  • 객체는 언제나 함수로 생성됨
function Person() {} // => 함수
var personObject = new Person(); // => 함수로 객체를 생성


// 아래처럼 일반적인 객체 생성도 얼핏보면 함수랑 전혀 상관없어 보이지만
// 자바스크립트에서 제공하는 Object 함수를 사용해서 객체를 만드는 것이다. 
var obj = {};
var obj = new Object();
  • personObject 객체는 Person이라는 함수로 생성된 객체이다. 
  • Object와 마찬가지로 Fuction, Array도 모두 함수로 정의되어 있음 

근데 이것이 Prototype Object랑 무슨 상관이 있을까? 

 

1.해당 함수에 Constructor(생성자) 자격 부여

: Constructor 자격이 부여되면 new를 통해 객체를 만들어낼 수 있음

-> 이것이 함수만 new 키워드를 사용할 수 있는 이유

 

 

constructor가 아니면 new를 사용할 수 없음

 

 

2.해당 함수의 Prototype Object 생성 및 연결

 

  • 함수를 정의하면 함수만 생성되는게 아니라 Prototype Object 도 같이 생성됨 
  • 생성된 함수는 prototype이라는 속성을 통해 Prototype Object에 접근 가능 
  • Prototype Object는 일반적 객체와 같고 기본적 속성으로 constructor와 __proto__를 가지고 있음

prototype 속성으로 Prototype Object에 접근

  • constructor는 Prototype Object와 같이 생성되었던 함수를 가리키고 있음
  • __proto__ 는 Prototype Link 이다. 

위의 예를 다시 보자 

function Person() {}
Person.prototype.eyes = 2;
Person.prototype.nose = 1;
var kim  = new Person();
var park = new Person():
console.log(kim.eyes); // => 2
...
  • Prototype Object 객체는 일반적인 객체이므로 속성을 마음대로 추가/삭제 가능 
  • kim과 park은 Person 함수를 통해 생성 되었으니 Person.prototype을 참조 가능

Prototype Link

  • 위 예를 보자 kim에는 eyes라는 속성이 없는데 kim.eyse를 실행하면 2를 참조하고 있다.
    (Prototype Object에 존재하는 eyes 속성을 참조한 것)
  • 이것이 가능한 이유는 kim이 가지고 있는 __proto__ 때문임 
  • prototype 속성은 함수만 가지고 있는데 반해, __proto__ 속성은 모든 객체가 가지고 있음

  • __proto__ 는 객체가 생성될 때 조상이었던 함수의 Prototype Object 를 가리킴 (kim 객체는 Person 함수로 부터 생성
    되었으니 Person 함수의 Prototype Object를 가리킴)

 

 

객체, 함수, Prototype Object의 관계

  • kim 객체가 eyes를 직접 가지고 있지 않기 때문에 eys 속성을 찾을 때 까지 상위 프로토타입을 탐색함 
  • 최상위인 Object의 Prototype Object까지 도달했는데도 못찾았을 경우 undefined를 리턴함 
  • 이렇게 __proto__속성을 통해 상위 프로토타입과 연결되어있는 형태를 프로토타입 체인(Chain)이라고 함 

프로토타입 체인, 최상위는 Object

이런 프로토타입 체인 구조 때문에 모든 객체는 Object의 자식이라고 불리고, Object Prototype Object에 있는 모든 속성을 사용할 수 있는거임!! 

결국 kim객체에서 toString을 사용할 수 있는 것도 이런 프로토타입 체인구조 때문임! 

 

Object속성인 toString함수를 kim도 사용가능

 

참고자료: https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67