[ES6] 화살표 함수 안의 this

ES6 알못이라고 가정할 때,  화살표 함수란?

// Anonymous function (ES5)
function (param1, param2, ... paramN) { ... }

// Anonymous function (ES6)
(param1, param2, ... paramN) => { ... }

(일단 그냥 function () {} 이라고 외우면 좀 편하다..;;)

ES6 타입으로 주름좀 잡아본다고 막 화살표 걸어봤더니 이해 안 되는 다음과 같은 현상이 일어났다!!

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>


<button id="btn_arrow_es5">arrow es5</button>
<button id="btn_arrow_es6">arrow es6</button>

<script type="text/javascript">
    // (ES5)
    $('#btn_arrow_es5').on('click', function () {
        console.log(this);    // 1
    });

    // 화살표 함수 쓰는 맛 들렸다고 아래와 같이 써봤더니 (ES6)
    $('#btn_arrow_es6').on('click', () => {
        console.log(this);    // 2
    });
</script>

1번에서는 의도한대로 버튼이 찍히지만

2번의 경우는 window 가 찍힘;;

$(JQuerySelector).on(event), 즉 htmlDOMObject.addEventListener(event) 안의 화살표 함수에서의 'this' 는 상위 컨텍스트를 가리킨다고 함..

(모르고 화살표 막 쓰면 안됨;;)

그 외의 화살표 함수 안에서 this 쓰면 꼬이는 경우

- Object 안의 메소드 정의할 때

    var obj = {
        property : '1',
        method : () => {
            console.log(this.property );    // '1'  안나옴.. window.property (undefined) 튀어나옴
        }
    }
    
    // 이럴 땐 ES6 주름잡지 말고 아래 처럼 써야한다.
    var obj = {
        property : '1',
        method : function () {
            console.log(this.property );    // '1'  나옴
        }
    }

    // 또는 축약된 표현식으로 아래와 같이 쓸 수 있다.
    var obj = {
        property : '1',
        method() {
            console.log(this.property );    // '1'  나옴
        }
    }

- Object.pototype 메소드 정의할 때

    function MyCat(name) {  
        this.catName = name;
    }

    MyCat.prototype.sayCatName = () => {  
        console.log(this); // 너도 window 찍힘
        return this.catName;    // 즉, undefined;;
    };

    // 올바른 의도로 this.catName 을 리턴하려면 기존 ES5 식으로 써야한다.
    MyCat.prototype.sayCatName = function () {  
        return this.catName;
    };