>  기사  >  웹 프론트엔드  >  \'this\'가 JavaScript 콜백의 호출 함수를 참조하지 않는 이유는 무엇입니까?

\'this\'가 JavaScript 콜백의 호출 함수를 참조하지 않는 이유는 무엇입니까?

Susan Sarandon
Susan Sarandon원래의
2024-11-04 05:21:01884검색

Why Doesn't 'this' Refer to the Calling Function in JavaScript Callbacks?

이것이 논쟁할 때: 콜백 함수의 'this' 이해

JavaScript에서 함수 호출에서 this의 값은 다음에 의해 결정됩니다. 함수가 실행되는 컨텍스트입니다. 그러나 이를 인수로 전달하면 규칙이 복잡해질 수 있습니다.

구체적으로 다음과 같은 시나리오가 발생합니다. 콜백 함수가 인수로 전달될 때 왜 이 함수를 호출하는 함수로 설정되지 않습니까? 콜백?

'this'의 계층 구조 이해

이것이 왜인지 이해하려면 있는 위치에 설정되어 있으면 함수 호출의 계층 구조를 고려해야 합니다.

  • obj.prepareRandomFunction()은 이를 obj로 설정합니다(답변의 규칙 #2).
  • randomFunction (this.sumData.bind(this))는 this.sumData.bind(this)를 인수로 전달합니다(rule #1).
  • randomFunction 내부에서 callback(data)는 이를 전역 객체(규칙 #1)로 설정합니다.

단, randomFunction이 콜백을 호출하기 전에는 이를 사용합니다. sumData.bind(this)를 사용하여 새 함수를 생성합니다(규칙 #5). 이 새로운 함수는 원래 콜백 함수를 호출하지만 이제 이 함수는 obj(bind에 전달된 인수)에 바인딩됩니다.

콜백 함수에 대한 의미

메서드를 전달할 때 콜백으로서 obj.method()로 호출되지 않는다는 점을 이해하는 것이 중요합니다. 이는 콜백 함수 내에서 올바른 값을 갖지 않음을 의미합니다. 이 문제를 해결하려면 바인딩()을 사용하여 콜백 내에서 이 값을 설정할 수 있습니다.

기타 유용한 참고 사항

  • 규칙 #6 대답은 ES6 화살표 함수가 콜백 함수에서도 이것의 현재 어휘 값을 유지하는 방법을 설명합니다.
  • .apply() 및 .call()을 사용하면 this의 특정 값으로 새 함수 호출을 생성할 수 있습니다.
  • bind()를 사용하면 this의 사용자 지정 값으로 원래 함수를 호출하는 새 함수를 생성할 수 있습니다.
  • 효과적인 JavaScript 코딩과 콜백과 같은 개념을 익히려면 복잡한 특성을 이해하는 것이 필수적입니다.

위 내용은 \'this\'가 JavaScript 콜백의 호출 함수를 참조하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.