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

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

DDD
DDD원래의
2024-11-03 15:42:30303검색

How Does `this` Work in JavaScript Function Calls and Callbacks?

JavaScript에서 이 포인터가 설정되는 경우

함수 호출에서 이 포인터 이해

JavaScript에서는 모든 함수 호출이 설정됩니다. 이에 대한 새로운 가치. this에 할당된 값은 함수를 호출하는 데 사용된 방법에 따라 결정됩니다.

이 포인터를 설정하는 주요 방법

이 포인터를 설정하는 기본 방법은 6가지가 있습니다. JavaScript:

  • 일반 함수 호출: 기본값은 전역 개체(예: 창) 또는 정의되지 않음(엄격 모드)입니다.
  • 메서드 Call: 메소드를 소유한 객체를 가리킵니다.
  • **.apply() 또는 .call(): 전달된 인수에 따라 이를 설정합니다.
  • new 사용 : 새 객체를 생성하고 이를 설정합니다.
  • **.bind(): 내부적으로 .apply()를 사용하여 사용자 정의 this 값이 있는 새 함수를 반환합니다.
  • ES6 Fat Arrow 함수: 현재 어휘 this 값을 바인딩합니다(재정의할 수 없음).

콜백 함수의 This

콜백 함수 이것을 설정하는 독특한 방법은 아닙니다. 호출 함수는 콜백을 호출할 때 이 값을 결정합니다.

예시 분석

코드 조각에서:

<code class="javascript">var randomFunction = function(callback) {
  var data = 10;
  callback(data);
};

var obj = {
  initialData: 20,
  sumData: function(data) {
    var sum = this.initialData + data;
    console.log(sum);
  },
  prepareRandomFunction: function() {
    randomFunction(this.sumData.bind(this));
  }
};

obj.prepareRandomFunction();</code>
  • obj.prepareRandomFunction()은 메소드 호출을 사용하여 this를 obj로 설정합니다.
  • randomFunction(this.sumData.bind(this))는 .bind()를 사용하여 현재 this 값(예: obj)을 바인딩합니다. 콜백 함수가 반환되었습니다.

따라서 randomFunction이 콜백을 호출하면 this.sumData.bind(this)의 .bind() 사용으로 인해 obj로 설정됩니다.

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

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