🌒 JavaScript Prototype

📚 Contents

1. Prototype...why?

2. .prototype

3. __proto__

4. .constructor

5. new is not New!

6. Object.create

7. instanceof

Prototype... Why? 🤔

자바스크립트는 왜 프로토타입 기반(Prototype-based Language) 언어일까요?

이 분에게 질문할 기회가 주어진다면 저는 꼭

자바스크립트가 왜 프로토타입 개념을 차용했는지 물어보고 싶어요

직접 물어볼 수 없으니 여러가지 뒷조사를 합니다 👀

2008. 4. 3 Brandon Eich <Popularity> 중에서

💫 Self

Self is an object-oriented programming language

based on the concept of prototypes.

Self는 1987년 만들어진 프로토타입 기반 프로그래밍 언어입니다

아마 이 언어로부터 영감을 받아

프로토타입 개념을 차용하지 않았나 하는 뇌피셜... 🙉

💫 Self의 위키피디아 문서에는 프로토타입 개념으로

OOP 의 어떤 문제를 해결 하고 싶었는지 적혀있어요

🚘 탈 것에 대한 클래스 계층 정의를 먼 미래까지 예측해서 미리 할 수는 없습니다

 Vehicle ⊇ { Sports Car, Flatbed Truck, SUV, ... }  ← Bob's Sports Car

여기에 어떤 것들이 어떤 기능으로 들어갈지 알 수 없어요

🚘 하지만 원형(Prototype)의 사본을 만들고, 기능을 추가한다면?

DoonDoony's Sports Car = Vehicle + { Super Engine, 2 Doors ... } 

둔둔이의 스포츠카에 필요한 기능을 만듭니다

TT's Sports Car = DoonDoony's Sports Car + { Super Engine, 4 Doors ... } 

둔둔이의 스포츠카가 맘에 든다면 사본을 만들어서 커스터마이즈 합니다

Vehicle + Features

🚔 클래스를 이용해 Porsche 911, Audi R8, BMW Z8 을 만든다면...?

(Optional) 탈 것 인터페이스를 만듦

→ (Optional) 스포츠카 추상 클래스를 만듦

→ 포르쉐 911, 아우디 R8, BMW Z8 구상 클래스를 작성

→ 포르쉐 911 인스턴스들이 막 돌아다님 (DoonDoony's, TT's, Coco's ...)

→ DoonDoony의 차에만 어떤 기능을 추가하고 싶어

→ 아니 왜? 그냥 포르쉐 911 클래스 틀 안에서만 움직여줘 🙈

🚔 프로토타입을 이용해 Porsche 911, Audi R8, BMW Z8 을 만든다면...?

(Optional) 탈 것 프로토타입

→ (Optional) 탈 것을 복사한 스포츠카 프로토타입

→ 포르쉐 911, 아우디 R8, BMW Z8는 스포츠카의 사본 + 기능

→ DoonDoony, TT, Coco 는 맘에 드는 차의 사본을 만들어서 타고다닌다

→ DoonDoony 차에만 어떤 기능을 추가하고 싶다면

→ 추가하면 됨!

🚔 하고 싶었던 이야기

자바스크립트에는 인스턴스가 없어요 🙅‍♀️

클래스 - 인스턴스가 아니라 즉시 동작 가능한 객체와 그 객체의 사본뿐입니다 🙆‍♀️

출처: http://m.blog.daum.net/guddk33/2

저는 놀랐습니다

인스턴스가 없는 언어에서 이 얼마나 해괴망측한 일을 했던가...

.prototype 📦

함수 객체만 (Function) 갖고 있는 프로퍼티 입니다

왜냐면 함수를 만들면 생겨요 (룰 입니다)

.prototype 프로퍼티가 안생기게 함수를 만들 수 있으면 알려주세요

📦 함수객체를 만들면 생기는 일

prototype

constructor

CreamHeroes

CreamHeroes.prototype

[[prototype]]

[[prototype]]

constructor

Object.prototype

[[prototype]]

null

What the...

TL; DR

1. 함수를 생성하면 자동으로 prototype 프로퍼티가 생긴다

2. prototype.constructor 프로퍼티가 생긴다

3. prototype.constructor 프로퍼티는 함수 나 자신이다

4. 아스날

[[prototype]] (a.k.a __proto__) 📦

모든 객체가 갖고 있는 히든(이지만 보이는) 프로퍼티 입니다

이것도 그냥 객체를 만들면 생겨요 (브랜던 아이크 센세의 룰 입니다)

객체의 원형 (prototype) 을 가리킵니다!

객체 지향 방식으로 이야기 하자면

나의 부모 역할을 하는 객체의 프로토타입 프로퍼티를 가리킵니다.

프로토타입 기반 프로그래밍 관점에서는

하나의 사본, 또는 연관된(linked) 객체의 관점으로 생각해야 하기 때문에

부모라고 단정지어 말하긴 어렵습니다

🤔 [[prototype]] 은 그래서 뭘 하나요?

프로토타입 체이닝을 구현합니다

객체의 프로퍼티는 프로토타입 체이닝에 의해 탐색됩니다

프로토타입은 객체를 관통하는 거대한 링크드 리스트와 같습니다

🤔 [[prototype]] 은 그래서 뭘 하나요?

.constructor 📦

함수 객체만 (Function) 갖고 있는 prototype의 프로퍼티 중 하나입니다

일반적으로, 함수 자기 자신을 가리킵니다

🙋‍♀️ .constructor 는 함수 자신을 가리킵니다

new is not New! 🤷‍♂️

🤷‍♂️ 이게 무슨 얘기에요?

new 는 constructor 를 이용하여, 새로운 객체(!) 를 생성합니다

(인스턴스 같은게 아니라구요)

new 는 모든 함수 앞에 호출이 가능합니다 (.constructor에 변경이 없다면)

🤷‍♂️ What happens when "new"?

🤷‍♂️ "new" 를 사용해서 객체를 생성한 이유?

new 외에는 객체의 __proto__ 속성에 접근해서

__proto__ 값을 함수의 prototype 으로 지정할 방법이 없었습니다(!)

🤷‍♂️ setPrototype, Object.create가 있는 지금은?

prototype 이라는 객체를 빌려쓰지 않아도 됩니다

진정 객체를 만들고, 그 객체를 체이닝 하면 훨씬 낫잖아요?

이를테면, 그 동안은 함수를 만들었을때 딸려오는 prototype 객체라는 사은품을

너무 유용하게 사용했던거죠

Object.create 👨‍👩‍👧‍👦

👨‍👩‍👧‍👦 아니 이거 개발자한테 참 좋은데...

👨‍👩‍👧‍👦 Object.create 의 효능

Object.create 를 사용하시면

1. 함수의 prototype 을 빌려 쓰지 않아도 됩니다

2. prototype, constructor (원래 신경쓰지 않아도 되지만) 을 몰라도 됩니다

👨‍👩‍👧‍👦 프로토타입 기반 언어란, 원래 이렇게 한단 말입니다!

프로토타입 기반 언어는,

원래 주어진 객체(Object, Array, Function, Symbol...)를 이용하여

위임과정을 통해 객체를 만들어 냅니다

객체는 계속해서 연결관계(Object.create)만을 가집니다 (참조)

자바스크립트에서 원시값 외의 모든 건 참조 형태로 전달되는건 이와 관련 있지 않을까요

👨‍👩‍👧‍👦 그럼 클래스 기반 언어는여

클래스 기반 언어는 "클래스" 라는 틀을 이용해

(붕어빵 비유 안했습니다 공격 ㄴㄴ)

객체를 만들어 냅니다

객체는 클래스로 부터 태어나는데

클래스 라는 객체는 또 어떤 클래스로, 그 클래스는 또 어떤 클래스로.... 부터

에라 모르겠다 PPAP

👨‍👩‍👧‍👦 그럼 클래스 기반 언어는여

자바 언어의 경우 모든 것의 조상 클래스는 java.lang.Class 라고 합니다 (아니면 알려주세요!)

근데... 그럼 그 클래스는 어디서 왔죠?

"태초에 클래스가 있었다" 정도로 퉁쳐야 합니다

👨‍👩‍👧‍👦 클래스 기반 언어가 이상하다는게 아니라...

프로토타입 언어의 탄생 배경에, 클래스 기반 언어의 한계에 대해 이야기 했었는데요

프로토타입 기반 언어에서 클래스 기반 언어의 기능들을 흉내낼 수 있지만

그 반대는 어렵다는건 아실겁니다

(클래스가 정의 된 뒤에 몽키패칭, 인스턴스에서만 쓸 메서드 추가 등)

어떤 주어진 객체와, 그것을 이용해 prototype 을 만들고, 더 나은 제품을 만들고

서로간의 연결 고리를 갖고 하는것이 특징이라고 할 수 있습니다!

👨‍👩‍👧‍👦 많이 보셨을 Object.create 의 동작

1. 인자로 프로토타입과, 프로퍼티로 추가할 객체를 받습니다

2. 프로토타입이 Object나 null 이 아니라면 에러가 발생합니다

3. 빈 함수를 하나 만들고, 그 프로토타입을 전달된 인자로 지정합니다.
    만약 인자로 전달된 프로토타입이 null 이라면 빈 객체를 매핑합니다

4. 추가 전달된 프로퍼티를 할당합니다

5. new 연산자를 통해 빈 함수의 prototype을 반환할 객체에 연결합니다

    - new의 동작을 그대로 수행합니다

    - 빈 객체 만들고

    - this 바인딩 하고

    - 반환값이 object 면 그걸로 할당, 아니면 그냥 빈 객체

6. 만약 prototype 인자의 값이 null 이라면, 

    반환될 객체의 프로토타입 링크를 null 로 만들고, 프로토타입 체인을 끊습니다

7. 생성된 객체를 반환합니다

instanceof 💑

💑 instanceof 

💑 instanceof 

💑 instanceof in Object.create

instanceof 의 우항은 필연적으로 callable 한 객체여야 합니다

💑 Object.create를 위한 혈통 검사

isPrototypeOf 로 확인할 수 있습니다
(심지어 함수명도 instance 같은 애매한 키워드가 아닙니다)

Appendix 🐶

🐶 class keyword는 어떻게 동작할까요?

이 코드가...

🐶 class keyword는 어떻게 동작할까요?

이렇게 됩니다... (우리 클래스가 달라졌어요)