πŸ“– ν”„λ‘œν† νƒ€μž… - 1

κΈ°λ‘μΌκΈ°πŸ“«Β·2020λ…„ 12μ›” 31일
1

Javascript κ°œλ…μ •λ¦¬

λͺ©λ‘ 보기
10/15

이번 ν¬μŠ€νŒ…μ—μ„œλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ ν”„λ‘œν† νƒ€μž…μ— λŒ€ν•΄ 정리해본닀. ν”„λ‘œν† νƒ€μž…μ€ λ‚΄μš©μ΄ λ§Žμ•„μ„œ λ‘νŽΈ 정도에 λ‚˜λˆ μ„œ ν¬μŠ€νŒ…ν•˜κ²Œ 될 것 κ°™λ‹€.

이번 νŽΈμ—μ„œλŠ” ν”„λ‘œν† νƒ€μž…μ„ ν†΅ν•œ 상속에 λŒ€ν•΄ κ°€λ³κ²Œ μ•Œμ•„λ³΄μž!

상속

상속(inheritance)은 객체지ν–₯ ν”„λ‘œκ·Έλž˜λ°μ˜ ν•΅μ‹¬κ°œλ…μœΌλ‘œμ¨ νŠΉμ • 객체의 ν”„λ‘œνΌν‹°λ‚˜ λ©”μ„œλ“œλ₯Ό λ‹€λ₯Έ 객체가 λ°›μ•„μ™€μ„œ κ·ΈλŒ€λ‘œ μ‚¬μš©ν•  수 있게 ν•˜λŠ” κΈ°λŠ₯이닀.

Javaλ‚˜ C++ 같은 λ‹€λ₯Έ 객체지ν–₯ μ–Έμ–΄μ—μ„œλŠ” Classλ₯Ό μ΄μš©ν•˜μ—¬ 상속을 κ΅¬ν˜„ν•œλ‹€.
ν•˜μ§€λ§Œ μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œλŠ” ν”„λ‘œν† νƒ€μž…μ„ 기반으둜 상속을 κ΅¬ν˜„ν•œλ‹€. MDN에 ν”„λ‘œν† νƒ€μž…μ— λŒ€ν•œ μ„€λͺ…을 보자.

μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” ν”„λ‘œν† νƒ€μž…μ„ 기반으둜 상속을 κ΅¬ν˜„ν•œλ‹€. (ES2015λΆ€ν„° class ν‚€μ›Œλ“œλ₯Ό μ§€μ›ν•˜κΈ° μ‹œμž‘ν–ˆμœΌλ‚˜, 문법적인 양념일 뿐이며 μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” μ—¬μ „νžˆ ν”„λ‘œν† νƒ€μž… 기반의 μ–Έμ–΄λ‹€.)


ν”„λ‘œν† νƒ€μž…

그러면 μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ ν”„λ‘œν† νƒ€μž…μ„ 톡해 상속이 μ΄λ€„μ§„λ‹€λŠ” 것을 μ•Œκ²Œ λμœΌλ‹ˆ, ν”„λ‘œν† νƒ€μž…μ— λŒ€ν•΄ 쑰금 더 μžμ„Ένžˆ μ•Œμ•„λ³΄μž. μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œμ˜ 상속은 μ •ν™•νžˆ μ΄μ•ΌκΈ°ν•˜λ©΄ ν”„λ‘œν† νƒ€μž… 객체λ₯Ό ν†΅ν•΄μ„œ 이루어진닀.

ν”„λ‘œν† νƒ€μž… κ°μ²΄λž€ λ‹¨μˆœνžˆ νŠΉμ • 객체의 λΆ€λͺ¨ 역할을 ν•˜λŠ” 객체둜써 상속을 μœ„ν•΄ μ‚¬μš©λœλ‹€. λΆ€λͺ¨ κ°μ²΄λŠ” ν”„λ‘œν† νƒ€μž… 객체λ₯Ό 톡해 μžμ‹μ—κ²Œ 곡유 ν”„λ‘œνΌν‹°λ₯Ό μ œκ³΅ν•˜κ³ , μžμ‹ κ°μ²΄λŠ” λΆ€λͺ¨μ˜ ν”„λ‘œν† νƒ€μž… 객체λ₯Ό 톡해 λΆ€λͺ¨μ˜ ν”„λ‘œνΌν‹°λ‚˜ λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•  수 μžˆλ‹€.

λ˜ν•œ, μžμ‹ κ°μ²΄λŠ” [[prototype]] μ ‘κ·Όμž, 즉 .__proto__λ₯Ό 톡해 λΆ€λͺ¨μ˜ ν”„λ‘œν† νƒ€μž… 객체에 직접 μ ‘κ·Όν•΄λ³Ό 수 μžˆλ‹€.


ν”„λ‘œν† νƒ€μž…μ„ ν†΅ν•œ 상속

사싀 μš°λ¦¬λŠ” 이미 ν”„λ‘œν† νƒ€μž…μ„ ν†΅ν•œ 상속을 κ²½ν—˜ν–ˆλ‹€.

λ‹€μŒ μ½”λ“œλ₯Ό 보며 μ΄ν•΄ν•΄λ³΄μž.

const person = {
  age : 4
};

// μ •μ˜ν•˜μ§€ μ•Šμ€ hasOwnProperty λ©”μ„œλ“œ 호좜
person.hasOwnProperty('age') // true

ageλΌλŠ” ν”„λ‘œνΌν‹°λ₯Ό κ°–λŠ” κ°„λ‹¨ν•œ 객체 person을 μ •μ˜ν–ˆλ‹€.

그리고 κ·Έ 후에 person 객체에 μ •μ˜ν•˜μ§€ μ•Šμ€ hasOwnProperty λ©”μ„œλ“œλ₯Ό ν˜ΈμΆœν–ˆλŠ”λ° trueλΌλŠ” 값을 λ°˜ν™˜ν•œ 것을 λ³Ό 수 μžˆλ‹€.

μ–΄λ–»κ²Œ 된 일일까? person 객체λ₯Ό μžμ„Ένžˆ λœ―μ–΄λ³΄μž.

person 객체λ₯Ό μ‚΄νŽ΄λ³΄λ©΄ μš°λ¦¬κ°€ μ •μ˜ν•œ 속성 ageλΌλŠ” 속성 외에도 .__proto__ λΌλŠ” ν”„λ‘œνΌν‹°λ₯Ό 가지고 있고, μš°λ¦¬κ°€ μ‚¬μš©ν–ˆλ˜ hasOwnProperty λ©”μ„œλ“œλ„ 이 객체가 가지고 μžˆλŠ” 것을 확인할 수 μžˆλ‹€.

즉 person κ°μ²΄λŠ” λΆ€λͺ¨μ˜ ν”„λ‘œν† νƒ€μž… 객체에 μžˆλŠ” hasOwnPropertyλ₯Ό μ‹€ν–‰ν•œ 것이닀!

근데...λ‚œ 아무것도 μƒμ†ν•œμ μ΄ μ—†λŠ”λ°?πŸ€”


I'm your father. I'm Object.

μ˜λ¬Έμ„ ν’€κΈ°μœ„ν•΄ MDNμ—μ„œ Object에 κ΄€ν•œ κΈ€ 일뢀λ₯Ό κ°€μ Έμ™”λ‹€.

μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ λͺ¨λ“  객체듀은 Object의 μžμ†μ΄λ‹€. λͺ¨λ“  κ°μ²΄λŠ” Object.prototypeμœΌλ‘œλΆ€ν„° λ©”μ„œλ“œμ™€ 속성을 μƒμ†λ°›λŠ”λ‹€.

MDN λ¬Έμ„œμ— λ”°λ₯΄λ©΄ μš°λ¦¬κ°€ μ •μ˜ν•œ personμ΄λΌλŠ” 객체도 Object의 μžμ‹μ΄κ³ , Object.prototype κ°μ²΄λ‘œλΆ€ν„° λ©”μ„œλ“œμ™€ 속성을 상속 λ°›μ•˜μ„ 것이닀!

그러면 person의 λΆ€λͺ¨λŠ” Object이고, person.__proto__의 μ •μ²΄λŠ” Object의 ν”„λ‘œν† νƒ€μž… 객체인 Object.prototypeμ˜€λ˜ κ²ƒμΌκΉŒ?

κ·Έλ ‡λ‹€. μš°λ¦¬κ°€ μ •μ˜ν•œ person κ°μ²΄λŠ” Object의 μžμ†μ΄κ³ , κ·Έλž˜μ„œ 우린 Object.prototype 객체가 가지고 μžˆλŠ” λ©”μ„œλ“œμΈ hasOwnPropertyλ₯Ό μ‚¬μš©ν•  수 μžˆμ—ˆλ˜ 것이닀!

즉, personκ°μ²΄λŠ” Object 객체λ₯Ό 상속 λ°›μ•˜λ‹€λŠ” 사싀을 μ•Œ 수 μžˆλ‹€.


전체적인 κ΅¬μ‘°λŠ” μ•„λž˜μ™€ κ°™λ‹€.

이미지 좜처 : https://poiemaweb.com/js-prototype

정리

  • ObjectλŠ” λͺ¨λ“  객체의 λΆ€λͺ¨μ΄λ‹€. (λͺ¨λ“  κ°μ²΄λŠ” Object 객체λ₯Ό μƒμ†ν•œλ‹€.)
  • λ”°λΌμ„œ Object.prototype 객체가 κ°–λŠ” λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•  수 μžˆλ‹€.
  • λΆ€λͺ¨λŠ” prototype 객체λ₯Ό 톡해 λ©”μ„œλ“œλ₯Ό κ³΅μœ ν•˜κ³ , μžμ‹ κ°μ²΄λŠ” κ°μ²΄λŠ” .__proto__을 톡해 λΆ€λͺ¨μ˜ prototype 객체에 μ ‘κ·Ό κ°€λŠ₯ν•˜λ‹€.

λ‹€μŒ νŽΈμ—λŠ” ν”„λ‘œν† νƒ€μž…μ„ ν†΅ν•œ 상속방법과, ν”„λ‘œν† νƒ€μž… 체인에 λŒ€ν•΄μ„œ μ•Œμ•„λ³΄μž!

2개의 λŒ“κΈ€

comment-user-thumbnail
2021λ…„ 1μ›” 1일

글을 읽고 λ‚˜μ„œ 많이 λ°°μ› μŠ΅λ‹ˆλ‹€! ^^
λ‹€μŒ νŽΈλ„ κΈ°λŒ€ν• κ²Œμš”!!

1개의 λ‹΅κΈ€