๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿ’š UIUX ์›นํผ๋ธ”๋ฆฌ์…” ๊ณผ์ •(6๊ฐœ์›”)

2021-06-15 (64์ผ์ฐจ) ๊ทธ๋ ˆ์ด๋ธŒ ๋ฌธ๋ฒ•, ์•„์ฝ”๋””์–ธ ๋งŒ๋“ค๊ธฐ, this, ๋ณ€์ˆ˜๋ช…$ํฌํ•จ,

by widely design 2021. 6. 16.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ 51๊ฐ•~53๊ฐ•

 

 

- ๊ทธ๋ ˆ์ด๋ธŒ ๋ฌธ๋ฒ•

  $` { } ` ์‚ฌ์šฉํ•˜๊ธฐ

๊ทธ๋ ˆ์ด๋ธŒ ๋ฌธ๋ฒ• ์‚ฌ์šฉ ์˜ˆ์ œ

 

<์•„์ฝ”๋””์–ธ ๋งŒ๋“ค๊ธฐ> - ํด๋ฆญํ•˜๋ฉด ์•ˆ์˜ ๋‚ด์šฉ์ด ๋‚˜์˜ค๋Š” ๋ฐฉ์‹

 

 

1) ํ•ด๋‹น์˜์—ญ ํด๋ฆญ์‹œ ๋ฐฐ๊ฒฝ์ƒ‰์ด ๋ฐ”๋€Œ๋Š” ๊ตฌ์กฐ ๋งŒ๋“ค๊ธฐ

- ๋ณด๋‹ค ๋” ์งง๊ณ  ๊ฐ„๋‹จํ•œ ๋ฐฉ๋ฒ•

this ์‚ฌ์šฉ

- this๋ฅผ ์‚ฌ์šฉํ•œ 6๊ฐ€์ง€ ๋ฐฉ๋ฒ•

  โ— $์ด ํฌํ•จ๋œ ๋ณ€์ˆ˜๋ช…์„ ๋ณด๊ณ  ์–ด๋– ํ•œ ํ•จ์ˆ˜์ธ์ง€ ๋Œ€๋žต ์ถ”์ธกํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•œ๋‹ค. (์‹ค๋ฌด์ž๋“ค์˜ ๊ด€๋ก€)

  โ— ํ•œ ๋ฒˆ๋งŒ ์‚ฌ์šฉ๋  ๋ณ€์ˆ˜๋ผ๋ฉด ๊ตณ์ด ๋งŒ๋“ค ํ•„์š” ์—†๋‹ค.

  โ— this๋ฅผ ์“ฐ๊ณ  ์‹ถ๋‹ค๋ฉด ์ฒซ ๋ฒˆ์งธ ์ค„์— let $this = $(this);๋ฅผ ๋„ฃ์–ด์ฃผ๊ณ  ์‹œ์ž‘ํ•˜๋Š” ํŽธ์ด ์ข‹๋‹ค.

โ€ป this๋ผ๋Š” ํŠน์ˆ˜ํ•œ ์‹๋ณ„์ž๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋‹ค๋ฅธ ์–ธ์–ด์—์„œ๋„ ๋งŽ์ด ๋“ฑ์žฅํ•˜๋Š” ๊ฐœ๋…

ํ•จ์ˆ˜ ํ˜ธ์ถœ ๋ฐฉ์‹ this ๋ฐ”์ธ๋”ฉ
์ผ๋ฐ˜ ํ•จ์ˆ˜ ํ˜ธ์ถœ ์ „์—ญ ๊ฐ์ฒด
๋ฉ”์„œ๋“œ ํ˜ธ์ถœ ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•œ ๊ฐ์ฒด
์ƒ์„ฑ์ž ํ•จ์ˆ˜ ํ˜ธ์ถœ ์ƒ์„ฑ์ž ํ•จ์ˆ˜๊ฐ€ ์ƒ์„ฑํ•  ์ธ์Šคํ„ด์Šค
Function.prototype.apply/call/bind ๋ฉ”์„œ๋“œ์— ์˜ํ•œ ๊ฐ„์ ‘ ํ˜ธ์ถœ Function.prototype.apply/call/bind ๋ฉ”์„œ๋“œ์— ์ฒซ ๋ฒˆ์งธ ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•œ ๊ฐ์ฒด

์œ„์™€ ๊ฐ™์ด 4๊ฐ€์ง€ ๊ฒฝ์šฐ์— ๋”ฐ๋ผ์„œ this์˜ ๊ฐ’์ด ๋‹ค๋ฅด๊ฒŒ ๋ฐ”์ธ๋”ฉ ๋œ๋‹ค๊ณ  ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

[์ถœ์ฒ˜] ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(JavaScript) this ๋ฐ”์ธ๋”ฉ|์ž‘์„ฑ์ž ๊ฐœ๋ฐœํ•˜๋Š” ์–‘ํ† ๋ฆฌ

 

๋Œ“๊ธ€