JavaScript 콜백 내에서 "this"에 올바르게 액세스하려면 어떻게 해야 합니까?

JavaScript 콜백의 유사성

JavaScript에서 이벤트 핸들러 콜백 내의 인스턴스 메소드를 활용하면 "this"의 범위가 의도한 범위에서 변경될 수 있습니다. 콜백을 호출한 소스에 대한 인스턴스입니다. 결과적으로 아래 예제와 유사한 코드가 자주 사용됩니다.

function MyObject() {
  this.doSomething = function() {
    ...
  }

  var self = this
  $('#foobar').bind('click', function(){
    self.doSomethng()
    // this.doSomething() would not work here
  })
}

기능적이긴 하지만 이 접근 방식은 이상해 보일 수 있습니다. 더 최적의 솔루션이 있습니까?

클로저 및 "this" 선호도 이해

이 문제는 jQuery를 넘어 JavaScript의 "this" 및 클로저 처리에서 비롯됩니다. 클로저는 아래 그림과 같이 중첩된 함수가 둘러싸는 함수에 정의된 변수에 액세스할 수 있도록 해줍니다.

var abc = 1; // we want to use this variable in embedded functions

function xyz(){
  console.log(abc); // it is available here!
  function qwe(){
    console.log(abc); // it is available here too!
  }
  ...
};

그러나 "This"는 다르게 동작합니다. 특정 범위 내에서 일정하게 유지되는 일반 변수와 달리 "this"는 범위에 따라 동적으로 달라질 수 있습니다.

// we want to use "this" variable in embedded functions

function xyz(){
  // "this" is different here!
  console.log(this); // not what we wanted!
  function qwe(){
    // "this" is different here too!
    console.log(this); // not what we wanted!
  }
  ...
};

해결책: "this"에 별칭 지정

이를 방지하려면 문제는 JavaScript를 사용하여 "this"를 변수에 할당하여 본질적으로 별칭을 지정할 수 있다는 것입니다. 이를 통해 중첩된 함수 전체에서 의도한 객체를 참조할 수 있습니다.

var abc = this; // we want to use this variable in embedded functions

function xyz(){
  // "this" is different here! --- but we don't care!
  console.log(abc); // now it is the right object!
  function qwe(){
    // "this" is different here too! --- but we don't care!
    console.log(abc); // it is the right object here too!
  }
  ...
};

이 동일한 원칙이 "인수"와 같은 다른 의사 변수에도 적용됩니다.

위 내용은 JavaScript 콜백 내에서 "this"에 올바르게 액세스하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!