자바스크립트 회고록 - 3. 화살표 함수의 this

화살표 함수와 일반 함수의 차이점

• 함수들은 프로퍼티로 prototype을 가지고 있지만 화살표 함수는 가지고 있지 않다. 그래서 생성자 함수로 사용이 불가능하다.
• 일반 함수는 호출방법을 기준으로 동적으로 this가 정해지지만 화살표 함수는 Lexical this를 지원함으로 언제나 상위 스코프의 this를 가리킨다.

객체의 메소드로 사용하기

arrowFunc은 생성된 상위 스코프 this를 참조한다. 객체의 메소드에서 this가 obj를 참조하지만 obj 자체의 this는 window이다.

const obj = {
    objThis: this,
    target: "target",
    // 화살표 함수
    arrowFunc: () => {
        console.log(this);
    },
    // 일반 함수
    func:function() {
        console.log(this);
    }
}

// window 객체
console.log(obj.objThis);
// window 객체
obj.arrowFunc();
// obj
obj.func();

인스턴스의 메소드에서 이벤트 핸들러로 사용하기

인스턴스의 메소드 render에서의 button 클릭 이벤트 핸들러로 사용할 경우 일반 함수이면 해당 노드의 정보를 가리킨다. 원하는 행동을 하지 못하게 된다.

class App {
    constructor() {
        this.num = 10;
        this.render();
    }
    render() {
        const $btn = document.querySelector("button");
        // button 이벤트 핸들러로 사용
        $btn.onclick = function () {
            // 결과 : undefined -> NaN
            console.log(this.num);
            this.num += 1;
        }
    }
}

new App();

화살표 함수로 바꿔주면 원하는 행동을 할 수 있다. 왜냐하면 함수가 정의된 상위 스코프를 따르기 때문에 render의 this를 참조하게 된다.

class App {
    constructor() {
        this.num = 10;
        this.render();
    }
    render() {
        const $btn = document.querySelector("button");
        $btn.onclick = () => {
            // 결과 : 11 -> 12
            console.log(this.num);
            this.num += 1;
        }
    }
}

new App();

💡 화살표 함수는 정의된 위치의 상위 스코프의 this를 참조한다. 객체에서 window를 가리키는 것이 이해가 되지 않았다. 생각해보니 계속 객체 안의 메소드에서 this를 사용하다보니 당연히 원본 객체도 this가 객체 자신을 가리키는지 착각하고 있었다. 함수가 아닌걸 잊고 있었다. 정리하면서 this랑 더욱더 가까워진 기분이다.