> 웹 프론트엔드 > JS 튜토리얼 > JavaScript에서 `bind()`가 화살표 함수와 함께 작동하지 않는 이유는 무엇입니까?

JavaScript에서 `bind()`가 화살표 함수와 함께 작동하지 않는 이유는 무엇입니까?

Susan Sarandon
풀어 주다: 2024-12-08 22:39:11
원래의
903명이 탐색했습니다.

Why Doesn't `bind()` Work with Arrow Functions in JavaScript?

화살표 함수 바인딩: 설명

JavaScript에서 화살표 함수를 사용할 때 개발자는 'this' 바인딩과 관련하여 예상치 못한 동작을 접할 수 있습니다. 일반 함수와 달리 화살표 함수는 어휘 범위를 유지합니다. 즉, 함수가 정의된 환경의 'this' 바인딩을 상속합니다. 따라서 화살표 함수 내에서 'this'를 다시 바인딩하는 것은 불가능합니다.

다음 예를 고려하세요.

var f = () => console.log(this);
var o = {'a': 42};
var fBound = f.bind(o);
fBound();
로그인 후 복사

이 코드 조각에서는 화살표 함수 'f'를 바인딩하려고 합니다. '.bind()' 메소드를 사용하여 'o' 객체에 연결합니다. 그러나 'fBound'를 호출하면 'o' 대신 전역 'window' 객체가 출력됩니다.

이는 화살표 함수가 어휘적으로 둘러싸는 환경에서 'this' 바인딩을 상속하기 때문입니다. 전역 실행 컨텍스트입니다. 결과적으로 'f()'와 'fBound()'는 항상 전역 'this'를 참조합니다.

이 문제를 방지하려면 바인딩이 필요할 때 일반 함수를 사용하는 것이 좋습니다. 이러한 함수는 새로운 실행 컨텍스트를 생성하여 '.bind()' 메서드를 사용하여 'this' 바인딩을 명시적으로 설정할 수 있게 해줍니다.

위 내용은 JavaScript에서 `bind()`가 화살표 함수와 함께 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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