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

'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 중국어 웹사이트의 기타 관련 기사를 참조하세요!