19장 프로토타입 (1)

• 자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 타입 패러다임 프로그래밍 언어다.
• C++ 나 자바 같은 클래스 기반 언어의 특징인 클래스와 상속, 캡슐화를 위한 키워드인 public, private, protected 이 없어서 자바스크립트는 객체지향 언어가 아니라고 오해하는 경우도 있다. 🤯🤯
• 자바스크립트는 객체 기반의 프로그래밍 언어이며 자바스크립트를 이루고 있는 거의 모든 것이 객체다. 원시 타입의 값을 제외한 나머지 값들(함수, 배열, 정규 표현식 등)은 모두 객체다.

19.1 객체지향 프로그래밍

• 절차지향적 관점에서 벗어나 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 말한다.
• 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조를 객체라 하며, 객체지향 프로그래밍은 독립적인 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임이다.
• 객체지향 프로그래밍은 객체의 상태를 나타내는 데이터와 상태 데이터를 조작할 수 있는 동작을 하나의 논리적인 단위로 묶어 생각한다.

19.2 상속과 프로토타입

• 상속은 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것을 말한다.
• 자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거한다.
• 상속은 코드의 재사용이란 관점에서 매우 유용하다.

19.3 프로토타입 객체

• 프로토타입 객체란 객체지향 프로그래밍의 근간을 이루는 객체 간 상속을 구현하기 위해 사용된다.
• 모든 객체는 [[Prototype]]이란 내부 슬롯을 가지며, 이 내부 슬롯의 값은 프로토타입의 참조다.
• 객체가 생성될 때 객체 생성 방식에 따라 프로토타입이 결정되고 [[Prototype]]에 저장된다.

19.3.1 __proto__ 접근자 프로퍼티

• 모든 객체는 __proto__ 접근자 프로퍼티를 통해 자신의 프로토타입, 즉 [[Prototype]] 내부 슬롯에 간접적으로 접근할 수 있다.

• person 객체의 프로토타입인 Object.prototype이다.
• __proto__ 접근자 프로퍼티를 통해 person 객체의 [[Prototype]] 내부 슬롯이 가리키는 객체인 Object.prototype에 접근한 결과를 크롬 브라우저가 콘솔에 표시한 것이다.

__proto__ 는 접근자 프로퍼티다.

• 내부 슬롯은 프로퍼티가 아니다. JS 는 원칙적으로 내부 슬롯과 내부 메서드에 직접적으로 접근할 수 있는 수단을 제공하기는 한다.
• [[Prototype]] 내부 슬롯에도 직접 접근할 수 없으며 __proto__ 접근자 프로퍼티를 통해 간접적으로 [[Prototype]] 내부 슬롯의 값인 프로토타입에 접근할 수 있다.

__proto__ 는 접근자 프로퍼티는 상속을 통해 사용된다.

• __proto__ 접근자 프로퍼티는 객체가 직접 소유하는 프로퍼티가 아니라 Object.prototype의 프로퍼티다.
• 모든 객체는 상속을 통해 Object.prototype.__proto__ 접근자 프로퍼티를 사용할 수 있다.
  • Object.prototype : 모든 객체는 프로토타입의 계층 구조인 프로토타입 체인에 묶여 있다. JS 엔진은 객체의 프로퍼티에 접근 하려고 할 때 해당 객체에 접근하려는 프로퍼티가 없다면 __proto__ 접근자 프로퍼티가 가르키니느 참조를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색한다. 프로토타입 체인의 종점, 즉 프로토타입 체인의 최상위 객체는 Object.prototype이며, 이 객체의 프로퍼티와 메서드는 모든 객체에 상속된다.

__proto__ 접근자 프로퍼티를 통해 프로토타입에 접근하는 이유

• 상호 참조에 의해 프로토타입 체인이 생성되는 것을 방지하기 위해서이다.
• 프로토타입 체인은 단방향 링크드 리스트로 구현되어야 한다.
• 순환 참조하는 프로토타입 체인이 만들어지면 프로토타입 체인 종점이 존재하지 않기 때문에 프로토타입 체인에서 프로퍼티를 검색할 때 무한 루프에 빠진다.

__proto__ 접근자 프로퍼티를 코드 내에서 직접 사용하는 것은 권장하지 않는다.

• 직접 상속을 통해 Object.prototype을 상속받지 않는 객체를 생성할 수도 있기 때문에 __proto__ 접근자 프로퍼티를 사용할 수 없는 경우가 있다.
• __proto__ 접근자 프로퍼티 대신 프로토타입의 참조를 취득하고 싶은 경우 Object.getPrototypeOf 메서드를 사용하고, 교체하고 싶을 경우에는 Object.setPrototypeOf메서드를 사용하자.

19.3.2 함수 객체의 prototype 프로퍼티

• 함수 객체만이 소유하는 prototype 프로퍼티는 생성자 함수가 생성할 인스턴스의 프로토 타입을 가리킨다.
• prototype 프로퍼티는 생성자 함수가 생성할 객체(인스턴스)의 프로토타입을 가리킨다. 따라서 생성자 함수로서 호출할 수 없는 함수, 즉 non-constructor인 화살표 함수와 ES6 메서드 축약 표현으로 정의한 메서드는 prototype 프로퍼티를 소유하지 않으며 프로토타입도 생성하지 않는다.
• 모든 객체가 가지고 있는 __proto__ 접근자 프로퍼티와 함수 객체만이 가지고 있는 prototype 프로퍼티는 결국 동일한 프로토타입을 가르킨다. 하지만 프로퍼티를 사용하는 주체가 다르다.
  • __proto__ 접근자 프로퍼티 : 사용주체는 모든 객체로 객체가 자신의 프로토타입에 접근 또는 교체하기 위해 사용한다.
  • prototype 프로퍼티 : 사용주체는 생성자 함수로 생성자 함수가 자신이 생성할 객체의 프로토타입을 할당하기 위해 사용한다.

19.3.3 프로토타입의 constructor 프로퍼티와 생성자 함수

• 모든 프로토타입은 constructor 프로퍼티를 갖는다. 이 constructor 프로퍼티는 prototype 프로퍼티로 자신을 참조하고 있는 생성자 함수를 가리킨다. 이는 생성자 함수가 생성될 때(함수 객체가 생성될 때) 이루어진다.

🌳 느낀점

• __proto__ 접근자 프로퍼티..알다가도 모를 녀석..아니 그냥 모르겠는 녀석.....

위 글은 위키북스의 모던 자바스크립트 Deep Dive 를 읽고 정리한 내용입니다.