μ£Όλ‹ˆμ–΄ 개발자의 개인 곡뢀 과정을 κΈ°λ‘ν•©λ‹ˆλ‹€.


μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ κ°€μž₯ ν˜Όλž€μŠ€λ‘œμš΄ κ°œλ…? this?

λ‹€λ₯Έ λŒ€λΆ€λΆ„μ˜ 객체지ν–₯ μ–Έμ–΄μ—μ„œ thisλŠ” 클래슀둜 μƒμ„±ν•œ μΈμŠ€ν„΄μŠ€ 객체λ₯Ό μ˜λ―Έν•œλ‹€. ν΄λž˜μŠ€μ—μ„œλ§Œ μ‚¬μš©ν•  수 있기 λ•Œλ¬Έμ— ν˜Όλž€μ˜ 여지가 λ§Žμ§€λŠ” μ•Šλ‹€.

ν•˜μ§€λ§Œ μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œμ˜ thisλŠ” μ–΄λ””μ„œλ“  μ‚¬μš©ν•  수 있고, thisκ°€ λ°”λΌλ³΄λŠ” λŒ€μƒμ΄ 상황에 따라 λ°”λΌλ³΄λŠ” λŒ€μƒμ΄ 달라진닀

ν•¨μˆ˜μ™€ 객체(λ©”μ„œλ“œ)의 ꡬ뢄이 λŠμŠ¨ν•œ μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ thisλŠ” μ‹€μ§ˆμ μœΌλ‘œ 이 λ‘˜μ„ κ΅¬λΆ„ν•˜λŠ” 거의 μœ μΌν•œ κΈ°λŠ₯이닀.



상황에 따라 λ‹¬λΌμ§€λŠ” this

μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ thisλŠ” 기본적으둜 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ 생성될 λ•Œ ν•¨κ»˜ κ²°μ •λœλ‹€. μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•  λ•Œ μƒμ„±λ˜λ―€λ‘œ.thisλŠ” ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•  λ•Œ κ²°μ •λœλ‹€κ³  ν•  수 μžˆλ‹€.

ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜λŠ” 방식에 따라 값이 λ‹¬λΌμ§€λŠ”λ°

  • μ „μ—­ κ³΅κ°„μ—μ„œμ˜ this
  • λ©”μ„œλ“œλ‘œμ„œ ν˜ΈμΆœν•  λ•Œ κ·Έ λ©”μ„œλ“œ λ‚΄λΆ€μ—μ„œμ˜ this
  • ν•¨μˆ˜λ‘œμ„œ ν˜ΈμΆœν•  λ•Œ κ·Έ ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œμ˜ this
  • 콜백 ν•¨μˆ˜ 호좜 μ‹œ κ·Έ ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œμ˜ this
  • μƒμ„±μž ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œμ˜ this 이 μžˆλ‹€

πŸ”Ή μ „μ—­ κ³΅κ°„μ—μ„œμ˜ this

μ „μ—­ κ³΅κ°„μ—μ„œ thisλŠ” μ „μ—­ 객체λ₯Ό 가리킨닀. κ°œλ…μƒ μ „μ—­ μ»¨ν…μŠ€νŠΈλ₯Ό μƒμ„±ν•˜λŠ” 주체가 λ°”λ‘œ μ „μ—­ 객체이기 λ•Œλ¬Έμ΄λ‹€.

μ „μ—­ κ°μ²΄λŠ”

  • μžλ°”μŠ€ν¬λ¦½νŠΈ λŸ°νƒ€μž„ ν™˜κ²½μ— 따라 λ‹€λ₯Έ 이름과 정보λ₯Ό 가지고 μžˆλ‹€
    • λΈŒλΌμš°μ € ν™˜κ²½μ—μ„œ μ „μ—­ κ°μ²΄λŠ” window 이고
    • Node.js ν™˜κ²½μ—μ„œλŠ” global 이닀
  • μ „μ—­ κ³΅κ°„μ—μ„œμ˜ thisλŠ” μ „μ—­ 객체λ₯Ό μ˜λ―Έν•˜λ©°λ©°, μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ λͺ¨λ“  λ³€μˆ˜λŠ” νŠΉμ • 객체의 ν”„λ‘œνΌν‹°λ‘œ ν• λ‹Ήλœλ‹€. 그리고 κ·Έ νŠΉμ • κ°μ²΄λž€ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ LexicalEnvirment(L.E) 이닀.
let a = 1;
console.log(a) // 1
console.log(window.a) // 1
console.log(this.a) // 1

window.a = 3
console.log(a) // 3
console.log(this.a) // 3
console.log(this.a) // 3

window.b = 5
delete a // false
delete window.a // false
delete window.b // true

λ³€μˆ˜μ— delete μ—°μ‚°μžλ₯Ό μ“°λŠ” 것이 이상해보일 μˆ˜λ„ μžˆμ§€λ§Œ, window.λ₯Ό μƒλž΅ν•œ 것과 κ°™λ‹€. μ „μ—­ λ³€μˆ˜κ°€ 곧 μ „μ—­ 객체의 ν”„λ‘œνΌν‹°μ΄λ―€λ‘œ λ¬Έμ œλ˜μ§€ μ•ŠλŠ”λ‹€.

μ „μ—­ λ³€μˆ˜λ₯Ό μ„ μ–Έν•˜λ©΄ μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진이 μžλ™μœΌλ‘œ μ „μ—­ 객체의 ν”„λ‘œνΌν‹°λ‘œ ν• λ‹Ήν•˜λ©΄μ„œ μΆ”κ°€μ μœΌλ‘œ ν•΄λ‹Ή ν”„λ‘œνΌν‹°μ˜ configurable 속성(λ³€κ²½ 및 μ‚­μ œ κ°€λŠ₯μ„±)을 false둜 μ •μ˜ν•œλ‹€.

μ „μ—­ λ³€μˆ˜μ™€ μ „μ—­ 객체의 ν”„λ‘œνΌν‹°λŠ” ν˜Έμ΄μŠ€νŒ… μ—¬λΆ€ 및 configurable μ—¬λΆ€μ—μ„œ 차이가 μžˆλ‹€



πŸ”Ή λ©”μ„œλ“œλ‘œμ„œ ν˜ΈμΆœν•  λ•Œ κ·Έ λ©”μ„œλ“œ λ‚΄λΆ€μ—μ„œμ˜ this

βœ”οΈν•¨μˆ˜ vs. λ©”μ„œλ“œ

μ–΄λ–€ ν•¨μˆ˜λ₯Ό μ‹€ν–‰ν•˜λŠ” 방법은 μ—¬λŸ¬ 가지가 μžˆλŠ”λ°, 일반적으둜

  • ν•¨μˆ˜λ‘œμ„œ ν˜ΈμΆœν•˜λŠ” 경우
  • λ©”μ„œλ“œλ‘œμ„œ ν˜ΈμΆœν•˜λŠ” κ²½μš°κ°€ μžˆλ‹€

ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄μ—μ„œ ν•¨μˆ˜μ™€ λ©”μ„œλ“œλŠ” 미리 μ •μ˜ν•œ λ™μž‘μ„ μˆ˜ν–‰ν•˜λŠ” μ½”λ“œ λ­‰μΉ˜λ‘œ, 이 λ‘˜μ„ κ΅¬λΆ„ν•˜λŠ” μœ μΌν•œ μ°¨μ΄λŠ” 독립성에 μžˆλ‹€

  • ν•¨μˆ˜: κ·Έ 자체둜 독립적인 κΈ°λŠ₯을 μˆ˜ν–‰
  • λ©”μ„œλ“œ: μžμ‹ μ„ ν˜ΈμΆœν•œ λŒ€μƒ 객체에 κ΄€ν•œ λ™μž‘μ„ μˆ˜ν–‰
const func = function (x) {
  console.log(this, x)
}

// ν•¨μˆ˜λ‘œμ„œ 호좜
func(1)          // Window { ... } 1

const obj = {
  method : func
}

// λ©”μ„œλ“œλ‘œμ„œ 호좜
obj.method(2);   // { method: f } 2
obj['method'](2) // { method: f } 2

βœ”οΈ λ©”μ„œλ“œ λ‚΄λΆ€μ—μ„œμ˜ this

thisμ—λŠ” ν˜ΈμΆœν•œ 주체에 λŒ€ν•œ 정보가 λ‹΄κΈ΄λ‹€ μ–΄λ–€ ν•¨μˆ˜λ₯Ό λ©”μ„œλ“œλ‘œμ„œ ν˜ΈμΆœν•˜λŠ” 경우 호좜 μ£Όμ²΄λŠ” ν•¨μˆ˜λͺ…(ν”„λ‘œνΌν‹°λͺ…) μ•žμ˜ 객체이닀

const obj = {
  methodA : function () { console.log(this) }
  inner : {
    methodB : function () { console.log(this) }
  }
}

obj.methodA();             // { methodA: f, inner: {...} } (=== obj)

obj.inner.methodB();       // { methodB: f } (=== obj.inner)
obj.inner['methodB']();    // { methodB: f } (=== obj.inner)
obj['inner']['methodB'](); // { methodB: f } (=== obj.inner)



πŸ”Ή ν•¨μˆ˜λ‘œμ„œ ν˜ΈμΆœν•  λ•Œ κ·Έ ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œμ˜ this

βœ”οΈ ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œμ˜ this

  • μ–΄λ–€ ν•¨μˆ˜λ₯Ό ν•¨μˆ˜λ‘œμ„œ ν˜ΈμΆœν•  κ²½μš°μ—λŠ” thisκ°€ μ§€μ •λ˜μ§€ μ•ŠλŠ”λ‹€

  • thisμ—λŠ” ν˜ΈμΆœν•œ 주체의 정보λ₯Ό λ‹΄κ³  μžˆλŠ”λ°, ν•¨μˆ˜λ‘œμ„œ ν˜ΈμΆœν•˜λŠ” 것은 호좜 주체λ₯Ό λͺ…μ‹œν•˜μ§€ μ•Šκ³  κ°œλ°œμžκ°€ μ½”λ“œλ₯Ό 직접 μ‹€ν–‰ν•œ 것이기 λ•Œλ¬Έμ— 호좜 주체λ₯Ό μ•Œ 수 μ—†λ‹€

μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ ν™œμ„±ν™”ν•  λ‹Ήμ‹œμ— thisκ°€ μ§€μ •λ˜μ§€ μ•Šμ€ 경우 thisλŠ” μ „μ—­ 객체λ₯Ό 바라본닀. λ”°λΌμ„œ ν•¨μˆ˜μ—μ„œμ˜ thisλŠ” μ „μ—­ 객체λ₯Ό 가리킨닀.

βœ”οΈ λ©”μ„œλ“œμ˜ λ‚΄λΆ€ν•¨μˆ˜μ—μ„œμ˜ this

const obj1 = {
  outer : function () { 
    	console.log(this);          // (1)
  		const innerFunc = function () {
        	console.log(this);      // (2) (3)
        }
        innerFunc();                // (2) 호좜
    
    const obj2 = {
    	innerMethod : innerFunc
    }
    obj2.innerMethod()              // (3) 호좜
  }
}
obj1.outer();                       // (1) 호좜

(1)호좜: ν˜ΈμΆœν•  λ•Œ 점(.)이 μžˆλ‹€ βž” λ©”μ„œλ“œλ‘œμ„œ 호좜 βž” obj1을 바인딩 함

(2)호좜: ν˜ΈμΆœν•  λ•Œ 점(.)이 μ—†λ‹€ βž” ν•¨μˆ˜λ‘œμ„œ 호좜 βž” 전역객체(window)을 바인딩 함

(3)호좜: ν˜ΈμΆœν•  λ•Œ 점(.)이 μžˆλ‹€ βž” λ©”μ„œλ“œλ‘œμ„œ 호좜 βž” obj2을 바인딩 함

βœ”οΈ λ©”μ„œλ“œμ˜ λ‚΄λΆ€ν•¨μˆ˜μ—μ„œμ˜ thisλ₯Ό μš°νšŒν•˜λŠ” 방법(ES6+)

self ν•¨μˆ˜λ₯Ό μ‚¬μš©

const obj1 = {
  outer : function () { 
    	console.log(this);         
  		const innerFunc1 = function () {
        	console.log(this);      
        }
        innerFunc1();          // 전역객체(window) 호좜 
    
    const self = this;
    const innerFunc2 = function () {
        	console.log(self);      
        }
        innerFunc2();          // obj1.outer 호좜
  }
}                   

βœ”οΈ thisλ₯Ό λ°”μΈλ”©ν•˜μ§€ μ•ŠλŠ” ν•¨μˆ˜, ν™”μ‚΄ν‘œ ν•¨μˆ˜(ES6+)

ν™”μ‚΄ν‘œ ν•˜μˆ˜λŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό 생성할 λ•Œ this 바인딩 κ³Όμ • μžμ²΄κ°€ λΉ μ§€κ²Œ λ˜μ–΄, μƒμœ„ μŠ€μ½”ν”„μ˜ thisλ₯Ό κ·ΈλŒ€λ‘œ ν™œμš©ν•  수 μžˆλ‹€.



πŸ”Ή 콜백 ν•¨μˆ˜ 호좜 μ‹œ κ·Έ ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œμ˜ this

콜백 ν•¨μˆ˜λž€? ν•¨μˆ˜ A의 μ œμ–΄κΆŒμ„ λ‹€λ₯Έ ν•¨μˆ˜(λ˜λŠ” λ©”μ„œλ“œ) Bμ—κ²Œ λ„˜κ²¨μ£ΌλŠ” 경우 ν•¨μˆ˜ Aλ₯Ό 콜백 ν•¨μˆ˜λΌ ν•œλ‹€.

  • ν•¨μˆ˜ AλŠ” ν•¨μˆ˜ B의 λ‚΄λΆ€ λ‘œμ§μ— 따라 μ‹€ν–‰
  • this μ—­μ‹œ ν•¨μˆ˜ B λ‚΄λΆ€ λ‘œμ§μ—μ„œ μ •ν•œ κ·œμΉ™μ— 따라 값이 κ²°μ •λœλ‹€.



πŸ”Ή μƒμ„±μž ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œμ˜ this

μƒμ„±μž ν•¨μˆ˜λž€? μ–΄λ–€ κ³΅ν†΅λœ μ„±μ§ˆμ„ μ§€λ‹ˆλŠ” 객체듀을 μƒμ„±ν•˜λŠ”λ° μ‚¬μš©ν•˜λŠ” ν•¨μˆ˜. ꡬ체적인 μΈμŠ€ν„΄μŠ€λ₯Ό λ§Œλ“€κΈ° μœ„ν•œ ν‹€

  • 객체지ν–₯ μ–Έμ–΄μ—μ„œ μƒμ„±μžλ₯Ό 클래슀 class,
  • 클래슀 classλ₯Ό 톡해 λ§Œλ“  객체λ₯Ό μΈμŠ€ν„΄μŠ€ instance
  • μ˜ˆμ‹œ)
    • 클래슀class : λΆ•μ–΄λΉ΅ ν‹€
    • μΈμŠ€ν„΄μŠ€instance : νŒ₯λΆ•μ–΄λΉ΅, 크림뢕어빡

μƒμ„±μžλž€? ꡬ체적인 μΈμŠ€ν„΄μŠ€λ₯Ό λ§Œλ“€κΈ° μœ„ν•œ ν‹€

μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” ν•¨μˆ˜μ— μƒμ„±μžλ‘œμ„œμ˜ 역할을 ν•¨κ»˜ λΆ€μ—¬ν–ˆλŠ”λ°, new ν‚€μ›Œλ“œμ™€ ν•¨κ»˜ ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜λ©΄ ν•΄λ‹Ή ν•¨μˆ˜κ°€ μƒμ„±μžλ‘œμ„œ λ™μž‘ν•˜κ²Œ 되고 μ–΄λ–€ ν•¨μˆ˜κ°€ μƒμ„±μž ν•¨μˆ˜λ‘œμ„œ 호좜된 경우 λ‚΄λΆ€μ—μ„œμ˜ thisλŠ” 곧 μƒˆλ‘œ λ§Œλ“€ ꡬ체적인 μΈμŠ€ν„΄μŠ€instance μžμ‹ μ΄ λœλ‹€


λͺ…μ‹œμ μœΌλ‘œ thisλ₯Ό λ°”μΈλ”©ν•˜λŠ” 방법

μƒν™©λ³„λ‘œ this에 μ–΄λ–€ 값이 λ°”μΈλ”©λ˜λŠ”μ§€λ₯Ό μ‚΄νŽ΄λ΄€λ‹€. μ΄μ œλŠ” μ΄λŸ¬ν•œ κ·œμΉ™μ„ κΉ¨κ³  this에 λ³„λ„μ˜ λŒ€μƒμ„ λ°”μΈλ”©ν•˜λŠ” 방법을 μ•Œμ•„λ³΄μž.



πŸ”Έ call λ©”μ„œλ“œ

call λ©”μ„œλ“œλŠ” λ©”μ„œλ“œμ˜ 호좜 주체인 ν•¨μˆ˜λ₯Ό μ¦‰μ‹œ μ‹€ν–‰ν•˜λ„λ‘ ν•˜λŠ” λͺ…λ Ή

  • call λ©”μ„œλ“œμ˜ 첫 번째 인자λ₯Ό this둜 λ°”μΈλ”©ν•˜κ³ 
  • 두 번째 인자둜 μž„μ˜μ˜ 객체λ₯Ό this둜 지정할 수 μžˆλ‹€
const func = function (a, b, c) {
	console.log(this, a, b, c);

}

func(1, 2, 3);                // Window{...} 1 2 3
func.call({x: 1}, 4, 5, 6);   // {x: 1} 4 5 6



πŸ”Έ apply λ©”μ„œλ“œ

apply λ©”μ„œλ“œλŠ” call λ©”μ„œλ“œμ™€ κΈ°λŠ₯적으둜 μ™„μ „νžˆ λ™μΌν•˜λ‹€. λ‹€λ§Œ, call λ©”μ„œλ“œμ™€ 달리 두 번째 인자λ₯Ό λ°°μ—΄λ‘œ λ°›μ•„ κ·Έ λ°°μ—΄μ˜ μš”μ†Œλ“€μ„ ν˜ΈμΆœν•  ν•¨μˆ˜μ˜ λ§€κ°œλ³€μˆ˜λ‘œ μ§€μ •ν•œλ‹€λŠ” 차이점이 μžˆλ‹€.

const func = function (a, b, c) {
	console.log(this, a, b, c);

}

func.apply({x: 1}, [4, 5, 6]);   // {x: 1} 4 5 6

🚩참고 call / apply λ©”μ„œλ“œλŠ” μœ μ‚¬λ°°μ—΄κ°μ²΄μ— λͺ¨λ“  λ°°μ—΄ λ°°μ„œλ“œλ₯Ό μ μš©ν•  수 μžˆλŠ”λ‹€. 단, 원본 λ¬Έμžμ—΄μ— 변경을 κ°€ν•˜λŠ” λ©”μ„œλ“œ(push, pop, shift, unshift, splice)λŠ” μ—λŸ¬ λ°œμƒ.

🚩참고 ES6μ—μ„œλŠ” μœ μ‚¬λ°°μ—΄κ°μ²΄ λ˜λŠ” 순회 κ°€λŠ₯ν•œ λͺ¨λ“  μ’…λ₯˜μ˜ 데이터 νƒ€μž…μ„ λ°°μ—΄λ‘œ μ „ν™˜ν•˜λŠ” Array.from λ©”μ„œλ“œλ₯Ό μƒˆλ‘œ λ„μž…

const obj = {
	0: 'a',
  1: 'b',
  2: 'c'
  length : 
}
Array.from(obj)  // ['a' , 'b', 'c']



πŸ”Έ bind λ©”μ„œλ“œ

bind λ©”μ„œλ“œλŠ” ES5+μ—μ„œ μΆ”κ°€λœ κΈ°λŠ₯으둜, call λ©”μ„œλ“œμ™€ λΉ„μŠ·ν•˜μ§€λ§Œ, μ¦‰μ‹œ ν˜ΈμΆœν•˜μ§€λŠ” μ•Šκ³  λ„˜κ²¨λ°›μ€ this 및 μΈμˆ˜λ“€μ„ λ°”νƒ•μœΌλ‘œ μƒˆλ‘œμš΄ ν•¨μˆ˜λ₯Ό λ°˜ν™˜ν•˜κΈ°λ§Œ ν•˜λŠ” λ©”μ„œλ“œ

const func = function (a, b, c) {
	console.log(this, a, b, c);

}
func(1, 2, 3);             // Window{...} 1 2 3

const bindFunc1 = func.bind({x: 1});
bindFunc1(1, 2, 3);         // {x: 1} 1 2 3

const bindFunc2 = func.bind({x: 1}, 4, 5);
bindFunc2(6);         // {x: 1} 4 5 6
bindFunc2(7);         // {x: 1} 4 5 7



πŸ”Έ ν™”μ‚΄ν‘œ ν•¨μˆ˜μ˜ μ˜ˆμ™Έμ‚¬ν•­

ES6μ—μ„œ μƒˆλ‘­κ²Œ λ„μž…λœ ν™”μ‚΄ν‘œ ν•¨μˆ˜λŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ 생성 μ‹œ thisλ₯Ό λ°”μΈλ”©ν•˜λŠ” 과정이 μ œμ™Έλ˜μ—ˆλ‹€. 즉, 이 ν•¨μˆ˜ λ‚΄λΆ€μ—λŠ” thisκ°€ μ•„μ˜ˆ μ—†μœΌλ©°, μ ‘κ·Όν•˜κ³ μž ν•˜λ©΄ μŠ€μ½”ν”„μ²΄μΈμƒ κ°€μž₯ κ°€κΉŒμš΄ this에 μ ‘κ·Όν•˜κ²Œ λœλ‹€.



πŸ”Έ λ³„λ„μ˜ 인자둜 thisλ₯Ό λ°›λŠ” 경우(콜백 ν•¨μˆ˜ λ‚΄μ—μ„œμ˜ this)

μš”μ†Œλ₯Ό μˆœνšŒν•˜λ©΄μ„œ 콜백 ν•¨μˆ˜λ₯Ό 반볡 ν˜ΈμΆœν•˜λŠ” λ‚΄μš©μ˜ 일뢀 λ©”μ„œλ“œλŠ” λ³„λ„μ˜ 인자둜 thisλ₯Ό 받기도 ν•œλ‹€



✨ tl;dr

🎡 λͺ…μ‹œμ  this 바인딩이 μ—†λŠ” ν•œ,

  • μ „μ—­ κ³΅κ°„μ—μ„œμ˜ thisλŠ” 전역객체λ₯Ό μ°Έμ‘°
  • (.)이 μžˆλŠ” 경우 (= μ–΄λ–€ ν•¨μˆ˜λ₯Ό λ©”μ„œλ“œλ‘œμ„œ ν˜ΈμΆœν•œ 경우)thisλŠ” λ©”μ„œλ“œ 호좜 주체(λ©”μ„œλ“œλͺ… μ•žμ˜ 객체)λ₯Ό μ°Έμ‘°
  • (.)이 μ—†λŠ” 경우 (= μ–΄λ–€ ν•¨μˆ˜λ₯Ό ν•¨μˆ˜λ‘œμ„œ ν˜ΈμΆœν•œ 경우) thisλŠ” μ „μ—­ 객체λ₯Ό μ°Έμ‘°. λ©”μ„œλ“œμ˜ λ‚΄λΆ€ν•¨μˆ˜μ—μ„œλ„ 동일
  • 콜백 ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œμ˜ thisλŠ” ν•΄λ‹Ή 콜백 ν•¨μˆ˜μ˜ μ œμ–΄κΆŒμ„ λ„˜κ²¨λ°›μ€ ν•¨μˆ˜κ°€ μ •μ˜ν•œ λ°”λ₯Ό μ°Έμ‘°, μ •μ˜ν•˜μ§€ μ•Šμ€ κ²½μš°μ—λŠ” 전역객체λ₯Ό μ°Έμ‘°
  • new μƒμ„±μž ν•¨μˆ˜μ—μ„œμ˜ thisλŠ” 생성될 μΈμŠ€ν„΄μŠ€λ₯Ό μ°Έμ‘°


🎡 λͺ…μ‹œμ  this λ°”μΈλ”©μ˜ 경우

  • call, apply λ©”μ„œλ“œλŠ” thisλ₯Ό λͺ…μ‹œμ μœΌλ‘œ μ§€μ •ν•˜λ©΄μ„œ ν•¨μˆ˜ λ˜λŠ” λ©”μ„œλ“œλ₯Ό 호좜
  • bind λ©”μ„œλ“œλŠ” this 및 ν•¨μˆ˜μ— λ„˜κΈΈ 인수λ₯Ό 일뢀 μ§€μ •ν•΄μ„œ μƒˆλ‘œμš΄ ν•¨μˆ˜λ₯Ό λ°˜ν™˜
  • μš”μ†Œλ₯Ό μˆœνšŒν•˜λ©΄μ„œ 콜백 ν•¨μˆ˜λ₯Ό 반볡 ν˜ΈμΆœν•˜λŠ” λ‚΄μš©μ˜ 일뢀 λ©”μ„œλ“œ(set, map, forEach) λŠ” λ³„λ„μ˜ 인자둜 thisλ₯Ό 받기도 ν•œλ‹€.

으둜 thisλ₯Ό μ˜ˆμΈ‘ν•  수 μžˆλ‹€