화살표 함수 vs 일반 함수의 this

• 화살표 함수의 this는 호출된 함수를 둘러싼 실행 컨텍스트를 가리킨다.
• 일반 함수의 this는 새롭게 생성된 실행 컨텍스트를 가리킨다.

아래의 코드를 예시로 보면, f1은 일반함수, f2는 화살표 함수로 선언되어 있다.

const o = {
	method(){
    	console.log("context : ", this)		//	o
      	let f1 = function () {
        	console.log("[f1] this : ", this)
        }
        let f2 = () =>
        	console.log("[f2] this : ", this)
        f1()	//	global
      	f2()	//	o
    },
};
o.method()

• f1()은 실행될 때 새로운 컨텍스트를 생성한다.
• 이때 f1에 바인딩된 컨텍스트가 없으므로 this는 global을 가리킨다.
• f2()는 함수 컨텍스트를 생성하며 this변수는 부모의 컨텍스트를 가리킨다.
• 따라서 this는 o가 된다.

즉, 화살표 함수와 dynamic binding에 관해 정리를 하자면

• 화살표 함수의 this는 정해지면 바꿀 수 없다.
• call, bind, apply를 사용해도 바뀌지 않는다.
• setTimeout 등 this가 바뀌는 상황에서 유용하다.

아래의 코드는 화살표 함수가 활용되는 예시이다.

window.name = "Hannah"
let o = { name : "K" }

let arrowFunction = (prefix) => console.log(prefix + this.name)

arrowFunction("Dr. ")	//	Dr. Hannah
arrowFucntion.bind(o)("Dr. ")	//	Dr. Hannah
arrowFucntion.call(o, "Dr. ")	//	Dr. Hannah
arrowFucntion.apply(o, ["Dr. "])	//	Dr. Hannah

위처럼 bind와 call, apply를 사용해도 화살표 함수로 선언되어 있으면 this 값이 바뀌지 않음을 알 수 있다.