Arrow Function 및 전역객체의 의미

출처 : https://blueshw.github.io/2017/07/01/arrow-function/

https://blueshw.github.io/2017/07/01/arrow-function/

핵심

객체지향 언어에서의 일반적인 this 의 의미(현재 객체를 지칭)와는 달리 자바스크립트의 this 는 실행시의 context 를 말하죠

 

Example

render() {
    return <button type="button" onClick={this.handleClick}>Goodbye bind without this</button>;
}

여기서 handleClick이 Arrow Function이 아니라면 Undefined 가 호출이 된다 

그 이유는 

- render() 에서의 this.handleClick은 WithoutBindTest의 handleClick을 말하는게 맞으나

- 상위 코드에서의 호출되는 시점의 this.handleClick은 WithoutBindTest가 아닌 Window(전역객체)의 handleClick을 의미하기 때문이다

 

Arrow Function의 this 는 외부함수(부모함수)의 this 를 상속받기 때문에 this 는 항상 일정합니다.