π JavaScript Prototype
2018. 11. 10
Kiwoong Kwon
π Contents
1. Prototype...why?
2. .prototype
3. __proto__
4. .constructor
5. new is not New!
6. Object.create
7. instanceof
Prototype... Why? π€
Prototype... Why? π€
μλ°μ€ν¬λ¦½νΈλ μ νλ‘ν νμ κΈ°λ°(Prototype-based Language) μΈμ΄μΌκΉμ?
μ΄ λΆμκ² μ§λ¬Έν κΈ°νκ° μ£Όμ΄μ§λ€λ©΄ μ λ κΌ
μλ°μ€ν¬λ¦½νΈκ° μ νλ‘ν νμ κ°λ μ μ°¨μ©νλμ§ λ¬Όμ΄λ³΄κ³ μΆμ΄μ
Prototype... Why? π€
μ§μ λ¬Όμ΄λ³Ό μ μμΌλ μ¬λ¬κ°μ§ λ·μ‘°μ¬λ₯Ό ν©λλ€ π
Prototype... Why? π€
Iβm not proud, but Iβm happy that I chose Scheme-ish first-class functions and
Self-ish (albeit singular) prototypes as the main ingredients.
(λΆλλ½μ§λ§) Schemeμ μΌκΈ ν¨μμ Selfμ (νλμ κ°λ λΏμ΄μ§λ§) νλ‘ν νμ μ
μ£Όμ κ΅¬μ± μμλ‘ μ ννκ² λμ΄ κΈ°μ©λλ€.
Prototype... Why? π€
π« Self
Prototype... Why? π€
Self is an object-oriented programming language
based on the concept of prototypes.
Selfλ 1987λ
λ§λ€μ΄μ§ νλ‘ν νμ
κΈ°λ° νλ‘κ·Έλλ° μΈμ΄μ
λλ€
μλ§ μ΄ μΈμ΄λ‘λΆν° μκ°μ λ°μ
νλ‘ν νμ κ°λ μ μ°¨μ©νμ§ μμλ νλ λνΌμ ... π
Prototype... Why? π€
π« Selfμ μν€νΌλμ λ¬Έμμλ νλ‘ν νμ κ°λ μΌλ‘
OOP μ μ΄λ€ λ¬Έμ λ₯Ό ν΄κ²° νκ³ μΆμλμ§ μ νμμ΄μ
Unless one can predict with certainty what qualities a set of objects and classes
will have in the distant future, one cannot design a class hierarchy properly.
λ¨Ό λ―Έλμ κ°μ²΄μ ν΄λμ€λ€μ΄ κ°μ§ νΉμ±(qualities) μ λν΄ μμΈ‘ν μ μλ€λ©΄
ν΄λμ€ κ³μΈ΅ ꡬ쑰μ λν΄ μ¬λ°λ₯΄κ² μ€κ³ν μ μλ€
Prototype... Why? π€
π ν κ²μ λν ν΄λμ€ κ³μΈ΅ μ μλ₯Ό λ¨Ό λ―ΈλκΉμ§ μμΈ‘ν΄μ 미리 ν μλ μμ΅λλ€
Β Vehicle β { Sports Car, Flatbed Truck, SUV, ... } Β β Bob's Sports Car
μ¬κΈ°μ μ΄λ€ κ²λ€μ΄ μ΄λ€ κΈ°λ₯μΌλ‘ λ€μ΄κ°μ§ μ μ μμ΄μ
Prototype... Why? π€
π νμ§λ§ μν(Prototype)μ μ¬λ³Έμ λ§λ€κ³ , κΈ°λ₯μ μΆκ°νλ€λ©΄?
DoonDoony's Sports Car = Vehicle + { Super Engine, 2 Doors ... }Β
λλμ΄μ μ€ν¬μΈ μΉ΄μ νμν κΈ°λ₯μ λ§λλλ€
TT's Sports Car = DoonDoony's Sports CarΒ + { Super Engine, 4 Doors ... }Β
λλμ΄μ μ€ν¬μΈ μΉ΄κ° λ§μ λ λ€λ©΄ μ¬λ³Έμ λ§λ€μ΄μ 컀μ€ν°λ§μ΄μ¦ ν©λλ€
Vehicle + Features
Prototype... Why? π€
π ν΄λμ€λ₯Ό μ΄μ©ν΄ Porsche 911, Audi R8, BMW Z8 μ λ§λ λ€λ©΄...?
(Optional) ν κ² μΈν°νμ΄μ€λ₯Ό λ§λ¦
β (Optional) μ€ν¬μΈ μΉ΄ μΆμ ν΄λμ€λ₯Ό λ§λ¦
β ν¬λ₯΄μ 911, μμ°λ R8, BMW Z8 ꡬμ ν΄λμ€λ₯Ό μμ±
β ν¬λ₯΄μ 911 μΈμ€ν΄μ€λ€μ΄ λ§ λμλ€λ (DoonDoony's, TT's, Coco's ...)
β DoonDoonyμ μ°¨μλ§ μ΄λ€ κΈ°λ₯μ μΆκ°νκ³ μΆμ΄
β μλ μ? κ·Έλ₯ ν¬λ₯΄μ 911 ν΄λμ€ ν μμμλ§ μμ§μ¬μ€ π
Prototype... Why? π€
π νλ‘ν νμ μ μ΄μ©ν΄ Porsche 911, Audi R8, BMW Z8 μ λ§λ λ€λ©΄...?
(Optional) ν κ² νλ‘ν νμ
β (Optional) ν κ²μ 볡μ¬ν μ€ν¬μΈ μΉ΄ νλ‘ν νμ
β ν¬λ₯΄μ 911, μμ°λ R8, BMW Z8λ μ€ν¬μΈ μΉ΄μ μ¬λ³Έ + κΈ°λ₯
β DoonDoony, TT, Coco λ λ§μ λλ μ°¨μ μ¬λ³Έμ λ§λ€μ΄μ νκ³ λ€λλ€
β DoonDoony μ°¨μλ§ μ΄λ€ κΈ°λ₯μ μΆκ°νκ³ μΆλ€λ©΄
β μΆκ°νλ©΄ λ¨!
Prototype... Why? π€
π νκ³ μΆμλ μ΄μΌκΈ°
μλ°μ€ν¬λ¦½νΈμλ μΈμ€ν΄μ€κ° μμ΄μ π ββοΈ
ν΄λμ€ - μΈμ€ν΄μ€κ° μλλΌ μ¦μ λμ κ°λ₯ν κ°μ²΄μ κ·Έ κ°μ²΄μ μ¬λ³ΈλΏμ λλ€ πββοΈ
μΆμ²: http://m.blog.daum.net/guddk33/2
μ λ λλμ΅λλ€
μΈμ€ν΄μ€κ° μλ μΈμ΄μμ μ΄ μΌλ§λ ν΄κ΄΄λ§μΈ‘ν μΌμ νλκ°...
.prototype π¦
.prototype π¦
ν¨μ κ°μ²΄λ§ (Function) κ°κ³ μλ νλ‘νΌν° μ λλ€
μλλ©΄ ν¨μλ₯Ό λ§λ€λ©΄ μ겨μ (λ£° μ λλ€)
Β
.prototype νλ‘νΌν°κ° μμκΈ°κ² ν¨μλ₯Ό λ§λ€ μ μμΌλ©΄ μλ €μ£ΌμΈμ
.prototype π¦
π¦ ν¨μκ°μ²΄λ₯Ό λ§λ€λ©΄ μκΈ°λ μΌ
.prototype π¦
prototype
constructor
CreamHeroes
CreamHeroes.prototype
[[prototype]]
[[prototype]]
constructor
Object.prototype
[[prototype]]
null
Function.prototype
.prototype π¦
What the...
.prototype π¦
TL; DR
1. ν¨μλ₯Ό μμ±νλ©΄ μλμΌλ‘ prototype νλ‘νΌν°κ° μκΈ΄λ€
2. prototype.constructor νλ‘νΌν°κ° μκΈ΄λ€
3. prototype.constructor νλ‘νΌν°λ ν¨μ λ μμ μ΄λ€
4. μμ€λ
[[prototype]] (a.k.a __proto__) π¦
[[prototype]] (a.k.a __proto__) π¦
λͺ¨λ κ°μ²΄κ° κ°κ³ μλ νλ (μ΄μ§λ§ 보μ΄λ)Β νλ‘νΌν° μ λλ€
μ΄κ²λ κ·Έλ₯ κ°μ²΄λ₯Ό λ§λ€λ©΄ μ겨μ (λΈλλ μμ΄ν¬ μΌμΈμ λ£° μ λλ€)
[[prototype]] (a.k.a __proto__) π¦
[[prototype]] (a.k.a __proto__) π¦
κ°μ²΄μ μν (prototype) μ κ°λ¦¬ν΅λλ€!
Β
κ°μ²΄ μ§ν₯ λ°©μμΌλ‘ μ΄μΌκΈ° νμλ©΄
λμ λΆλͺ¨ μν μ νλ κ°μ²΄μ νλ‘ν νμ νλ‘νΌν°λ₯Ό κ°λ¦¬ν΅λλ€.
Β
νλ‘ν νμ κΈ°λ° νλ‘κ·Έλλ° κ΄μ μμλ
νλμ μ¬λ³Έ, λλ μ°κ΄λ(linked) κ°μ²΄μ κ΄μ μΌλ‘ μκ°ν΄μΌ νκΈ° λλ¬Έμ
λΆλͺ¨λΌκ³ λ¨μ μ§μ΄ λ§νκΈ΄ μ΄λ ΅μ΅λλ€
π€ [[prototype]] μ κ·Έλμ λ νλμ?
[[prototype]] (a.k.a __proto__) π¦
νλ‘ν νμ 체μ΄λμ ꡬνν©λλ€
Β
κ°μ²΄μ νλ‘νΌν°λ νλ‘ν νμ 체μ΄λμ μν΄ νμλ©λλ€
νλ‘ν νμ μ κ°μ²΄λ₯Ό κ΄ν΅νλ κ±°λν λ§ν¬λ 리μ€νΈμ κ°μ΅λλ€
π€ [[prototype]] μ κ·Έλμ λ νλμ?
[[prototype]] (a.k.a __proto__) π¦
.constructor π¦
.constructor π¦
ν¨μ κ°μ²΄λ§ (Function) κ°κ³ μλ prototypeμ νλ‘νΌν° μ€ νλμ λλ€
μΌλ°μ μΌλ‘, ν¨μ μκΈ° μμ μ κ°λ¦¬ν΅λλ€
.constructor π¦
πββοΈ .constructor λ ν¨μ μμ μ κ°λ¦¬ν΅λλ€
new is not New! π€·ββοΈ
new is not New! π€·ββοΈ
π€·ββοΈ μ΄κ² λ¬΄μ¨ μκΈ°μμ?
new λ constructor λ₯Ό μ΄μ©νμ¬, μλ‘μ΄ κ°μ²΄(!) λ₯Ό μμ±ν©λλ€
(μΈμ€ν΄μ€ κ°μκ² μλλΌκ΅¬μ)
Β
new λ λͺ¨λ ν¨μ μμ νΈμΆμ΄ κ°λ₯ν©λλ€ (.constructorμ λ³κ²½μ΄ μλ€λ©΄)
new is not New! π€·ββοΈ
new is not New! π€·ββοΈ
π€·ββοΈ "new" λ₯Ό μ¬μ©ν΄μ κ°μ²΄λ₯Ό μμ±ν μ΄μ ?
new μΈμλ κ°μ²΄μ __proto__ μμ±μ μ κ·Όν΄μ
__proto__ κ°μ ν¨μμ prototype μΌλ‘ μ§μ ν λ°©λ²μ΄ μμμ΅λλ€(!)
new is not New! π€·ββοΈ
π€·ββοΈ setPrototype, Object.createκ° μλ μ§κΈμ?
prototype μ΄λΌλ κ°μ²΄λ₯Ό λΉλ €μ°μ§ μμλ λ©λλ€
μ§μ κ°μ²΄λ₯Ό λ§λ€κ³ , κ·Έ κ°μ²΄λ₯Ό 체μ΄λ νλ©΄ ν¨μ¬ λ«μμμ?
Β
μ΄λ₯Όν λ©΄, κ·Έ λμμ ν¨μλ₯Ό λ§λ€μμλ λΈλ €μ€λ prototype κ°μ²΄λΌλ μ¬μνμ
λ무 μ μ©νκ² μ¬μ©νλκ±°μ£
Object.create π¨βπ©βπ§βπ¦
Object.create π¨βπ©βπ§βπ¦
π¨βπ©βπ§βπ¦ μλ μ΄κ±° κ°λ°μνν μ°Έ μ’μλ°...
Object.create π¨βπ©βπ§βπ¦
π¨βπ©βπ§βπ¦ Object.create μ ν¨λ₯
Object.create λ₯Ό μ¬μ©νμλ©΄
1. ν¨μμ prototype μ λΉλ € μ°μ§ μμλ λ©λλ€
2. prototype, constructor (μλ μ κ²½μ°μ§ μμλ λμ§λ§) μ λͺ°λΌλ λ©λλ€
Object.create π¨βπ©βπ§βπ¦
π¨βπ©βπ§βπ¦ νλ‘ν νμ κΈ°λ° μΈμ΄λ, μλ μ΄λ κ² νλ¨ λ§μ λλ€!
νλ‘ν νμ κΈ°λ° μΈμ΄λ,
Β
μλ μ£Όμ΄μ§ κ°μ²΄(Object, Array, Function, Symbol...)λ₯Ό μ΄μ©νμ¬
μμκ³Όμ μ ν΅ν΄ κ°μ²΄λ₯Ό λ§λ€μ΄ λ λλ€
Β
κ°μ²΄λ κ³μν΄μ μ°κ²°κ΄κ³(Object.create)λ§μ κ°μ§λλ€ (μ°Έμ‘°)
μλ°μ€ν¬λ¦½νΈμμ μμκ° μΈμ λͺ¨λ 건 μ°Έμ‘° ννλ‘ μ λ¬λλ건 μ΄μ κ΄λ ¨ μμ§ μμκΉμ
Object.create π¨βπ©βπ§βπ¦
π¨βπ©βπ§βπ¦ κ·ΈλΌ ν΄λμ€ κΈ°λ° μΈμ΄λμ¬
ν΄λμ€ κΈ°λ° μΈμ΄λ "ν΄λμ€" λΌλ νμ μ΄μ©ν΄
(λΆμ΄λΉ΅ λΉμ μνμ΅λλ€ κ³΅κ²© γ΄γ΄)
κ°μ²΄λ₯Ό λ§λ€μ΄ λ λλ€
Β
κ°μ²΄λ ν΄λμ€λ‘ λΆν° νμ΄λλλ°
ν΄λμ€ λΌλ κ°μ²΄λ λ μ΄λ€ ν΄λμ€λ‘, κ·Έ ν΄λμ€λ λ μ΄λ€ ν΄λμ€λ‘.... λΆν°
μλΌ λͺ¨λ₯΄κ² λ€ PPAP
Object.create π¨βπ©βπ§βπ¦
π¨βπ©βπ§βπ¦ κ·ΈλΌ ν΄λμ€ κΈ°λ° μΈμ΄λμ¬
μλ° μΈμ΄μ κ²½μ° λͺ¨λ κ²μ μ‘°μ ν΄λμ€λ java.lang.Class λΌκ³ ν©λλ€ (μλλ©΄ μλ €μ£ΌμΈμ!)
Β
κ·Όλ°... κ·ΈλΌ κ·Έ ν΄λμ€λ μ΄λμ μμ£ ?
"νμ΄μ ν΄λμ€κ° μμλ€" μ λλ‘ νμ³μΌ ν©λλ€
Object.create π¨βπ©βπ§βπ¦
π¨βπ©βπ§βπ¦ ν΄λμ€ κΈ°λ° μΈμ΄κ° μ΄μνλ€λκ² μλλΌ...
νλ‘ν νμ μΈμ΄μ νμ λ°°κ²½μ, ν΄λμ€ κΈ°λ° μΈμ΄μ νκ³μ λν΄ μ΄μΌκΈ° νμλλ°μ
Β
νλ‘ν νμ κΈ°λ° μΈμ΄μμ ν΄λμ€ κΈ°λ° μΈμ΄μ κΈ°λ₯λ€μ νλ΄λΌ μ μμ§λ§
κ·Έ λ°λλ μ΄λ ΅λ€λ건 μμ€κ²λλ€
(ν΄λμ€κ° μ μ λ λ€μ λͺ½ν€ν¨μΉ, μΈμ€ν΄μ€μμλ§ μΈ λ©μλ μΆκ° λ±)
Β
μ΄λ€ μ£Όμ΄μ§ κ°μ²΄μ, κ·Έκ²μ μ΄μ©ν΄ prototype μ λ§λ€κ³ , λ λμ μ νμ λ§λ€κ³
μλ‘κ°μ μ°κ²° κ³ λ¦¬λ₯Ό κ°κ³ νλκ²μ΄ νΉμ§μ΄λΌκ³ ν μ μμ΅λλ€!
Object.create π¨βπ©βπ§βπ¦
π¨βπ©βπ§βπ¦ λ§μ΄ λ³΄μ ¨μ Object.create μ λμ
1. μΈμλ‘ νλ‘ν νμ κ³Ό, νλ‘νΌν°λ‘ μΆκ°ν κ°μ²΄λ₯Ό λ°μ΅λλ€
2. νλ‘ν νμ μ΄ Objectλ null μ΄ μλλΌλ©΄ μλ¬κ° λ°μν©λλ€
3. λΉ ν¨μλ₯Ό νλ λ§λ€κ³ , κ·Έ νλ‘ν νμ
μ μ λ¬λ μΈμλ‘ μ§μ ν©λλ€.
Β Β Β λ§μ½ μΈμλ‘ μ λ¬λ νλ‘ν νμ
μ΄ null μ΄λΌλ©΄ λΉ κ°μ²΄λ₯Ό 맀νν©λλ€
4. μΆκ° μ λ¬λ νλ‘νΌν°λ₯Ό ν λΉν©λλ€
5. new μ°μ°μλ₯Ό ν΅ν΄ λΉ ν¨μμ prototypeμ λ°νν κ°μ²΄μ μ°κ²°ν©λλ€
Β Β - newμ λμμ κ·Έλλ‘ μνν©λλ€
Β Β - λΉ κ°μ²΄ λ§λ€κ³
Β Β - this λ°μΈλ© νκ³
Β Β - λ°νκ°μ΄ object λ©΄ κ·Έκ±Έλ‘ ν λΉ, μλλ©΄ κ·Έλ₯ λΉ κ°μ²΄
6. λ§μ½ prototype μΈμμ κ°μ΄ null μ΄λΌλ©΄,Β
Β Β λ°νλ κ°μ²΄μ νλ‘ν νμ λ§ν¬λ₯Ό null λ‘ λ§λ€κ³ , νλ‘ν νμ 체μΈμ λμ΅λλ€
7. μμ±λ κ°μ²΄λ₯Ό λ°νν©λλ€
instanceof π
instanceof π
The instanceof operatorΒ tests whether the prototype property of a constructor appears anywhere in the prototype chain of an object.
instanceof μ°μ°μλ μ’ν(LHS) κ°μ²΄μ νλ‘ν νμ μ²΄μΈ μ΄λκ°μ
μ°ν(RHS)μ κ°μ²΄ νλ‘ν νμ μ΄ μ‘΄μ¬νλμ§ κ²μ¬ν©λλ€
instanceof π
The instanceof operatorΒ tests whether the prototype property of a constructor appears anywhere in the prototype chain of an object.
instanceof μ°μ°μλ μ’ν(LHS) κ°μ²΄μ νλ‘ν νμ μ²΄μΈ μ΄λκ°μ
μ°ν(RHS)μ κ°μ²΄ νλ‘ν νμ μ΄ μ‘΄μ¬νλμ§ κ²μ¬ν©λλ€
instanceof π
π instanceofΒ in Object.create
instanceof μ μ°νμ νμ°μ μΌλ‘ callable ν κ°μ²΄μ¬μΌ ν©λλ€
instanceof π
π Object.createλ₯Ό μν νν΅ κ²μ¬
isPrototypeOf λ‘ νμΈν μ μμ΅λλ€
(μ¬μ§μ΄ ν¨μλͺ
λ instance κ°μ μ 맀ν ν€μλκ° μλλλ€)
Appendix πΆ
Appendix πΆ
πΆ class keywordλ μ΄λ»κ² λμν κΉμ?
μ΄ μ½λκ°...
Appendix πΆ
πΆ class keywordλ μ΄λ»κ² λμν κΉμ?
μ΄λ κ² λ©λλ€... (μ°λ¦¬ ν΄λμ€κ° λ¬λΌμ‘μ΄μ)
Prototype
By Doon Doon
Prototype
- 851