ES6 화살표 기능이 있는 jQuery 클릭 핸들러에서 `$(this)`가 실패하는 이유는 무엇입니까?

ES6 화살표 함수 및 jQuery $(this): 바인딩 혼란

ES6 화살표 함수는 어휘적 이 바인딩을 제공하여 필요를 제거하여 코드를 단순화합니다. 명시적인 바인드() 호출의 경우. 그러나 jQuery의 클릭 바인딩과 함께 사용하면 이 동작으로 인해 문제가 발생할 수 있습니다.

Arrow 함수의 예기치 않은 동작:

다음 코드를 고려하세요.

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

화살표 기능을 이용하여 대신:

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

$(this) 참조는 ES5 스타일 클로저(self = this)로 변환됩니다.

ES6 화살표 함수 바인딩 이해:

이 동작은 ES6 화살표 기능에 내재된 것이며 Traceur 번역에는 문제가 없습니다. 화살표 함수는 항상 이것을 어휘적으로 둘러싸는 컨텍스트에 바인딩합니다. 이 경우 foo() 메서드입니다.

event.currentTarget을 사용하는 솔루션:

문제를 해결하려면 $(this) 대신 event.currentTarget을 활용하세요. 화살표 함수 콜백 내에서 클릭한 요소에 액세스합니다.

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

jQuery는 특별히 event.currentTarget을 제공합니다. 콜백 함수가 올바른 이 컨텍스트에 액세스할 수 없는 상황을 수용하기 위해.

위 내용은 ES6 화살표 기능이 있는 jQuery 클릭 핸들러에서 `$(this)`가 실패하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!