• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

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

22.06.23 21:35 작성 조회수 315

1

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

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

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

test.foo.bar()

답변 1

답변을 작성해보세요.

0

안녕하세요 태현님~!

우선 화살표 함수의 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()

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