πŸ“ [JS 곡뢀기둝] 0620~0624

제둠·2022λ…„ 6μ›” 24일
0

25μž₯ 클래슀

JSλŠ” μƒμ„±μž ν•¨μˆ˜μ™€ ν”„λ‘œν† νƒ€μž…μ„ 톡해 객체지ν–₯ κ΅¬ν˜„ -> 객체λ₯Ό λ§Œλ“€μ–΄λƒ„

JSμ—μ„œ ν΄λž˜μŠ€λŠ” μƒˆλ‘œμš΄ 객체 생성 방식

ν΄λž˜μŠ€λŠ” ν•¨μˆ˜λ‹€.

  • κ°’μ²˜λŸΌ μ‚¬μš©ν•  수 μžˆλŠ” 일급 객체

    • λ³€μˆ˜λ‚˜ μžλ£Œκ΅¬μ‘°μ— μ €μž₯
    • ν•¨μˆ˜μ˜ λ§€κ°œλ³€μˆ˜λ‘œ
    • ν•¨μˆ˜μ˜ λ°˜ν™˜κ°’μœΌλ‘œ
  • costructor, ν”„λ‘œν† νƒ€μž… λ©”μ„œλ“œ, 정적 λ©”μ„œλ“œ

  • ν˜Έμ΄μŠ€νŒ…μ΄ 일어남

    • let, const 처럼 TDZ

ν΄λž˜μŠ€μ—μ„œ λ©”μ„œλ“œ

  • constructor, ν”„λ‘œν† νƒ€μž… λ©”μ„œλ“œ, 정적 λ©”μ„œλ“œ => 호좜 κ°€λŠ₯
  • ν΄λž˜μŠ€λŠ” ν•¨μˆ˜μ΄κΈ° λ•Œλ¬Έμ— 1. ν•¨μˆ˜ 객체 고유 ν”„λ‘œνΌν‹°, 2. ν”„λ‘œν† νƒ€μž…κ³  μ—°κ²°, 3. μžμ‹ μ˜ μŠ€μ½”ν”„ 체인 ꡬ성
  • constructor
    • constructorλŠ” λ©”μ„œλ“œλΌκΈ° λ³΄λ‹€λŠ” 기술된 λ™μž‘μ„ ν•˜λŠ” ν•¨μˆ˜ 객체, λ³„λ„μ˜ λ°˜ν™˜λ¬Έ 없어야함 -> this(μΈμŠ€ν„΄μŠ€)λ₯Ό λ°˜ν™˜ν•˜κΈ° λ•Œλ¬Έμ—
  • ν”„λ‘œν† νƒ€μž… λ©”μ„œλ“œ
    • ν΄λž˜μŠ€μ—μ„œ μ •μ˜ν•œ λ©”μ„œλ“œλŠ” μžλ™μœΌλ‘œ ν”„λ‘œν† νƒ€μž… λ©”μ„œλ“œκ°€ 됨
  • 정적 λ©”μ„œλ“œ
    • 클래슀 λ‚΄μ—μ„œ static ν‚€μ›Œλ“œλ₯Ό λΆ™μ—¬ μ •μ˜, 클래슀둜 호좜 해야함!
    • μΈμŠ€ν„΄μŠ€μ˜ ν”„λ‘œν† νƒ€μž… μ²΄μΈμƒμ—λŠ” ν΄λž˜μŠ€κ°€ 쑴재X => μΈμŠ€ν„΄μŠ€λ‘œ λ©”μ„œλ“œ 상속X
    • 정적 λ©”μ„œλ“œ λ‚΄λΆ€μ˜ thisλŠ” μΈμŠ€ν„΄μŠ€X, ν΄λž˜μŠ€λ‹€!
  • ν”„λ‘œνΌν‹°
    • 클래슀의 λ©”μ„œλ“œλŠ” ν”„λ‘œν† νƒ€μž… λ©”μ„œλ“œκ°€ 됨 -> μ ‘κ·Όμž ν”„λ‘œνΌν‹°λŠ” ν”„λ‘œν† νƒ€μž…μ˜ ν”„λ‘œνΌν‹°

상속에 μ˜ν•œ 클래슀 ν™•μž₯

  • ν”„λ‘œν† νƒ€μž… -> μžμ‚° 상속 -> ν”„λ‘œν† νƒ€μž… 체인을 톡해

  • 클래슀 ν™•μž₯ -> 묻고 더블 -> 클래슀 + 클래슀 => μƒˆλ‘œμš΄ 클래슀

  • extends ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•˜λ©΄ μƒμ„±μž ν•¨μˆ˜λ„ ν™•μž₯ν•  수 있음

  • μΈμŠ€ν„΄μŠ€κ°„μ˜ ν”„λ‘œν† νƒ€μž… 체인 생성, ν΄λž˜μŠ€κ°„ ν”„λ‘œν† νƒ€μž… 체인 생성

    • => ν”„λ‘œν† νƒ€μž… λ©”μ„œλ“œ, 정적 λ©”μ„œλ“œ λͺ¨λ‘ 상속O
  • super ν‚€μ›Œλ“œ

    • 수퍼클래슀(μƒμœ„)의 constructorλ₯Ό ν˜ΈμΆœν•˜μ—¬ μΈμŠ€ν„΄μŠ€ 생성
    • μ„œλΈŒν΄λž˜μŠ€μ˜ constructorμ—μ„œ super λ°˜λ“œμ‹œ ν˜ΈμΆœν•΄μ•Όν•¨ -> μ„œλΈŒν΄λž˜μŠ€μ˜ μΈμŠ€ν„΄μŠ€λŠ” 사싀 superμ—μ„œ λ§Œλ“€μ–΄μ§€κΈ° λ•Œλ¬Έμ—
  • 수퍼클래슀 -> μ„œλΈŒν΄λž˜μŠ€ μΈμŠ€ν„΄μŠ€ 생성 κ³Όμ •

  1. 수퍼클래슀 this에 μΈμŠ€ν„΄μŠ€ 바인딩
  2. constructorκ°€ 받은 인수둜 μΈμŠ€ν„΄μŠ€ μ΄ˆκΈ°ν™”
  3. superκ°€ λ°˜ν™˜ν•œ μΈμŠ€ν„΄μŠ€κ°€ μ„œλΈŒν΄λž˜μŠ€ constructor의 this둜 바인딩됨
  4. μ„œλΈŒν΄λž˜μŠ€λŠ” 별도 μΈμŠ€ν„΄μŠ€ 생성X, κ·ΈλŒ€λ‘œ λ°›μ•„ μ‚¬μš©
    => μ„œλΈŒν΄λž˜μŠ€ constructorλŠ” super 호좜 이후 μ²˜λ¦¬ν•΄μ•Όν•¨!

26μž₯: ES6 ν•¨μˆ˜μ˜ μΆ”κ°€ κΈ°λŠ₯

μΌλ°˜ν•¨μˆ˜ - ν•¨μˆ˜ μ„ μ–Έλ¬Έ, ν‘œν˜„μ‹

λ©”μ„œλ“œ - λ©”μ„œλ“œ μΆ•μ•½ν‘œν˜„μœΌλ‘œ μ •μ˜λœ ν•¨μˆ˜(ν”„λ‘œνΌν‹°λ‘œ μ „λ‹¬λœ ν•¨μˆ˜λŠ” λ©”μ„œλ“œX)

  • non-constructor -> μƒμ„±μžν•¨μˆ˜X -> μΈμŠ€ν„΄μŠ€ 생성X -> ν”„λ‘œν† νƒ€μž… ν”„λ‘œνΌν‹°X
  • super μ°Έμ‘°λ₯Ό μœ„ν•΄ μžμ‹ μ„ λ°”μΈλ”©ν•œ 객체 κ°€λ¦¬ν‚€λŠ” [[homeobject]]λ₯Ό 가지고 있음

ν™”μ‚΄ν‘œ ν•¨μˆ˜

  • ν•¨μˆ˜ ν‘œν˜„μ‹μœΌλ‘œλ§Œ μ •μ˜
  • this 문제 ν•΄κ²°
  • non-constructor -> μΈμŠ€ν„΄μŠ€X, ν”„λ‘œν† νƒ€μž… ν”„λ‘œνΌν‹°X
  • this, arguments, super, new.target 바인딩X -> μƒμœ„ μŠ€μ½”ν”„λ₯Ό μ°Έμ‘°
    • ν™”μ‚΄ν‘œ ν•¨μˆ˜λ‘œ λ©”μ„œλ“œμ •μ˜ ν•˜μ§€ 말자 -> thisκ°€ 전역이 되기 λ•Œλ¬Έμ—

rest νŒŒλ¦¬λ―Έν„°

  • ν•¨μˆ˜μ— μ „λ‹¬λœ μΈμˆ˜λ“€μ˜ λͺ©λ‘μ„ λ°°μ—΄λ‘œ 전달

    • λ§ˆμ§€λ§‰ νŒŒλΌλ―Έν„°μ—¬μ•Όν•¨! - λ¨Όμ € μ „λ‹¬λœ 인수의 λ‚˜λ¨Έμ§€ 값이기 λ•Œλ¬Έμ—!
  • arguments 객체 -> ν•¨μˆ˜ ν˜ΈμΆœμ‹œ μ „λ‹¬λœ 인수의 정보 - μœ μ‚¬λ°°μ—΄κ°μ²΄

    • μœ μ‚¬λ°°μ—΄κ°μ²΄μ΄λ―€λ‘œ λ”°λ‘œ λ°°μ—΄λ‘œ μ „ν™˜ν•΄μ€˜μ•Όν•¨
    • but, rest νŒŒλΌλ―Έν„°λŠ” λ°”λ‘œ λ°°μ—΄λ‘œ 전달해주기 λ•Œλ¬Έμ— λ°°μ—΄ μ „ν™˜ κ³Όμ • μƒλž΅O
    • ν™”μ‚΄ν‘œ ν•¨μˆ˜λŠ” arguments 객체 μ—†κΈ° λ•Œλ¬Έμ— 무쑰건 restλ₯Ό 써야함! - κ°€λ³€μΈμˆ˜ν•¨μˆ˜ κ΅¬ν˜„μ‹œ
  • JS엔진은 λ§€κ°œλ³€μˆ˜ κ°œμˆ˜μ™€ 인수의 개수 체크X

    • 전달X λ§€κ°œλ³€μˆ˜λŠ” undefined
      => 기본값을 μ „λ‹¬ν•˜μ—¬ undefined인 경우 처리O
    • restλŠ” κΈ°λ³Έκ°’ 적용 λΆˆκ°€λŠ₯

λ°°μ—΄

  • 배열생성 방식

    1. λ°°μ—΄ λ¦¬ν„°λŸ΄
    2. Array μƒμ„œμž ν•¨μˆ˜
    3. Array.of, Array.from λ©”μ„œλ“œ
  • JS의 배열은 객체닀

    • μΈλ±μŠ€κ°€ ν‚€, 값이 λ°°μ—΄μ˜ μš”μ†Œ
    • 일반적인 κ°μ²΄μ™€μ˜ μ°¨μ΄λŠ” κ°’μ˜μˆœμ„œμ™€ length ν”„λ‘œνΌν‹°
    • 배열이 객체 ν˜•μ‹μ΄λΌλŠ” κ²ƒμ˜ κΈ°λŠ₯상 μ˜λ―ΈλŠ” 인덱슀 μ ‘κ·Ό λ³΄λ‹€λŠ” μš”μ†Œ μ‚½μž… λ˜λŠ” μ‚­μ œμ˜ 집쀑(ν¬μ†Œ λ°°μ—΄)
profile
Software Developer

0개의 λŒ“κΈ€