>  기사  >  웹 프론트엔드  >  JavaScript 콜백 함수에서 \'this\'는 어떻게 작동하나요?

JavaScript 콜백 함수에서 \'this\'는 어떻게 작동하나요?

DDD
DDD원래의
2024-11-03 22:34:03800검색

How does 'this' behave in JavaScript Callback Functions?

JavaScript 콜백 함수의 'this' 이해

JavaScript에서 함수 내 'this'의 값은 함수가 어떻게 작동하는지에 따라 결정됩니다. 호출됩니다. 함수가 다른 함수에 인수로 전달될 때 콜백 함수 내 'this' 값을 다양한 방법으로 제어할 수 있습니다.

기본 동작

일반적으로 , 콜백 함수에서 'this'는 기본적으로 전역 객체로 설정되거나 정의되지 않습니다(엄격 모드에서). 이는 콜백 함수가 기술적으로 특정 객체의 메소드로 호출되지 않기 때문입니다.

.bind()로 'this'를 설정

단, .bind는 () 메소드를 사용하면 콜백 함수가 호출될 때 'this'에 특정 값을 바인딩할 수 있습니다. .bind() 메서드는 항상 'this'를 .bind()에 대한 인수로 전달된 값으로 설정하는 새 함수를 만듭니다.

예: .bind() 사용

귀하의 예에서는:

randomFunction(this.sumData.bind(this))

.bind() 메서드는 'this'를 obj 개체에 바인딩하는 새 함수를 만드는 데 사용됩니다. 따라서 RandomFunction에 의해 콜백 함수(this.sumData)가 호출되면 'this'가 예상한 대로 obj로 설정됩니다.

직접 메서드 호출과 비교

반대로, randomFunction 내에서 this.sumData()를 직접 메소드 호출하면 'this'가 전역 객체로 설정되거나 정의되지 않습니다. 왜냐하면 함수가 obj 객체의 메소드가 아닌 일반 함수로 호출되기 때문입니다.

ES6의 화살표 함수

ES6에서 화살표 함수는 'this'에 대해 다른 동작을 수행합니다. 이들은 정의된 환경에서 'this'의 어휘 값을 유지합니다. 이는 화살표 함수가 어떻게 호출되는지에 관계없이 'this'는 항상 동일한 객체를 참조한다는 것을 의미합니다. 이는 특정 시나리오에서 도움이 될 수 있지만 이 동작을 인식하는 것이 중요합니다.

결론

결국 콜백 함수 내 'this' 값은 다음과 같습니다. 함수가 호출되는 방식에 따라 결정됩니다. 'this'를 제어하는 ​​다양한 방법을 이해함으로써 JavaScript 콜백에서 데이터를 효과적으로 전달하고 조작할 수 있습니다.

위 내용은 JavaScript 콜백 함수에서 \'this\'는 어떻게 작동하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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