> 웹 프론트엔드 > JS 튜토리얼 > 또 다른 하나 - 기본으로 돌아가기 ♻️ - ⬆️화살표⬇️ Js의 함수

또 다른 하나 - 기본으로 돌아가기 ♻️ - ⬆️화살표⬇️ Js의 함수

Susan Sarandon
풀어 주다: 2024-11-07 17:38:03
원래의
926명이 탐색했습니다.

화살표 함수 - 이 주제는 많은 개발자에게 혼란스러울 수 있습니다. 다음은 몇 가지 힌트와 함께 화살표 기능에 대한 간단한 설명입니다.

뭐?

화살표 함수(=>)는 JavaScript에서 함수를 작성하기 위한 더 짧은 구문입니다. 자체 this, 인수 또는 프로토타입이 없으며 주변 범위에서 this 컨텍스트를 채택합니다.

왜?

화살표 함수는 특히 인라인 콜백의 경우 함수 작성 구문을 단순화하기 위해 도입되었습니다. 또한 외부 범위에서 어휘적으로 상속하여 이를 처리하기가 더 쉬워지며, 바인드 또는 self가 필요하지 않습니다. 이 해결 방법은

언제?

화살표 기능 사용:

  • 배열 메서드(예: map, filter, forEach), 이벤트 리스너 또는 약속 체인의 인라인 콜백용.

  • 주변 컨텍스트에 의존하는 메서드나 콜백과 같이 이에 대한 어휘 범위 지정이 필요한 경우.

사용 사례:

  • 배열 콜백: array.map(item => item * 2)

  • React의 이벤트 핸들러: onClick={() => this.handleClick()}

  • 비동기 작업: .then(result => console.log(result))

제한사항:

  • 아니요 이 컨텍스트: 자체 this가 필요한 경우 객체의 메서드로 사용할 수 없습니다.

  • 인수 없음 개체: 인수에 액세스해야 하는 함수에는 적합하지 않습니다.

  • 생성자로 사용할 수 없습니다. 화살표 함수에는 프로토타입이 없으므로 new와 함께 사용할 수 없습니다.

그러므로 다음에 화살표 함수가 포함된 코드를 작성할 때 해당 상황에 정말 필요한지 아니면 대신 일반 함수를 사용할 수 있는지 스스로에게 물어보세요. 아무 생각 없이 한 가지 스타일만 사용하지 마세요. 선택 이유를 이해한 후 결정을 내리세요.

아래 내용은 위의 내용을 실제적으로 설명하는 내용입니다.

Another One in - Back to Basics ♻️ - ⬆️Arrow⬇️ Functions in Js

위 내용은 또 다른 하나 - 기본으로 돌아가기 ♻️ - ⬆️화살표⬇️ Js의 함수의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿