화살표 함수의 this 질문드립니다!!

인프런 커뮤니티 질문&답변

태현

작성한 질문수

프론트엔드 날개달기: Vue, React 배우기 전에 꼭 알아야하는 지식

this란 무엇인가? (21분 28초)

작성

428

화살표 함수의 this는 상위의 스코프를 가리킨다. 이런 개념이잖아요??

그래서 obj안에 obj를 만들어 거기에서 화살표함수를 통해 함수를 만들고 호출하였습니다. 상위 스코프이기에 test가 출력이 될 거라고 생각했는데 window가 출력이 되더라구요.. 왜일까요?ㅠㅠ

const test = {
  name : 'test1',
  foo : {
    bar : ()=> {
      console.log(this)
    }
  }
}

test.foo.bar()

화살표함수 웹팩 this

답변 1

짐코딩

지식공유자

안녕하세요 태현님~!

우선 화살표 함수의 this는 상위 스코프의 this를 승계 받습니다.

설명보다 코드로 함께 설명드리면 아래와 같습니다.

const test = {
  name : 'test1',
  foo : {
    bar : ()=> {
      // 상위 스코프(전역)의 this인 window
      console.log(this)
    },
  },
  hello: function() {
    /**
     * 자바스크립트에서의 함수는 선언되는 동시에lexical)
     * 자신만의 Scope(범위)를 가집니다.
     */
    // 해당 스코프(지역)의 this는 test
    console.log(this)
    const foo = {
      bar: () => {
        // 상위 스코프(지역)의 this인 test
        console.log(this)
      }
    }
    foo.bar()
  }
}
test.foo.bar()
test.hello()

자바스크립트 스코프에 대한 이해를 조금 더 명확히 하시면 더 이해가 쉬울 것 같아요 🙂

태현

작성한 질문수

전체 Q&A

질문하기