> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 중첩 함수에서 `var that = this;`를 사용하는 이유는 무엇입니까?

JavaScript 중첩 함수에서 `var that = this;`를 사용하는 이유는 무엇입니까?

Barbara Streisand
풀어 주다: 2024-12-02 10:51:11
원래의
285명이 탐색했습니다.

Why Use `var that = this;` in JavaScript Nested Functions?

'var that = this;'는 무엇을 하는가? 구문 Accomplish in JavaScript?

JavaScript에서는 다음과 유사한 코드 블록을 접하는 것이 일반적입니다.

function Somefunction(){
   var that = this; 
   ... 
}
로그인 후 복사

이 구문은 이 값을 다음과 같은 변수에 할당합니다. . 이 관용구의 목적은 중첩된 함수 내에서 올바른 this 컨텍스트에 대한 참조를 유지하는 것입니다.

그 필요성을 설명하려면 다음 예를 고려하십시오.

var colours = ['red', 'green', 'blue'];
document.getElementById('element').addEventListener('click', function() {
    // this is a reference to the element clicked on

    var that = this;

    colours.forEach(function() {
        // this is undefined
        // that is a reference to the element clicked on
    });
});
로그인 후 복사

익명 함수 내에서 forEach에 전달되면 this 키워드는 범위가 변경되었기 때문에 클릭한 요소를 더 이상 참조하지 않습니다. 이를 할당하면 중첩된 함수 내에서 원하는 참조를 유지할 수 있습니다.

$('#element').click(function(){
    // this is a reference to the element clicked on

    var that = this;

    $('.elements').each(function(){
        // this is a reference to the current element in the loop
        // that is still a reference to the element clicked on
    });
});
로그인 후 복사

실제로는 이에 대해 더 설명적인 별칭을 사용하여 코드 가독성을 높이는 것이 좋습니다. 예를 들어 위의 예에서는 clickedEl이 더 적합한 선택입니다.

위 내용은 JavaScript 중첩 함수에서 `var that = this;`를 사용하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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