콜백에서 올바른 "this"에 어떻게 액세스합니까?
- WBOY앞으로
- 2023-08-24 09:53:09995검색
이 튜토리얼에서는 콜백에서 올바른 "this"에 액세스하는 방법을 살펴보겠습니다.
"이것" 키워드
모든 함수에는 "컨텍스트"라고도 알려진 this라는 키워드가 포함되어 있습니다. 이 키워드의 값은 함수가 정의되는 방법, 시기, 위치가 아니라 함수 호출 방법에 따라 결정됩니다. 다른 변수와 달리 어휘 범위의 영향을 받지 않습니다. 다른 언어와 비교하여 JavaScript는 함수의 "this" 키워드를 사용할 때 약간 다르게 동작합니다. 엄격 모드와 비엄격 모드 간에는 몇 가지 추가 변경 사항이 있습니다.
함수가 가장 일반적으로 호출되는 방식에 따라 "this"(런타임 바인딩) 값이 결정됩니다. 함수가 호출될 때마다 변경될 수 있으며, 실행 시 할당에 의해 변경될 수 없습니다. 함수가 호출되는 횟수에 따라, 화살표 함수는 자체 "this" 바인딩을 제공하지 않기 때문에(포함하는 어휘 컨텍스트의 "this" 값을 유지함), 바인딩() 메서드가 이 값을 설정할 수 있습니다.
콜백이란 무엇인가요?
다른 함수로부터 매개변수를 받는 함수를 콜백이라고 하며 일반적으로 나중에 외부 함수에서 사용됩니다. 고차 함수는 콜백을 허용하는 외부 함수를 설명하는 데 사용되는 용어입니다.
함수는 JavaScript의 객체이기 때문에 콜백에는 고유한 메서드 및 속성 집합이 있습니다. 고차 함수 내에서 실행될 때 콜백에 할당되는 "this" 속성은 콜백이 정의된 위치, 방법, 시기가 아니라 콜백이 만들어지는 방식에 전적으로 의존합니다.
콜백을 호출하는 고차 함수를 검사하여 콜백의 "this" 값을 확인할 수 있습니다. 바깥쪽 함수의 실제 정의에는 로컬 범위의 속성이 포함될 수 있으며, 이는 콜백에서 이러한 문제의 주요 원인입니다. 그러나 콜백의 컨텍스트는 호출 방법에 따라 동적으로 변경되므로 콜백의 "this" 바인딩을 통해 속성에 액세스하면 해당 속성이 존재하지 않습니다.
이제 콜백에서 올바른 "this"에 액세스하는 방법을 알아 보겠습니다.
"셀프" 모드 사용
self라는 변수를 생성하고 선언된 함수 범위 내에서 this 값을 지정하는 것이 일반적인 패턴입니다. self(또는 다른 유효한 변수 이름이 가능함)라는 새 변수를 생성하고 "this" 값을 지정하여 원하는 동작을 달성할 수 있습니다.
예
으아악화살표 기능 사용하기
ECMAScript 6에서는 JavaScript 화살표 기능이 처음으로 등장합니다. 자체 바인딩이 없으며 기존 함수 표현식에 대한 더 깔끔한 대안입니다. 이렇게 하면 화살표 함수 내에서 참조되는 경우 범위 내에서 일반 변수로 검색됩니다.
예
으아악다른 변수를 사용하여 "this" 개체를 저장하세요
객체는 여기에 연결되어 있으며, 이는 일반적으로 콜백에서 액세스하려고 할 때 실제로 액세스하려는 객체입니다. 콜백 범위 전에 변수를 만들고 그 값을 저장하는 것은 이를 달성하는 한 가지 방법입니다(일부 프로그래머는 혼란스러워 보이기 때문에 이 작업을 꺼립니다).
어떤 사람들은 "저것"이나 "자기"라고 부르기도 하지만, 용어만 명확하면 상관없습니다. 이 해결 방법은 변수가 어휘 범위 요구 사항을 충족하고 따라서 콜백에서 사용될 수 있기 때문에 효과적입니다. 콜백의 동적 바인딩에 여전히 액세스할 수 있으며 이는 이 접근 방식의 또 다른 이점입니다.
예
으아악객체에 대한 명시적 바인딩을 사용하세요
콜백을 정의할 때 원하는 것을 선언할 수 있습니다. 우리는 "this" 값을 설정하기 위해 "this" 값을 설정하기 위해 "bind()" 메소드를 사용할 수 있으며, "this" 값이 어떻게, 어디서 호출되거나 전달되는지에 상관없이 함수 실행 전반에 걸쳐 그 값이 유지되도록 할 수 있습니다.
bind() 메서드는 모든 함수에서 사용할 수 있으며 주어진 객체에 연결된 "this" 속성을 사용하여 새 함수를 생성합니다. 반환된 함수와 원래 함수 사이의 유일한 차이점은 "this" 속성이 가리키는 대상을 완전히 제어할 수 있다는 것입니다.
예
<html>
<body>
<h2> 'this' Inside a Callback using the <i> 'self' pattern </i> </h2>
<button onclick="myFunction()"> Click here </button>
<div id="root" style="
background-color: rgb(240, 248, 255);
border: 1px solid gray;
margin: 5px 0px;
padding: 10px;
">
Welcome to Tutorialspoint!
</div>
<script>
const root = document.getElementById('root')
function myFunction() {
this.variable = 'I am this variable'
const variable = 'I am a const variable'
const self = this
setTimeout(() => {
root.innerHTML = this.variable + '<br/>'
root.innerHTML += variable
}, 1000)
}
</script>
</body>
</html>
위 내용은 콜백에서 올바른 "this"에 어떻게 액세스합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!