๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐Ÿ“š/ใ„ด JavaScript

[JavaScript] this๋ž€? / call, apply, bind ์ฐจ์ด์ 

๐Ÿ”— this๋ž€?

 

 this๋Š” ํ•จ์ˆ˜ ํ˜ธ์ถœ ๋ฐฉ์‹์— ๋”ฐ๋ผ this์— ๋ฐ”์ธ๋”ฉํ•  ๊ฐ์ฒด๊ฐ€ ๋™์ ์œผ๋กœ ๊ฒฐ์ •๋œ๋‹ค.

(์˜ˆ์™ธ์ ์œผ๋กœ, bind ํ•จ์ˆ˜๋Š” ํ˜ธ์ถœ๊ณผ ๋ฌด๊ด€์—๊ฒŒ ๋ฌถ์–ด์„œ ๊ณ ์ •์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค.)

 

ํ˜ธ์ถœํ•œ ๊ฐ์ฒด === this

๐Ÿ”— ํ•จ์ˆ˜ ํ˜ธ์ถœ ๋ฐฉ์‹

 

<์•”๋ฌต์  ๋ฐ”์ธ๋”ฉ>

 

1. ํ•จ์ˆ˜(์ผ๋ฐ˜ํ•จ์ˆ˜, ์ „์—ญํ•จ์ˆ˜, ์™ธ๋ถ€ํ•จ์ˆ˜, ๋‚ด๋ถ€ํ•จ์ˆ˜(์ผ๋ฐ˜ ๋‚ด๋ถ€ํ•จ์ˆ˜, ๋ฉ”์†Œ๋“œ์˜ ๋‚ด๋ถ€ํ•จ์ˆ˜, ์ฝœ๋ฐฑํ•จ์ˆ˜ ๋“ฑ)) ํ˜ธ์ถœ

 

 this๋Š” ์ „์—ญ๊ฐ์ฒด(window)๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค.

 

2. ๋ฉ”์†Œ๋“œ ํ˜ธ์ถœ

 

 this๋Š” ํ•ด๋‹น ๋ฉ”์†Œ๋“œ์˜ ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค.

 

3. ์ƒ์„ฑ์ž ํ•จ์ˆ˜ ํ˜ธ์ถœ

 

 this๋Š” ์ƒ์„ฑ์ž๋กœ ์ธํ•ด ์ƒ์„ฑ๋œ ์ธ์Šคํ„ด์Šค๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค.

 


<๋ช…์‹œ์  ๋ฐ”์ธ๋”ฉ>

 

4. call, apply, bind ํ˜ธ์ถœ

 

 this๊ฐ€ ํ•จ์ˆ˜ ํ˜ธ์ถœ์‹์— ๋”ฐ๋ผ ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค๋ฉด call, apply, bind๋Š” ํ•จ์ˆ˜๊ฐ€ ์ง์ ‘ ์‹คํ–‰๋ฌธ๋งฅ์„ ๊ฒฐ์ •ํ•œ๋‹ค.

 

 call์€ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•ด ์‹คํ–‰ํ•œ๋‹ค. ํ•จ์ˆ˜์˜ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ํ•˜๋‚˜์”ฉ ๋„˜๊ธด๋‹ค.

 apply๋Š” ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•ด ์‹คํ–‰ํ•œ๋‹ค. ํ•จ์ˆ˜์˜ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ๋ฐฐ์—ด ํ˜•ํƒœ๋กœ ๋„˜๊ธด๋‹ค.

 bind๋Š” ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ this๊ฐ€ ๋ฐ”์ธ๋”ฉ๋œ ์ƒˆ๋กœ์šด ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค์–ด ๋ฆฌํ„ดํ•œ๋‹ค.

 


๐Ÿ“Œ ์ผ๋ฐ˜ ํ•จ์ˆ˜์—์„œ์˜ this VS ํ™”์‚ดํ‘œ ํ•จ์ˆ˜์—์„œ์˜ this

 

 ์ผ๋ฐ˜ ํ•จ์ˆ˜์—์„œ์˜ this๋Š” ํ•จ์ˆ˜ ํ˜ธ์ถœ ๋ฐฉ์‹์— ๋”ฐ๋ผ this์— ๋ฐ”์ธ๋”ฉํ•  ๊ฐ์ฒด๊ฐ€ ๋™์ ์œผ๋กœ ๊ฒฐ์ •๋œ๋‹ค.

 ํ™”์‚ดํ‘œ ํ•จ์ˆ˜์—์„œ์˜ this๋Š” ํ•ญ์ƒ ์ƒ์œ„ ์Šค์ฝ”ํ”„์˜ this๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค. ๋”ฐ๋ผ์„œ this์— ๋ฐ”์ธ๋”ฉํ•  ๊ฐ์ฒด๊ฐ€ ์ •์ ์œผ๋กœ ๊ฒฐ์ •๋œ๋‹ค. (์ƒ์œ„ ์Šค์ฝ”ํ”„์˜ this๋ฅผ ๊ทธ๋Œ€๋กœ ๋ฌผ๋ ค๋ฐ›๊ธฐ ๋•Œ๋ฌธ์— ์ง์ ‘์ ์œผ๋กœ ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.)

 

 

๐Ÿ”— use strict ๋ชจ๋“œ์—์„œ์˜ this

 

 ํ•จ์ˆ˜ ํ˜ธ์ถœ์—์„œ this๋Š” window๊ฐ€ ์•„๋‹Œ undefined๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค.

 

 


๐Ÿ”Ž ์ฐธ๊ณ  ์ž๋ฃŒ

๐Ÿ’ก ๊ฐ™์ด ๋ณด๋ฉด ์ข‹์„ Post

 

[JavaScript] ์‹คํ–‰ ์ปจํ…์ŠคํŠธ(Execution Context)๋ž€?

๐Ÿ”— ์‹คํ–‰ ์ปจํ…์ŠคํŠธ(Execution Context) ๋ž€?  ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋Š” ์‹คํ–‰ ๊ฐ€๋Šฅํ•œ ์ฝ”๋“œ๊ฐ€ ์‹คํ–‰๋˜๊ธฐ ์œ„ํ•ด ํ•„์š”ํ•œ ํ™˜๊ฒฝ์ด๋‹ค. ๐Ÿ”— ์‹คํ–‰ ์ปจํ…์ŠคํŠธ์˜ ์ข…๋ฅ˜ ๐Ÿ“ ์ „์—ญ ์ปจํ…์ŠคํŠธ (Global Context) ์ „์—ญ ์˜์—ญ์— ์กด์žฌํ•˜๋Š” ์ฝ”

devjindev.tistory.com

 

[JavaScript / ES6] ES6 ๋ฌธ๋ฒ• ์ •๋ฆฌ

๐Ÿ”— const, let ๐Ÿ“Œ var VS const, let  var์€ ํ•จ์ˆ˜ ์Šค์ฝ”ํ”„์ด๋‹ค.  const, let์€ ๋ธ”๋ก ์Šค์ฝ”ํ”„์ด๋‹ค. ๋”ฐ๋ผ์„œ {๋ธ”๋ก} ๋ฐ–์—์„œ ๋ณ€์ˆ˜์— ์ ‘๊ทผํ•  ์ˆ˜ ์—†๋‹ค. ๐Ÿ“Œ const VS let  let์€ ๋ณ€์ˆ˜์— ์žฌํ• ๋‹น์ด ๊ฐ€๋Šฅํ•˜๋‹ค. ๋”ฐ๋ผ์„œ ๋‹ค๋ฅธ..

devjindev.tistory.com