[JS] ES6 : Arrow Function( 화살표형 함수 )에서의 this

============================================================================

 

저번 글에서 Arrow Function에 대해 간단한 문법에 대해 정리해보았는데, 

Arrow Funtion는 this를 가지지 않는다. 라는 말을 했었다. (지난글 참조)

 

근데 이게 정확히 무슨 말일까? 지금까지 진행해왔던 프로젝트는 Vue라이브러리와 ES5문법을 혼용해서 사용해왔는데,

Vue인스턴스나 컴포넌트의 데이터를 this 키워드를 사용해서 가져왔었다. 예를 들면 아래와 같이..

 

<script>
    export default{
        data () {
            return {
                This : 'this키워드를 사용합니다.'
            }
        },
        mounted() {
            this.useThis();
        },
        methods: {
            useThis : function(){ // ES5함수선언 문법을 이용해서 함수선언
                console.log(this.This);
            },
        },
    }
</script>

위와 같이 component를 생성하고 data객체에 This라는 String변수를 하나 만들었다.

그리고 mouted된 순간에 this키워드를 사용하여 This의 속성값을 콘솔에 찍어주는 간단한 코드이다.

결과는? 아래와 같이 콘솔에 찍힌다.

 

 

 

그럼 만약에 ES6이 릴리즈 되면서 새로 나온 ArrowFuntion을 이용하면 어떻게 될까?

 

<script>
    export default{
        data () {
            return {
                This : 'this키워드를 사용합니다.'
            }
        },
        mounted() {
            this.cantUseThis();
        },
        methods: {
            cantUseThis : () =>{ // ES6의 Arrow Funtion을 선언
                console.log(this.This);
            }
        },
    }
</script>

 

결과는? 에러가 뜬다..

 

에러

 

분명 컴포넌트에 This라는 데이터는 선언이 되어있고, ES5의 기본함수에서는 this 키워드를 사용해서

데이터를 가져오는 것도 성공했었다. 근데 Arrow Function안에서 this키워드를 사용해서 컴포넌트의

데이터를 가져오려니 가져오지 못했다. 즉 함수선언 표현방식에 따라 this가 바라보는 '녀석'이 다르다는 것

 

오늘은 ES6의 this에 대해서만 정리하도록 하고, 다음에 ES5와 ES6의 this 차이에 대해 정리해보겠다..

 

 

 

 

Arrow Function의 this

============================================================================

 

Arrow Funtuon에서의 this는 본인의 상위스코프를 가르킨다. <= 핵심

아래 코드를 보자

 

let obj = {
  name : 'bome',
  foot : function(){
      console.log(this.name);
  }
}

var name = 'change';

obj.foot();

 

이 코드를 실행하면 어떤 결과가 나올까? 정답은 obj객체 안의 key값이 name인 녀석의 value값인 'bome'이

콘솔에 출력된다.

 

오랜만에 쓰는 코드펜

Arrow Function을 안 쓴 함수의 this는 동적으로 변하고, 여기에서는 객체를 바라보고 있다.

그럼 Arrow Function을 썼을 때는??

 

let obj = {
  name : 'bome!',
  foot : ()=>{ // Arrow Function으로 바꿈
      console.log(this.name);
  }
}

var name = 'change!';

obj.foot();

 

결과는 아래와 같다.

 

 

분명 다른 건 안건들고, 함수 생성을 Arrow Function형식으로만 바꿨는데, this.name의 값이 달라졌다.

즉슨, this가 바라보는 녀석이 달라졌다는 의미.. this를 이용해서 호출 하는 곳의 바로 위에 있는

스코프 즉, 상위스코프()를 바라보는 것을 알 수 있었다.

 

조금 더 알아보자.

<script type="text/javascript">
    let obj = {
      nameTest : 'bome!',
      foot : ()=>{ // Arrow Function으로 바꿈
          console.log(this.nameTest);
      }
    }
    obj.foot();
</script>

이렇게 작성하고 실행하면 어떻게 될까? 정답은 undefined가 뜬다.

여기서는 글로벌 변수인 nameTest를 선언하지 않았기 때문이다. 

 

조금 더 들어가보자.

 

var myObj = {
  count : 0,
  setCounter : function(){
    console.log(this + 'setCounter');
      function plusCount(){
         console.log(this + 'pluseCount')
      }
      plusCount();
  }
}

myObj.setCounter();

이렇게 작성한 뒤 코드를 실행하면 어떻게 될까? 여기서는 Arrow Function을 사용하지 않았다.

 

 

그럼 ES5의 기본함수에서의 this의 특성인 어디서 호출했는지에 따라 this가 바라보는 녀석이 달라진다.

그래서 위는 Object를, 아래는 Window를 바라본다. => 위: 객체가 호출, 아래: Window가 호출

( 나중에 둘(this)의 차이점은 따로 정리할 예정 )

 

근데 만약 아래와 같이 코드를 작성하면?

 

 

둘 다 Object를 바라본다. 왜냐하면 Arrow Funtion의 this는 상위 스코프를 바라보니까.

그럼 궁금증이 생긴다. 왜 Arrow Function의 this는 상위스코프를 바라볼까??

 

답은 간단하다. 가장 앞에서 서술한 Arrow Function은 this가 없기 때문에, javascript의 특성인 해당 스코프에

찾고자 하는 객체가 존재 하지 않으면 상위 스코프로, 또 없으면 더 상위 스코프에서 찾기 때문이다.

 

생각보다 글이 길어졌다. 이해가 잘 안되서 계속 쓰다보니,,, 나중에 한번 더 정리를 해야겠다.