[JavaScript] 화살표 함수 / 일반 함수 에서의 this

 

화살표 함수

• 화살표 함수의 this는 호출된 함수를 둘러싼 실행 컨텍스트를 가리킨다

 

일반 함수

• 일반 함수의 this는 새롭게 생성된 실행 컨텍스트를 가리킨다.

 

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 = 'Daniel'
let o = { name : 'Kim' }

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

arrowFunction('Dr. ')    // Dr. Daniel
arrowFunction.bind(o)('Dr. ')    // Dr. Daniel
arrowFunction.call(o, 'Dr. ')    // Dr. Daniel
arrowFunction.apply(o, ['Dr. '])    // Dr. Daniel

bind, call, apply 어떤것을 써도 o의 name ( Kim ) 이 출력되지 않음을 알 수 있다.