JavaScript에서 인스턴스 메서드를 콜백으로 사용할 때 `this` 범위를 유지하는 방법은 무엇입니까?

this JavaScript 콜백의 수수께끼

인스턴스 메소드를 이벤트 핸들러로 할당할 때 this의 범위는 객체 인스턴스를 이벤트 호출자에게 전달합니다. 이로 인해 문제가 발생할 수 있으며 다음과 같은 해결 방법을 사용해야 합니다.

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

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

기능적이긴 하지만 이 접근 방식은 어색해 보일 수 있습니다. 더 좋은 방법이 있나요?

클로저 이해

기본적인 문제는 jQuery를 넘어서 JavaScript의 클로저 동작에 뿌리를 두고 있습니다. 클로저를 사용하면 내부 함수가 외부 범위에 선언된 변수에 액세스할 수 있습니다. 그러나 this는 범위를 동적으로 변경할 수 있는 특수 변수입니다.

this를 내장 함수로 채널링하려면 abc:

var abc = this;

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!
  }
  ...
};

abc가 내장된 함수 내에서도 올바른 객체 참조를 유지할 수 있습니다.

결론

this에 별칭을 지정하면 범위를 손상시키지 않고 인스턴스 메서드를 콜백으로 효율적으로 사용할 수 있습니다. 이 기술은 this뿐만 아니라 인수와 같은 다른 의사 변수에도 적용됩니다.

위 내용은 JavaScript에서 인스턴스 메서드를 콜백으로 사용할 때 `this` 범위를 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!