Classλ μ»΄ν¬λνΈλ₯Ό μμ±νλ λ°©λ² μ€ νλ
-2022.11.22 ES7 ν΄λμ€ μμ λ¬Έλ² μμ μ¬μ§ μΆκ°
JavaScriptμ Class
λ κ°μ²΄λ₯Ό μμ±νκΈ° μν ν
νλ¦ΏμΌλ‘, λ°μ΄ν°μ μ΄λ₯Ό μ‘°μνλ μ½λλ₯Ό νλλ‘ μΆμννλ€.
λν ν΄λμ€λ class
ν€μλλ‘ μ μλλ©°, property
μ method
λ₯Ό κ°μ§ μ μκ³ , class
μ μΈμ νλ‘ν νμ
κΈ°λ° μμμ μ¬μ©νμ¬, μ£Όμ΄μ§ μ΄λ¦μ μλ‘μ΄ ν΄λμ€λ₯Ό λ§λ λ€.
property
λ ν΄λμ€μ κ°μ²΄μμ μ μλ λ³μ, method
λ ν¨μλΌκ³ μκ°ν μ μλ€.
μ΄ λμ Class body
λ‘ λΆλ¦¬λ©°, new
ν€μλλ‘ μΈμ€ν΄μ€λ₯Ό μμ±νλλ° μ€μ λ‘ ν΄λμ€λ μμ±μ ν¨μλ₯Ό λ§λλ μ‘°κΈ λ νΈν λ°©λ²μ΄λ€.
μ¬λ΄μΌλ‘ method
λ κ°μΌλ‘ ν¨μλ₯Ό μ μ₯νλ property
λ‘λ μκ°ν μ μλ€.
Classμ constructor()
λ©μλλ ν΄λμ€μ μΈμ€ν΄μ€ κ°μ²΄λ₯Ό μμ±νκ³ μ΄κΈ°ννλ€.
ν΄λμ€ κ°μ²΄λ₯Ό μμ±ν λ λ§λ€ μ€νλ¨
ν΄λμ€λ μμμ΄ κ°λ₯νλ°, μμ ν΄λμ€λ μμνκ³ μνλ λΆλͺ¨ ν΄λμ€μ property
μ method
λ₯Ό μμλ°μ μμ μ΄ μ¬μ©ν μ μλ€.
class ChildClass extends ParentClass { ... }
MDN, Class extends
μ΄ λ, μ€μν κ²μ μμ ν΄λμ€μμ λΆλͺ¨ ν΄λμ€μ λ©μλλ₯Ό νΈμΆνλ €λ©΄, super()
λ©μλλ₯Ό λ¨Όμ νΈμΆν΄μΌνλλ°, μλ μ¬μ§μ extends
ν€μλλ‘ μμμ μ μνκΈ°λ§νκ³ myGender()
λ©μλλ₯Ό μ€ννμ λ λνλλ μ€λ₯λ€.
ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
λ²μνλ©΄
μ°Έμ‘° μ€λ₯ : 'this'μ μ‘μΈμ€νκ±°λ νμ μμ±μμμ λ°ννκΈ° μ μ νμ ν΄λμ€μsuper μμ±μ
λ₯Ό νΈμΆν΄μΌ ν©λλ€.
μ΄ λ¬Έμ λ₯Ό ν΄κ²°νλ €λ©΄ μμ ν΄λμ€μ μμ±μ ν¨μ μμ super()
λ©μλλ₯Ό μΆκ°ν΄μΌνλ€.
μ΄ λ, super()
λ λ©μλμ΄μ ν€μλλ‘, λΆλͺ¨ ν΄λμ€μ μμ±μ ν¨μλ₯Ό μ€ννλ€.
μμ ν΄λμ€μΈ Personμ΄ λΆλͺ¨ ν΄λμ€μΈ Humanμ myGender()
λ©μλλ₯Ό μ¬μ©νκΈ°μν΄ μμ μ μμ±μ ν¨μ νλΌλ―Έν°λ‘ gender
λ₯Ό μΆκ°νκ³ , μλ νΈμΆλ super()
λ©μλμ μ 곡νλ€.
Method
μ¬μ© μμProperty
μ¬μ© μμκ·Έλ¬λ ES 7 λ¬Έλ²μμλ μ‘°κΈ λ¬λΌμ§λ€
ES 7 μμλ μμ±μ ν¨μλ₯Ό νΈμΆνμ§μμλ ν΄λμ€μ λ°λ‘ property
λ₯Ό ν λΉν μ μλ€.
κ·Έκ² λ¬΄μ¨ λ§μ΄λλ©΄, μμμ ν΄λμ€μ property
λ ν΄λμ€μ κ°μ²΄μ λ³μκ°μ κ²μ΄κ³ , method
λ ν΄λμ€μ κ°μ²΄μ ν¨μκ°μ κ²μ΄λΌκ³ μΈκΈνλλ°, μλλ κΈ°μ‘΄ λ¬Έλ²κ³Ό ES 7 λ¬Έλ²λ₯Ό λΉκ΅ν μ½λ
Property
// ES 6
constructor(){
this.property = "value"
}
// ES 7
property = "value"
Method
// ES 6
method() { ... }
// ES 7
method = () => { ... }
μμ½νμλ©΄ this
ν€μλλ₯Ό μ¬μ©νμ§ μκΈ° μν¨
κΈ°μ‘΄ λ¬Έλ²μμλ ν΄λμ€ μμμΌλ‘ μΈν this λ°μΈλ© λ¬Έμ κ° μμ£Ό λ°μνλλ° Arrow function
μ ν΅ν΄ μ΄λ₯Ό ν΄κ²°ν μ μλ€.