ES6 - Arrow Function 2 (this)

arrow function은 간결하고 유용하지만 사용하지 않아야 할 때가 있다.

바로 this 키워드를 사용해야 할때이다.

this란 무엇인가.

먼저 this를 간단하게 집고 넘어가자

this는 객체와 연관이 깊다.

예를 들어 const a = {name: "lee"} 라는 객체가 있고, 특정 상황을 만족할 경우 this.name을 호출하면 "lee"가 출력이 된다.

이때 변수 a를 this의 context object라고 할 수 있다.

여기서 context object란 this가 바라보고 있는 어떤 객체라고 생각하면 될 듯 하다.

 

크게 4가지 패턴이 있는데

1. 일반함수 실행: 함수 실행에서의 this는 전역객체(window)이다

2. 메소드 실행 : 메소드란, 객체의 속성으로 정의된 함수. 이 경우, this는 해당 메소드를 소유한 객체가 된다.

3. 생성자 (new) 실행 :생성자는 new로 객체를 만드는 것이고 이떄 this는 new를 통해 만들어진 새로운 변수 이다.

4. 명시적 지정 : .call()이나 .apply(), .bind()를 이용하여 this를 명시적으로 지정해줄 수 있다.

음 3번째까진 이해가 되는데 4번째가 어렵네 일단 여기 블로그를 보니 어느정도 이해가 된다

medium.com/@lidiach217/javascript-this-%ED%82%A4%EC%9B%8C%EB%93%9C-eb4e01313615

[JavaScript] This 키워드

문제는 arrow function은 this를 지원하지 않는다.

 

이런 코드를 실행시 버튼은 색상이 바뀌고  콘솔창에 this -> button태그가 출력된다.

그러나 이 함수를 arrow-function으로 바꾸면~

this가 전역객체인 window를 가리키고있어 적용이 안된다.

우선 쉽게 this는 window object이고  arrow function에 사용은 안된다 로 알고있자.