์คํ ์ปจํ ์คํธ๊ฐ ์์ฑ๋๋ ์๊ฐ์ this ๋ฅผ ๋ฐ์ธ๋ฉํ๋ค. ๊ทธ๋ ๋ค๋ฉด, ์คํ์ปจํ ์คํธ๋ ์ธ์ ์์ฑ ๋ ๊น? ๋ฐ๋ก ํด๋น ์ปจํ ์คํธ์ ํด๋นํ๋ ํจ์๊ฐ ํธ์ถ๋๋ ์๊ฐ์ ์์ฑ ๋๋ค. ๊ทธ ๋ง์ธ ์ฆ์จ, this๋ ํจ์๊ฐ ํธ์ถ๋ ๋ ๊ฒฐ์ ๋๋ค๋ ์๋ฏธ์ด๋ค. this ๋ ์ ์ ์ผ๋ก ์ฝ๋๋ง ๋ดค์ ๋ ๋ฐ๋ก ์์ธกํ ์ ์๋ ๊ฒ์ด ์๋๋ผ, ํด๋น ํจ์๋ฅผ ์ด๋ค ์์ผ๋ก ํธ์ถํ๋๋์ ๋ฐ๋ผ์ ์ผ๋ง๋ ์ง ๋ฌ๋ผ์ง ์ ์๋ค. ์ฆ, ๋์ ์ผ๋ก ๋ฐ์ธ๋ฉ ๋๋ค๋ ์๋ฏธ์ด๋ค.
ThisBinding์ ํจ์๊ฐ ํธ์ถ๋ ๋ ๊ฒฐ์ ๋๊ณ (์คํ ์ปจํ ์คํธ๊ฐ ์์ฑ๋๋ ์๊ฐ), ํธ์ถํ๋ ๋ฐฉ์์ ๋ฐ๋ผ ๋ค๋ฅด๋ค.
ํธ์ถํ๋ ๋ฐฉ์์ ๋ฐ๋ผ this ๊ฐ ๋ฌ๋ผ์ง๋ค๋ ๋ป์ ๋ฌด์์ ์๋ฏธํ ๊น? ์์ ํ๋ฅผ ํ์ธํด๋ณด์.
๋ธ๋ผ์ฐ์ ์์๋ window
, node.js
์์๋ global
์ด๋ผ๋ ๊ฐ์ฒด๋ฅผ ๊ฐ๋ฆฌํจ๋ค. ์ ์ญ ์ปจํ
์คํธ๋ฅผ ์คํํ๋ ์ฃผ์ฒด๊ฐ ๋ฐ๋ก ์ ์ญ๊ฐ์ฒด์ด๊ธฐ ๋๋ฌธ์ด๋ฉฐ, ์ด ์ ์ญ ๊ฐ์ฒด๋ฅผ host ๊ฐ์ฒด๋ผ๊ณ ๋ ํ๋ค.
๋ธ๋ผ์ฐ์ ์์ console.log(this)
๋ฅผ ์ถ๋ ฅํ๋ฉด window
์ด๋ผ๋ ๊ฐ์ฒด๋ฅผ ์ถ๋ ฅํ๊ณ
node.js ์์ console.log(this)
๋ฅผ ์ถ๋ ฅํ๋ฉด global
์ด๋ผ๋ ๊ฐ์ฒด๋ฅผ ์ถ๋ ฅํ๋ค.
์ด window
์ global
์ ECMAScript
์์ ์ ์ํ ๊ฐ์ฒด๊ฐ ์๋๋ฉฐ, ECMAScript
๊ฐ ๋๋ฆ์ ๋ฐฉ์์ผ๋ก ์ ์ํด๋์ '์ ์ญ ๊ฐ์ฒด' ๋ด์ฉ์ ๋ฐ๋ผ์ '๋ฐํ์์์ ์ ๊ณตํ๋ ๊ตฌํ์ฒด' ์ด๋ค. ๊ทธ๋ฆฌ๊ณ , ๊ฐ host ํ๊ฒฝ์์ ์ ์ํ ๋ฐ์ ๋ฐ๋ผ์ ์ ์ญ ๊ฐ์ฒด์ ๊ตฌ์ฒด์ ์ธ ๋ด์ฉ์ด ๋ฌ๋ผ์ง๋ค.
ํจ์๋ฅผ ํธ์ถํ ๋์๋ this ๋ '์ ์ญ ๊ฐ์ฒด'๋ฅผ ๊ฐ๋ฆฌํจ๋ค๋ ์ด๊ฑด ๋ฌด์จ ์๋ฏธ์ผ๊น? ์๋์ ์์๋ฅผ ๋ณด์.
ํจ์๋ฅผ ์คํํ๋ ์๊ฐ์ ์ด ํจ์๋ฅผ ์คํํด์ฃผ๋ '์ฃผ์ฒด'๊ฐ ๋๊ตฌ์ธ์ง๋ฅผ ์๊ฐํ๋ฉด ์ดํดํ๋ ๊ฒ ์ข ์ฝ๋ค. ์์ ์์์์ a
๋ผ๋ ํจ์๋ฅผ ์ ์ญ ๊ณต๊ฐ์์ ํธ์ถํ๊ธฐ ๋๋ฌธ์, this
๋ ์ ์ญ ๊ฐ์ฒด๋ฅผ ๊ฐ๋ฆฌํค๊ฒ ๋๊ธฐ ๋๋ฌธ์ด๋ค. ์ด๋ฒ์ ๋ค๋ฅธ ์์๋ฅผ ์ดํด๋ณด์.
function b() {
function c() {
console.log(this);
}
c();
}
b();
c
ํจ์๋ฅผ ๋ด์์ c
ํจ์๋ฅผ ํธ์ถํ๊ณ ์๋ b
๋ผ๋ ํจ์๋ฅผ ํธ์ถํ๋ค๋ฉด ์ด๋จ๊น? ์ฒซ ๋ฒ์งธ ์์์์๋ a
๋ผ๋ ํจ์๋ฅผ ํธ์ถํ๋ ์ฃผ์ฒด๊ฐ '์ ์ญ ๊ฐ์ฒด' ์ด๊ธฐ์ this
๊ฐ ์ ์ญ ๊ฐ์ฒด๋ผ๋ ๊ฒ์ ์ฝ๊ฒ ์ดํด๊ฐ ๊ฐ๋ฅํ๋ค. ํ์ง๋ง ์์ ์์์์๋ c
ํจ์๋ฅผ b
ํจ์ ๋ด๋ถ์์ ํธ์ถํ๊ธฐ ๋๋ฌธ์ ์ฒซ ๋ฒ์งธ ์์์๋ ๋ค๋ฅธ ๊ฒฐ๊ณผ ๊ฐ์ ์ป์ ์ ์์ ๊ฒ๋ง ๊ฐ๋ค. ๊ฒฐ๊ณผ๋ ์ด๋จ๊น.
c
ํจ์๋ฅผ ํธ์ถํ ์ฃผ์ฒด๊ฐ b
ํจ์๋ผ๊ณ ์๊ฐํ๋ ๊ฒ๊ณผ๋ ๋ค๋ฅด๊ฒ, this
๋ ์ฌ์ ํ '์ ์ญ ๊ฐ์ฒด'๋ฅผ ๊ฐ๋ฆฌํค๊ณ ๊ทธ๊ฒ์ ์ถ๋ ฅํ๊ณ ์๋ ๊ฑธ ์ ์ ์๋ค. ์ฝ๊ฐ์ ํผ๋์ค๋ฝ๊ฒ ์ง๋ง ์ดํ์ ์ด๋ฌํ ๋ฌธ์ ์ ์ ํด๊ฒฐํ๊ธฐ ์ํ ๋์ฒด ๊ฐ๋
(arrow function
)์ด ES6 ์์ ๋ฑ์ฅํ๊ธฐ ๋๋ฌธ์ ๊ฑฑ์ ์ ํ์ง ์์๋ ๋๋ค. ๋ค๋ง ํจ์๋ก์จ ํธ์ถํ์ ๋ this
๋ ๋ฌด์กฐ๊ฑด ๊ทธ๋ฆฌ๊ณ ์ธ์ ๋ '์ ์ญ ๊ฐ์ฒด'๋ฅผ ๊ฐ๋ฆฌํจ๋ค๋ ๊ฒ๋ง์ ๊ธฐ์ตํ๊ณ ์์.
๐ ์์์ ๊ฑฐ๋ก ํ๋ฏ์ด ์ด๋ฌํ ๊ฒฐ๊ณผ๊ฐ ๋ฌธ์ ๋ผ๋ ์๊ฒฌ์ด ๋ค๋ถํ๊ธฐ ๋๋ฌธ์ ECMAScript 6 ์์๋ ์์
thisBinding
์ ํ์ง ์๋arrow function
์ด๋ผ๋ ๊ฐ๋ ์ด ๋ฑ์ฅํ๊ฒ ๋์๋ค. ์ดarrow function
์ ๋ฐ๋ก ์ ์ปจํ ์คํธ์ ์๋ this ๋ฅผ ๊ทธ๋๋ก ๊ฐ์ ธ๋ค ์ฌ์ฉํ๋ค.
let d = {
e: function() {
function f(){
console.log(this);
}
f();
}
};
d.e();
d
๊ฐ์ฒด ์์ e
๋ผ๊ณ ํ๋ ๋ฉ์๋๊ฐ ์กด์ฌํ๊ณ , ๋ฉ์๋๋ก์ e
๋ฅผ ํธ์ถํ๋ค๋ฉด ์ด๋ป๊ฒ ๋ ๊น?
e
๋ฉ์๋ ์์ f
๋ผ๊ณ ํ๋ ๋ด๋ถ ํจ์๊ฐ ์๊ณ , this
๋ฅผ ์ฝ์์ ์ถ๋ ฅํ๋ ์ด ๋ด๋ถ ํจ์๋ฅผ ํธ์ถํ์ ๋ ์ญ์ ๋ง์ฐฌ๊ฐ์ง๋ก window
์ ์ญ ๊ฐ์ฒด๊ฐ ์ถ๋ ฅ๋๋ค. ์ ๊ทธ๋ด๊น?
this
๋ฅผ ๊ฐ๋ฐ์ ๋๊ตฌ์ ์ถ๋ ฅํ๋ ํจ์์ธ f
๋ฅผ ์ด๋ป๊ฒ ํธ์ถํ๊ณ ์๋์ง(ํธ์ถํ ํํ)๋ง ๋ณด๋ฉด ๋๋ค. ์ด์จ๋ ํจ์๋ก์จ ํธ์ถํ๊ธฐ ๋๋ฌธ์ this
๋ '์ ์ญ ๊ฐ์ฒด'๋ฅผ ๊ฐ๋ฆฌํค๊ฒ ๋๋ ๊ฒ์ด๋ค.
๋ฉ์๋๋ก ํธ์ถ ํ์ ๋์ this ๋ ๋ฉ์๋๋ฅผ ํธ์ถํ ์ฃผ์ฒด, ์ฆ ๋ฉ์๋๋ฅผ ๋๊ฐ ํธ์ถํ๋๋์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋ค. ์์๋ฅผ ๋ณด์.
a.b()
๋ฅผ ํธ์ถํด์ b
ํจ์ ๋ด๋ถ์ this
๋ฅผ ์ถ๋ ฅํด๋ณด๋ฉด ์๋์ ๊ฐ์ ๊ฒฐ๊ณผ๊ฐ ๋์จ๋ค. { b: function() { console.log(this) }}
์ ๋๊ฐ์ด ์๊ธด ๊ฒฐ๊ณผ ๊ฐ์ด๋ค. ์ด ๊ฒฐ๊ณผ ๊ฐ์ด ์๋ฏธํ๋ ๊ฒ์ ๋ง ๊ทธ๋๋ก a.b()
๋ฅผ ํธ์ถํด์ console.log(this)
๋ฅผ ์ถ๋ ฅํ์ ๋์ this
๋ a
๋ผ๋ ๋ป์ด๋ค. ์๋์ ์ถ๋ ฅ์ธ { b: function() { console.log(this) }}
๋ ๊ณง a
๊ฐ์ ๊ฐ์ด๊ธฐ ๋๋ฌธ์ด๋ค.
์์์ a.b()
์ฒ๋ผ .
์ด ์๋ค๋ฉด ์์ ๊ฐ์ฒด์ ๋ฉ์๋๋ก์จ .
๋ค์ ์๋ ๊ฒ์ด ๋ฉ์๋๋ก์จ ํธ์ถํ๋ค๋ ๋ป์ด ๋๋ค. ๋ค์ ๋งํด, a.b()
๋ b
ํจ์๋ฅผ a
๊ฐ์ฒด์ ๋ฉ์๋๋ก์จ ํธ์ถํ ๊ฒ์ด๋ค.
๐ ๊ฐ์ฒด์งํฅ ์ธ์ด์์ ๋ฉ์๋๋ ์ธ์คํด์ค(๊ฐ์ฒด)์ ๊ด๋ จ๋ ๋์์ ์๋ฏธํ๋ค. ๊ทธ๋ฆฌ๊ณ ์ธ์คํด์ค๋ ์ด๋ค ํด๋์ค์ ์ํ๋ '๊ฐ์ฒด'๋ผ๋ ๋ป์ด๊ธฐ์, ์์ Javascript ์์๋ ํด๋์ค๊ฐ ์๋๋๋ผ๋ ๊ฐ์ฒด์ด๊ธฐ๋ง ํ๋ฉด ์ด๋ค ๊ฐ์ฒด์ ๊ด๋ จ๋ ๋์์ ๋ปํ๋ ๋ง๋ก ๋ฒ์๋ฅผ ํ์ฅ์์ผฐ๋ค. ์ฆ, ํด๋์ค์ ์ธ์คํด์ค์ธ์ง ์ฌ๋ถ์๋ ์๊ด ์์ด ๊ฐ์ฒด์ ๊ด๋ จ๋ ๋์์ด๊ธฐ๋ง ํ๋ฉด '๋ฉ์๋'๋ผ๋ ๊ฒ์ด๋ค.
๊ฐ์ฒด a
์ b
๊ฐ์ผ๋ก ํ ๋นํ function()
์ ์๋๋ ํจ์์ด์ง๋ง ๊ฐ์ฒด์ ๊ด๋ จ๋ ๋์์ ํ๊ฒ ๋๋ฉด ๋ฉ์๋๋ก์ ๊ธฐ๋ฅํ๋ค๋ ๋ป์ด๋ค. ๋ค๋ฅธ ์์๋ ์ดํด๋ณด์.
์ด๋ฒ์๋ a.b.c()
๋ฅผ ํธ์ถํ๋ค. ์ด๋ c
๋ผ๋ ํจ์ ์์์ this
๋ฅผ ํธ์ถํ๋ฉด this
๋ a.b
๊ฐ ๋๋ค. ๊ฒฐ๊ณผ๋ฅผ ๋ณด๋ฉด, c: f()
๋ { c: function() { console.log(this) } }
๋ฅผ ์๋ฏธํ๋ค. ์ฆ, c
ํจ์์ a.b
๋ผ๋ ๊ฐ์ฒด์ ๊ด๋ จ๋ ๋์์ ์ํํ๋ผ๋ ๋ช
๋ น์ ํ ๊ฒ์ด๋ค.
ex) obj.b()
์ ๊ฒฝ์ฐ, this๋ obj
๋ฅผ ๊ฐ๋ฆฌํจ๋ค.
ex) obj['func']()
์ ๊ฒฝ์ฐ, this๋ obj
๋ฅผ ๊ฐ๋ฆฌํจ๋ค.
ex) person.info.getName()
์ ๊ฒฝ์ฐ, this ๋ person.info
๋ฅผ ๊ฐ๋ฆฌํจ๋ค.
ex) person.info['getName']()
์ ๊ฒฝ์ฐ, this ๋ person.info
๋ฅผ ๊ฐ๋ฆฌํจ๋ค.
ex) person['info']['getName']()
์ ๊ฒฝ์ฐ, this ๋ person['info']
๋ฅผ ๊ฐ๋ฆฌํจ๋ค.
์ด์ ์ ์ดํด๋ณด์๋ ์ฝ๋ ์์์์,
๋ฉ์๋ ์์ ๋ด๋ถ ํจ์๊ฐ ์๊ณ ํด๋น ํจ์๋ฅผ ํธ์ถํ์ ๋ ๊ทธ ๋ด๋ถ์ this ์ญ์ '์ ์ญ ๊ฐ์ฒด'๋ฅผ ๊ฐ๋ฆฌํค๋ ๊ฒ์ ์ฌ๋ฌ๋ชจ๋ก ์ด์ํ๊ณ ๋ฌธ์ ๊ฐ ์๋ค๊ณ ๋งํ์๋ค. ์ด๋ฌํ ๋ฌธ์ ๋ฅผ ๋ฐฉ์งํ๊ธฐ ์ํด์ ์ฐ๋ฆฌ๋ '์ฐํ๋ฒ'์ด๋ผ๋ ๊ฒ์ ์ฌ์ฉํด๋ณผ ์ ์๋ค. (arrow function
์ ์กฐ๊ธ ๋ค์ ์ค๋ช
ํ ๊ฒ์ด๋ ๊ฑฑ์ ํ์ง ๋ง์!) ์๋์ ์์๋ฅผ ํจ๊ป ๋ณด๋ฉด์ ์ด ์ฐํ๋ฒ์ ๋ํด ์ค๋ช
ํด๋ณด๋ ค๊ณ ํ๋ค.
let a = 10;
let obj = {
a: 20,
b: function(){
console.log(this.a); // 20 ์ถ๋ ฅ
function c() {
console.log(this.a);
}
c(); // 10 ์ถ๋ ฅ
}
}
obj.b();
์์ ์ฝ๋๋ฅผ ๋ณด๋ฉด obj.b()
๊ฐ ๋ฉ์๋๋ก์จ ํธ์ถ์ด ๋๋ค. ๊ทธ๋ฌ๋, b
์์์ this
๋ ๋น์ฐํ obj
๊ฐ ๋ ๊ฒ์ด๊ณ , this.a
๋ obj
์์ ๊ฐ๋ฆฌํจ a
์ ๊ฐ, 20์ด ์ถ๋ ฅ๋ ๊ฒ์ด๋ค. ์๋์ ๋ด๋ถ ํจ์์ธ c
ํจ์๋ ๋์ผํ๊ฒ this.a
๋ฅผ ์ถ๋ ฅํ๊ณ ์์ง๋ง, ๋ด๋ถ์์ c
๋ฅผ ํจ์๋ก์จ ํธ์ถํ๊ณ ์์ผ๋ฏ๋ก this
๋ '์ ์ญ ๊ฐ์ฒด'๊ฐ ๋๋ฉฐ, ์ ์ญ์์ ์ ์ธํ a
๋ณ์์ ๊ฐ 10์ด ์ถ๋ ฅ ๋ ๊ฒ์ด๋ค. ๊ทธ๋ฌ๋๊น obj
์ ํ๋กํผํฐ a
์ ๊ฐ์ ์ถ๋ ฅํ๋ผ๊ณ ํ๋๋ '์ ์ญ ๋ณ์' a
์ ๊ฐ(window.a
)์ ์ฃผ๋ ๊ฒ์ด๋ค.
์๋ฌดํผ c
ํจ์ ๋ด๋ถ์์ ์ฐ๋ฆฌ๊ฐ ๊ฐ๋ฆฌํค๊ณ ์ ํ๋ this.a
์ this
๊ฐ '์ ์ญ ๊ฐ์ฒด'(window
)๊ฐ ์๋๋ผ, obj
์ฌ์ผ ํ๋ค๋ฉด, ์ด๋ป๊ฒ ํด์ผ ํ๋ ๊ฑธ๊น?
์์ฝ๊ฒ๋ ํ์ฌ๊น์ง๋ call
, apply
, ๊ฐ์ ๋ช
์์ ์ธ this ๋ฐ์ธ๋ฉ ๋ช
๋ น์ ์ฐ์ง ์๊ณ ์๋ this
์์ฒด๋ฅผ ์ง์ ๋ค๋ฅธ ๊ฐ์ผ๋ก ๋ฎ์ด ์์ธ ์ ์๋ค. ๊ทธ๋ฌ๋ c
ํจ์์์ this
๋ฅผ ์ฌ์ฉํ๋ฉด, ๊ธฐ๋ณธ์ ์ผ๋ก๋ '์ ์ญ ๊ฐ์ฒด'๋ฅผ ๊ฐ๋ฆฌํฌ ์ ๋ฐ์ ์๋ค๋ ๋ป์ด ๋๋ค.
let a = 10;
let obj = {
a: 20,
b: function(){
let self = this;
console.log(this.a); // 20 ์ถ๋ ฅ
function c() {
console.log(self.a);
}
c(); // 20 ์ถ๋ ฅ
}
}
obj.b();
์์ ์ฝ๋๋ฅผ ๋ณด๋ฉด, ์ฐ๋ฆฌ๋ ์์์ ๋ฐฐ์ด ์ค์ฝํ ์ฒด์ธ์ ์ด์ฉํ๊ณ ์์์ ์ ์ ์๋ค. ์ฆ, ๋ด๋ถ ํจ์๋ณด๋ค ์์์์ self
๋ผ๊ณ ํ๋ ๋ณ์์ this ๋ฅผ ๋ด๊ณ , c
ํจ์ ๋ด๋ถ์ this ๋์ a
์ ์ ๊ทผํด์ ์ฌ์ฉํ๊ณ ์๋ค. ์ด๋ ๊ฒ ๋๋ฉด, ๋ด๋ถ ํจ์ c
๋ ์์ ์ LexicalEnvironment ์์ this ๋์ self
๋ฅผ ์ฐพ๊ณ (์์์์ ์ค์ ํ๊ธฐ ๋๋ฌธ์ ์์ ์๊ฒ ์์ ๊ฒ์ด๋ค.) ๋ค์ outerEnvironmentReference ๋ฅผ ํ๊ณ ์ธ๋ถ(์์)์ b
ํจ์์ LexicalEnvirionment ์์ self
๋ฅผ ์ฐพ๋๋ค. self
์๋ ์์ ๋ค์ด์จ this ๊ฐ ๋ด๊ฒจ์์ ๊ฒ์ด๊ณ , ์ด๋์ this ๋ obj.b()
๋ฅผ ๋ฉ์๋๋ก์จ ํธ์ถํ ๋์ this ์ด๊ธฐ์ obj
๋ฅผ ๊ฐ๋ฆฌํฌ ๊ฒ์ด๋ค. ์ด๋ ๊ฒ ๋๋ฉด, ํจ์๋ก์จ ํธ์ถํ c
ํจ์ ๋ด๋ถ์์์ this ์ญ์, ๋ฉ์๋๋ก์จ ํธ์ถํ ๋์ ๋์ผํ this ๋ฅผ ๊ฐ๋ฆฌํฌ ์ ์๊ฒ ๋๋ค.
let a = 10;
let obj = {
a: 20,
b: function(){
console.log(this.a); // 20 ์ถ๋ ฅ
const c = () => {
console.log(this.a);
}
c(); // 20 ์ถ๋ ฅ
}
}
obj.b();
ES6 ์์๋ this ๋ฅผ ๋ฐ์ธ๋ฉํ์ง ์๋ arrrow function
์ด ๋ฑ์ฅํ๋๋ฐ, ์ด๋ฅผ ์ฌ์ฉํ๋ฉด ์์์ ํ๋ ๋ฐฉ์์ฒ๋ผ ์ฐํ๋ฒ์ ์ฌ์ฉํ์ง ์์๋ ๋๋ค. this๋ฅผ ๋ฐ์ธ๋ฉํ์ง ์๊ธฐ ๋๋ฌธ์ ์ค์ฝํ ์ฒด์ด๋ ์์ this์ ๋ฐ๋ก ์ ๊ทผํ ์ ์๊ฒ ๋๊ธฐ ๋๋ฌธ์ด๋ค.
b: function(){
console.log(this.a); // 20 ์ถ๋ ฅ
const c = () => {
console.log(this.a);
}
c(); // 20 ์ถ๋ ฅ
}
c
๋ผ๋ arrow function
์์ ๊ฐ๋ฆฌํค๋ this๋ ๋ฐ์ธ๋ฉํ์ง ์๊ธฐ ๋๋ฌธ์ ์์์ ์๋ this๋ฅผ ๊ทธ๋๋ก ์ฌ์ฉํ๊ณ , 20์ ์ถ๋ ฅํ๊ฒ ๋๋ค.
๐ ์์ ์ธ๊ธํ๋ ๊ฒ์ฒ๋ผ, ES5 ์์๋
call
์ด๋apply
๊ฐ์ ๋ฐฉ๋ฒ์ผ๋ก ๊ฐ๋จํ๊ฒ ์ฒ๋ฆฌํ ์ ์๋ค.
๊ธฐ๋ณธ์ ์ผ๋ก๋ 'ํจ์ ํธ์ถ ์์' ์ฒ๋ผ ํจ์ ๋ด๋ถ์์์ ๋์ผํ๊ฒ ์ ์ญ ๊ฐ์ฒด๋ฅผ ๊ฐ๋ฆฌํค์ง๋ง, ์ฝ๋ฐฑ ํจ์๋ฅผ ์ด๋ค ์์ผ๋ก ์ฒ๋ฆฌํ๋์ง์ ๋ฐ๋ผ์ (.call
, .bind()
, apply()
๋ฑ) this๋ ์ผ๋ง๋ ์ง ๋ฌ๋ผ์ง ์ ์๋ค. ์๋ฅผ ๋ค์ด, .bind()
๋ฅผ ์ฌ์ฉํด์ ์ฌ์ฉ์๊ฐ ์ง์ this๋ฅผ ๋ช
์ํ ์๋ ์๋ค.
.call
.bind()
apply()
function a(x, y, z) {
console.log(this, x, y, z);
};
let b = {
bb: 'bbb'
};
a.call(b, 1, 2, 3);
a.apply(b, [1, 2, 3]);
let c = a.bind(b);
c(1, 2, 3);
let d = a.bind(b, 1, 2);
d(3);
์์ ๊ฒฐ๊ณผ๋ฅผ ๋ณด๋ฉด ๋์ผํ ๊ฒฐ๊ณผ๊ฐ ์ถ๋ ฅ๋๋ค. a.call(b, 1,2,3)
์ธ ๊ฒฝ์ฐ, console.log(this, 1,2,3)
๋ฅผ ์ถ๋ ฅํ์ ๋ { bb: 'bbb' } 1 2 3
์ด ๋์๋ค. ์ฆ this
๋ ๋ณ์ b
๋ฅผ ๊ฐ๋ฆฌํค๋ ๊ฑธ ์ ์ ์๋ค. a.apply(b, [1,2,3])
๋ ๋ง์ฐฌ๊ฐ์ง๋ค. ๋ฐฐ์ด๋ก ๋๊ธด ๊ฐ๊ฐ์ ์์๋ค์ด ๋งค๊ฐ๋ณ์ x, y, z
๋ก ๋์ด๊ฐ๊ณ , this
๋ ๋ณ์ b
๋ฅผ ๊ฐ๋ฆฌํค๊ณ ์๋ค. c
์ ๊ฒฝ์ฐ, a
์ b
๋ฅผ bind
ํ๊ณ ๊ทธ ํ์ c
๋ฅผ ๋ค์ ํธ์ถํด์ฃผ๋ ํํ๋ค. ๊ทธ ๋ง์ธ์ฆ์จ, ๋ณ์ c
์ ๋ด๋ a.bind(b)
๊น์ง๋ ์์ง ํธ์ถ์ด ๋์ง ์๊ณ this
๋ฅผ ๊ทธ์ ๋ค๊ณ ์๋ ์ํ๋ผ๊ณ ์ ์ถํด๋ณผ ์ ์๋ค. ๊ทธ๋ฆฌ๊ณ c
๋ฅผ ํธ์ถํด์ค์ผ๋ก์ ์ฒ์์ ๋๊ฒจ์ค this
๋ฅผ ๋ค๊ณ ์๋ ์ํ์์ ๋๋จธ์ง ์ธ์๋ค์ด ๋ค์ด๊ฐ๋ค๊ณ ๋ณผ ์ ์๋ค. d
๋ฅผ ๋ณด๋ฉด ์กฐ๊ธ ๋ ํ์คํด์ง๋ค. ์ฒ์์๋ this
์ธ b
์ ์ฒซ ๋ฒ์งธ, ๋ ๋ฒ์งธ ๋งค๊ฐ๋ณ์ ๊น์ง ๋๊ฒจ์ฃผ์์ง๋ง ์์ง ์คํ์ ํ์ง ์์ ์ํ์ด๋ค. ์ด๋ ๊ฒ ๋ณ๊ฐ์ bind
๋ ํจ์๋ฅผ ๋ง๋ค์ด๋์ ์ํ์์ d
๋ฅผ ํธ์ถํ๋ฉด์ ๋๋จธ์ง ์ธ ๋ฒ์งธ ๋งค๊ฐ๋ณ์๋ฅผ ์ถ๊ฐํ๋ค. ๊ทธ๋ฌ๋๊น ๋จผ์ this
์ 1, 2 ๋ ๋ค์ด๊ฐ์๋ ์ํ์์ 3์ ๋ค์ ๋๊น์ผ๋ก์จ ์ค์ ํจ์๋ฅผ ํธ์ถํ๋ ๊ฒ ๋๋ค.
bind
func.bind(thisArg[, arg1[, arg2[, ...]]])
apply
func.bind(thisArg[, arg1[, arg2[, ...]]])
call
func.call(thisArg[, arg1[, arg2[, ...]]])
MDN ๊ณต์๋ฌธ์ ์ถ์ฒ : Function.prototype.bind()
MDN ๊ณต์๋ฌธ์ ์ถ์ฒ : Function.prototype.apply()
MDN ๊ณต์๋ฌธ์ ์ถ์ฒ : Function.prototype.call()
ex) this
๋ฅผ ๋ช
์์ ์ผ๋ก ๋ฐ์ธ๋ฉํ์ง ์์์ ๋
let callback = function() {
console.dir(this); // window ์ ์ญ๊ฐ์ฒด
};
let obj = {
a: 1,
b: function(cb) {
cb(); // ํจ์๋ก์จ ํธ์ถ
}
}
obj.b(callback);
ex) this
๋ฅผ ๋ช
์์ ์ผ๋ก ๋ฐ์ธ๋ฉ ํ์ ๋
let callback = function() {
console.dir(this); // obj ์ถ๋ ฅ
};
let obj = {
a: 1,
b: function(cb) {
cb.call(this); // obj๋ฅผ this๋ก ๋๊น
}
}
obj.b(callback);
callback
ํจ์๋ฅผ ๋๊ฒจ๋ฐ์ ๋์์ด cb
๋ฅผ ๊ทธ๋ฅ ํจ์๋ก์จ ํธ์ถํ์ ๋๋ ๋น์ฐํ ์ ์ญ๊ฐ์ฒด๊ฐ this
๋ก ์ถ๋ ฅ๋์ง๋ง, callback
ํจ์๋ฅผ ๋๊ฒจ๋ฐ์ ๋์์ด cb.call
๋ก this
๋ฅผ ๋๊ฒจ์ค๋ค๋ฉด ๊ทธ๋๋ obj
๊ฐ this
๊ฐ ๋๋ค. ๊ทธ ๋ง์ธ ์ฆ์จ, ์์ ์ฝ๋์์์ callback
์ด๋ผ๋ ํจ์๋ฅผ ์คํํ๋๋ฐ this
๋ obj
๋ก ํด์ผํ๋ค๋ ๋ช
๋ น์ ๋ด๋ฆฐ๋ค๋ฉด obj
๊ฐ this
๋ก ์ถ๋ ฅ๋๋ ๊ฒ์ด๊ณ , ์ด๋ ๊ฒ ๋ช
์์ ์ผ๋ก this
๋ฅผ ๋ฐ์ธ๋ฉํ์ง ์์ผ๋ฉด ์ ์ญ๊ฐ์ฒด๊ฐ this
๋ก ์ถ๋ ฅ๋๋ค๋ ์๋ฏธ์ด๋ค.this
๋ ์ง์ ํ๋ ๋ฐ์ ๋ฐ๋ผ์ ๊ทธ๋๊ทธ๋ ๋ฌ๋ผ์ง๋ค.ex) this
๋ฅผ ๋ช
์์ ์ผ๋ก ๋ฐ์ธ๋ฉํ์ง ์์์ ๋
let callback = function() {
console.dir(this);
};
let obj = {
a: 1,
}
setTimeout(callback, 100)
ex) this
๋ฅผ ๋ช
์์ ์ผ๋ก ๋ฐ์ธ๋ฉ ํ์ ๋
let callback = function() {
console.dir(this);
};
let obj = {
a: 1,
}
setTimeout(callback.bind(obj), 100)
(์ถ๊ฐ ์์ฑ ์์ )
(์ถ๊ฐ ์์ฑ ์์ )
๐จ ํด๋น ํฌ์คํ ์ ์ ์ฌ๋จ์ โ์ฝ์ด ์๋ฐ์คํฌ๋ฆฝํธโ ๊ฐ์์ ๋๋ช ์ ์ฑ ์ ๋ฒ ์ด์ค๋ก ํ ๊ธฐ๋ก์ ๋๋ค.
๐ ํ์ ๊ทธ๋ฆผ์ ์ ๋ถ ์ ๊ฐ ํ๋ํ๋ ๊ทธ๋ฆฐ ๊ฒ์ ๋๋ค.. ๋ถํ ์์ ๐ฅธ