이벤트 핸들러에서 ES6 화살표 함수와 함께 jQuery의 $(this)를 올바르게 사용하는 방법은 무엇입니까?

ES6 화살표 함수와 함께 jQuery $(this) 사용(어휘적 this 바인딩)

ES6 화살표 함수를 사용하여 이벤트 핸들러를 바인딩하면 문제가 발생할 수 있습니다. jQuery의 $(this) 선택기로 작업합니다. 이는 화살표 함수가 this 키워드를 어휘적으로 바인딩하기 때문입니다. 이는 jQuery 콜백에서 원하는 동작이 아닐 수 있습니다.

다음 예에서는 문제를 보여줍니다.

class Game {
  foo() {
    this._pads.on('click', () => {
      if (this.go) { $(this).addClass('active'); }
    });
  }
}

위 예에서 다음을 사용합니다. 클릭 이벤트 핸들러의 화살표 함수로 인해 $(this)는 클릭된 요소 대신 Game 인스턴스를 참조하게 됩니다. 이는 화살표 함수에 자체 this 바인딩이 없으므로 주변 범위에서 이를 상속받기 때문입니다.

해결책

이 문제를 해결하려면 화살표 함수 사용을 피하세요. jQuery 이벤트 핸들러를 바인딩할 때. 대신 기존 함수 선언을 사용하거나 바인딩 메서드를 사용하여 this 키워드를 명시적으로 바인딩하세요.

class Game {
  foo() {
    this._pads.on('click', function() {
      if (this.go) { $(this).addClass('active'); }
    }.bind(this));
  }
}

또는 event.currentTarget을 사용하여 클릭한 요소에 액세스할 수 있습니다.

class Game {
  foo() {
    this._pads.on('click', (event) => {
      if (this.go) { $(event.currentTarget).addClass('active'); }
    });
  }
}

이벤트 사용 .currentTarget은 콜백 함수의 바인딩 컨텍스트에 관계없이 이벤트를 트리거한 요소에 대한 액세스를 제공합니다.

위 내용은 이벤트 핸들러에서 ES6 화살표 함수와 함께 jQuery의 $(this)를 올바르게 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!