λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°

λ…μ„œ λͺ©λ‘/λͺ¨λ”₯λ‹€ Modern JS Deep Dive

[λͺ¨λ”₯λ‹€] 22μž₯ this

728x90

🍾 22.1 this ν‚€μ›Œλ“œ

 

μƒμ„±μž ν•¨μˆ˜λ₯Ό μ •μ˜ν•˜λŠ” μ‹œμ μ—λŠ” 아직 μΈμŠ€ν„΄μŠ€λ₯Ό μƒμ„±ν•˜κΈ° μ΄μ „μ΄λ―€λ‘œ, 

μƒμ„±μž ν•¨μˆ˜κ°€ 생성할 μΈμŠ€ν„΄μŠ€λ₯Ό κ°€λ¦¬ν‚€λŠ” μ‹λ³„μžλ₯Ό μ•Œ 수 μ—†λ‹€. 

λ”°λΌμ„œ μžμ‹ μ΄ μ†ν•œ 객체 λ˜λŠ” μžμ‹ μ΄ 생성할 μΈμŠ€ν„΄μŠ€λ₯Ό κ°€λ¦¬ν‚€λŠ” νŠΉμˆ˜ν•œ μ‹λ³„μžκ°€ ν•„μš”ν•˜λ‹€.

=> this 제곡

 

this

: μžμ‹ μ΄ μ†ν•œ 객체 λ˜λŠ” μžμ‹ μ΄ 생성할 μΈμŠ€ν„΄μŠ€λ₯Ό κ°€λ¦¬ν‚€λŠ” 자기 μ°Έμ‘° λ³€μˆ˜. 

: this λ₯Ό 톡해 μžμ‹ μ΄ μ†ν•œ 객체 λ˜λŠ” μžμ‹ μ΄ 생성할 μΈμŠ€ν„΄μŠ€μ˜ ν”„λ‘œνΌν‹°λ‚˜ λ©”μ„œλ“œλ₯Ό μ°Έμ‘°ν•  수 있음. 

- JS 엔진에 μ˜ν•΄ μ•”λ¬΅μ μœΌλ‘œ 생성됨

- thisκ°€ κ°€λ¦¬ν‚€λŠ” κ°’, 즉 this 바인딩은 ν•¨μˆ˜ 호좜 방식에 μ˜ν•΄ λ™μ μœΌλ‘œ 결정됨. 

 

this 바인딩

this 와 this κ°€ 가리킬 객체, 즉, μ‹λ³„μžμ™€ 값을 μ—°κ²°ν•˜λŠ” 것. 

 

this λŠ” 객체의 ν”„λ‘œνΌν‹°λ‚˜ λ©”μ„œλ“œλ₯Ό μ°Έμ‘°ν•˜κΈ° μœ„ν•œ μš©λ„λ‘œ μ‚¬μš©λ˜λ―€λ‘œ

-> strict mode μ‚¬μš© μ‹œ

일반 ν•¨μˆ˜ 내에선 undefinedκ°€ 바인딩됨. 

 

 

 

 

 

🍾 22.2 ν•¨μˆ˜ 호좜 방식과 this 바인딩

 

 this 바인딩은 ν•¨μˆ˜ 호좜 방식에 μ˜ν•΄ λ™μ μœΌλ‘œ 결정됨. 

 

πŸ“Œ λ ‰μ‹œμ»¬ μŠ€μ½”ν”„μ™€ this 바인딩은 κ²°μ • μ‹œκΈ°κ°€ λ‹€λ₯΄λ‹€.

ν•¨μˆ˜μ˜ μƒμœ„ μŠ€μ½”ν”„λ₯Ό κ²°μ •ν•˜λŠ” 방식인 λ ‰μ‹œμ»¬ μŠ€μ½”ν”„λŠ”

ν•¨μˆ˜ μ •μ˜κ°€ ν‰κ°€λ˜μ–΄ ν•¨μˆ˜ 객체가 μƒμ„±λ˜λŠ” μ‹œμ μ— μƒμœ„ μŠ€μ½”ν”„λ₯Ό 결정함. 

this 바인딩은 ν•¨μˆ˜ 호좜 μ‹œμ μ— 결정됨. 

 

ν•¨μˆ˜ 호좜 방식

 

 

22.2.1 일반 ν•¨μˆ˜ 호좜

 

기본적으둜 thisμ—λŠ” μ „μ—­ 객체가 바인딩됨. 

ν•˜μ§€λ§Œ μΌλ°˜ν•¨μˆ˜μ—μ„œ this λŠ” μ˜λ―Έκ°€ μ—†μŒ. 

일반 ν•¨μˆ˜λŠ” μ€‘μ²©ν•¨μˆ˜, μ½œλ°±ν•¨μˆ˜ λ“± μΌλ°˜ν•¨μˆ˜λ‘œ ν˜ΈμΆœλ˜λŠ” λͺ¨λ“  ν•¨μˆ˜λ₯Ό λœ»ν•¨. 

 

 

22.2.2 λ©”μ„œλ“œ 호좜

 

λ©”μ„œλ“œμ˜ λ‚΄λΆ€μ˜ thisλŠ” λ©”μ„œλ“œλ₯Ό μ†Œμœ ν•œ 객체가 μ•„λ‹Œ, λ©”μ„œλ“œλ₯Ό ν˜ΈμΆœν•œ 객체에 바인딩됨. 

 

 

22.2.3 μƒμ„±μž ν•¨μˆ˜ 호좜

 

μƒμ„±μž ν•¨μˆ˜(new μ—°μ‚°μžλž‘ ν˜ΈμΆœν•˜λŠ”) λ‚΄λΆ€μ˜ this μ—λŠ” μƒμ„±μž ν•¨μˆ˜κ°€ 생성할 μΈμŠ€ν„΄μŠ€κ°€ λ°”μΈλ”©λœλ‹€. 

 

 

22.2.4 Function.prototype.apply/call/bind λ©”μ„œλ“œμ— μ˜ν•œ κ°„μ ‘ 호좜

μ–˜λ„€λŠ” Function.prototype 의 λ©”μ„œλ“œλ‹€. 

즉, 이듀 λ©”μ„œλ“œλŠ” λͺ¨λ“  ν•¨μˆ˜κ°€ 상속받아 μ‚¬μš©ν•  수 μžˆλ‹€. 

 

apply와 call : ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜λŠ” 것이 본질적인 κΈ°λŠ₯. 

bind : ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜μ§€ μ•ŠμŒ. λŒ€μ‹  첫번째 인수 => this 바인딩이 ꡐ체된 ν•¨μˆ˜λ₯Ό μƒˆλ‘­κ²Œ 생성 & λ°˜ν™˜

 

μ™ΈλΆ€ ν•¨μˆ˜λ₯Ό λ©”μ„œλ“œμ˜ μ½œλ°±ν•¨μˆ˜λ‘œ λ°›λŠ” 경우 -> 일반 ν•¨μˆ˜ λ‚΄μ˜ this λ₯Ό window 둜 인식

=> 콜백 ν•¨μˆ˜μ˜ 내뢀와 μ™ΈλΆ€ ν•¨μˆ˜μ˜ λ‚΄λΆ€μ˜ this λ₯Ό μΌμΉ˜ν‚€μΌœμ•Όν•¨. 

 

callback.bind(this)

 

 

 

 

728x90
λ°˜μ‘ν˜•