[자바스크립트] 프로토타입

[프로토타입]

- 자바스크립트 객체지향 방식

- 자바스크립트의 모든객체는 부모역할을 하는 객체와 연결되어있음

     => 클래스 기반 객체지향처럼 부모 역할 객체의 프로퍼티, 메서드를 상속개념(프로토타입체인)과 같이 받아올 수 있음 

     => 이러한 부모역할 객체를 프로토타입(Prototype)이라함

     => 부모역할 객체가 function이라면 prototype 속성이 있는데 이 프로퍼티에 공통 프로퍼티, 메서드를 정의함

     => 부모역할 객체가 객체리터럴로 생성된 객체라면 리터럴에 공통프로퍼티, 메서드를 정의함 

[prototype과 __proto__ 속성 차이]

(콘솔이미지 : function을 가지고 객체 생성하고 __proto__속성 리뷰)

1) function 객체에서 new를 통해 객체를 생성하였음

2) new를 통해 생성된 객체의 속성을 살펴보면 __proto__속성이 있음

- __proto__속성은 프로토타입(부모역할을 하는 객체 : 부모역할 객체의 프로퍼티, 메서드)을 의미하는 프로퍼티임

(콘솔 Person new함수로 생성된 객체의 __proto__와 Person의 prototype 속성 일치 비교 콘솔)

- prototype은 함수 객체의 원형 : 공통 프로퍼티, 메서드를 정의함 -> 생성자함수를 통해 생성된 객체에 이식(__proto__ > constructor 속성)

결론(생성자함수를 통해 생성된 객체의 관점에서)

1) prototype(+constructor 포함)은 부모역할 객체원형 (+ 객체에 프로퍼티, 메서드 추가 가능)

2) __proto__는 생성자함수를 통해 생성된 객체의 것, prototype의 속성과 값을 가진 객체

[프로토타입 체인]

- 프로토타입 체인이란 자바스크립트는 특정 객체의 프로퍼티나 메서드에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티, 메서드가 없다면 __proto__ 프로퍼티가 가리키는 링크를 따라 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메서드를 차례대로 검색하는 것을 말함

1) 객체리터럴 : 객체리터럴 방식은 Object() 생성자함수(부모역할 객체, 정확히 constructor 프로퍼티)로 객체를 생성하는 것을 단순화시킨 것

- __proto__ : Object() 생성자 함수를 뜻함, 콘솔 화살표를 누르면 어떤 프로퍼티와 메서드를 가지고 있는지 알 수 있음

(콘솔이미지 : person을 객체리터럴로 생성 후 dir로 person 프로퍼티 리스팅 후 __proto__ 프로퍼티 화살표 누르기)

2) 사용자정의 생성자함수 : 함수는 객체, 객체 원형 프로퍼티인 prototype을 가짐

- 함수선언식 : 기명함수(내부적으로는 함수표현식처럼 익명함수표현 됨)

- 함수표현식 : 익명함수

- Function() 생성자함수 : 함수선언식이나 표현식 모두 Function() 생성자함수로 함수를 생성한 것을 단순화시킨 것

- __proto__ : 생성자함수를 뜻함, 생성자함수 프로토타입과 연결되었음(프로토타입 체인)

(콘솔 : Person 생성자함수를 만들고 new로 객체를 생성한 후 콘솔)

[프로토타입 체인 동작조건]

- 객체의 프로퍼티나 메서드를 읽으려고 할 때 해당 객체에 없는 경우 상위 객체(연결)에 가져오려함(프로토타입 체인)

- 프로토타입 프로퍼티, 메서드를 체인해서 가져오는 것임을 잊지말아야함

- 객체.프로퍼티, 메서드 값을 수정한다고해서 프로토타입의 프로퍼티, 메서드가 변경되지않음(프로토타입 체인 동작X)

    => 객체 내 프로퍼티와 메서드가 없으면 정의하고 값을 할당하는 작업으로 받아들임

    => 체인이 깨지고 자체 프로퍼티, 메서드, 그에 대한 값을 가지는 것임

[프로토타입 확장]

- prototype 속성에 접근하여 일반 속성, 메서드를 정의해주면 해당 객체의 원형에 사용자 정의 프로퍼티, 메서드가 정의됨

- 정확한 것은 prototype(Object 객체) > constructor > 하위 속성 

- 앞서 계속해서 말한 공통 프로퍼티, 메서드 정의할 때 사용

- 생성자함수 prototype에 정의를 해두고 생성자함수를 통해 생성하는 객체에 프로퍼티와 메서드를 체인시킴(값 참조)

[프로토타입 변경]

- 객체를 생성하면 프로토타입은 결정이 됨(객체리터럴 : Object, 생성자함수 : 함수)

- 객체리터럴은 객체 그대로이기때문에 객체 정의 부분에서 바꾸면 됨, 다만 프로토타입 체인은 된다는 것

- 생성자함수를 통한 생성 객체는 원형을 만들어둠 

- 생성자함수를 통해 생성된 객체의 프로토타입 변경은 함수명.prototype 객체에 접근하여 프로토타입을 변경하면 됨

- 변경된 프로토타입의 적용 범위 시작은 변경 이후 생성된 객체부터임 : 추가하는 것과는 전혀 다름