'var that = this;'를 사용하는 이유 자바스크립트로?

"var that = this;"의 목적 이해하기 JavaScript

JavaScript로 작업할 때 "var that = this;"라는 문이 포함된 코드 조각을 접할 수 있습니다. 이 구성은 특히 이벤트 핸들러에서 중첩된 함수 내에서 "this" 컨텍스트를 보존하는 데 중요한 역할을 합니다.

JavaScript에서 "this" 키워드는 현재 컨텍스트 또는 사용되는 코드를 소유하는 객체를 나타냅니다. in. 그러나 다른 함수 내에서 함수가 호출되면 "this" 값이 변경됩니다. 이로 인해 특히 이벤트 핸들러가 콜백에 상주하는 이벤트 기반 코드에서 예상치 못한 동작이 발생할 수 있습니다.

"this"를 "that"에 할당하는 목적은 개체가 손실되기 전에 개체의 현재 컨텍스트를 캡처하는 것입니다. 범위 변경으로. "this"를 "that"으로 별칭을 지정하면 중첩된 함수 내에서도 "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
    });
});

이 코드에서 , 이벤트 핸들러 함수는 "this" 키워드를 통해 클릭된 요소에 액세스할 수 있습니다. 그러나 중첩된 함수(each()) 내에서 "this" 값은 루프의 현재 요소를 나타냅니다. 외부 함수에서 "this"를 "that"으로 캡처하면 처음에 클릭한 요소에 계속 액세스할 수 있습니다.

가독성을 위해 "that" 이외의 별칭을 사용하는 것이 좋습니다. 위의 예에서 "clickedEl"과 같은 보다 설명적인 별칭을 사용하면 변수가 무엇을 참조하는지 더 명확해집니다.

결론적으로 "var that = this;" 다양한 범위에서 "this" 값을 보존하기 위한 JavaScript의 일반적인 기술입니다. 중첩된 함수가 호출되는 경우에도 객체의 원래 컨텍스트가 유지되도록 보장합니다.

위 내용은 'var that = this;'를 사용하는 이유 자바스크립트로?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!