this'와 화살표 함수

화살표 함수는 Javascript 함수를 작성하기 위한 새로운 구문으로 ES6에 도입되었습니다. 짧은 구문 덕분에 코드를 더 깔끔하게 보이게 하는(그리고 () => 더 멋지게 😄) 작은 함수의 사용을 권장합니다.

ES6 구문에 대해 머리를 싸매고 있는 초보자로서 나는 화살표 함수가 어떻게 작동하는지 제대로 이해하지 못한 채 모든 곳에서 화살표 함수를 사용하기 시작했습니다. 예상하셨겠지만, 저는 특히 this 키워드에서 몇 가지 문제에 봉착했습니다.
this 값이 함수의 실행 컨텍스트와 모드(엄격 또는 비엄격)에 따라 달라지므로 때때로 약간 혼란스러울 수 있습니다. 이것에 대해 많은 내용이 작성되었으므로 한 가지에만 집중하겠습니다.

이것이 화살표 함수에서 작동하는 방식

일반 함수에서 this는 객체의 메소드로 정의될 때 객체를 가리킨다. 따라서 다음을 수행할 수 있습니다.

const brunch = {
    food: 'Dim sum',
    beverage: 'Jasmine tea',
    order: function() {
        return `I'll have the ${this.food} with ${this.beverage} please.`
    }
}

brunch.order()를 호출하면 "I'll have the Dim sum with Jasmine tea please."가 반환됩니다.

그것을 편집하고 order:에 대해 화살표 기능을 사용합시다.

const brunch = {
    food: 'Dim sum',
    beverage: 'Jasmine tea',
    order: () => {
        return `I'll have the ${this.food} with ${this.beverage} please.`
    }
}

이번에는 brunch.order()를 호출하면 "I'll have the undefined with undefined please." this.food와 this.beverage 모두 undefined를 반환합니다.

정상적인 기능으로 작동했는데 어떻게 된 건가요? 일반 함수에서 this는 order 객체였습니다. 화살표 기능을 사용할 때 this는 아무 것도 바인딩되지 않으며 이 경우 창인 부모 범위에서 상속됩니다. 화살표 함수에서 console.log(this) 앞에 return 를 추가하면 Window 객체가 반환되므로 Window.food 와 Window.beverage 를 찾는 것은 분명히 undefined 입니다.

따라서 화살표 함수는 개체 메서드로 적합하지 않습니다.

또 다른 일반적인 문제 영역은 이벤트 핸들러입니다. 다음은 예입니다.

// change button colour on click
<style>
.on {background: red;}
</style>

<button id="click">Toggle</button>

<script>
const button = document.querySelector('#click');
button.addEventListener('click', function() {
    console.log(this); // button
    this.classList.toggle('on');
});
</script>

위의 코드에서 this는 버튼을 나타냅니다. 버튼을 클릭하면 예상대로 색상이 전환됩니다. 함수를 화살표 함수로 변경합니다.

// change button colour on click
<style>
.on {background: red;}
</style>

<button id="click">Toggle</button>

<script>
const button = document.querySelector('#click');
button.addEventListener('click', () => {
    console.log(this); // Window { ... }
    this.classList.toggle('on');
});
</script>

this는 브라우저의 window 속성이 됩니다. 버튼을 클릭하면 TypeError 오류가 발생합니다. 이벤트 처리기에서 this에 의존하는 경우 일반 함수가 필요할 수 있습니다.

따라서 화살표 기능만큼 멋지고 인기가 있을 수 있지만 작동 방식을 이해하고 사용할 때와 사용하지 말아야 할 때를 아는 것이 가장 좋습니다.