ES6 화살표 함수 내에서 jQuery의 `$(this)`와 `this` 바인딩을 어떻게 보존할 수 있습니까?

ES6 Arrow 함수에서 jQuery $(this)를 사용하여 Lexical This 바인딩 보존

jQuery 클릭 바인딩으로 작업할 때 개발자에게 문제가 발생할 수 있습니다. ES6 화살표 함수를 어휘적 바인딩과 함께 사용하려고 할 때. 이는 ES6의 화살표 함수가 this를 어휘적으로 바인딩하기 때문에 this 값이 다른 클로저를 기대하는 jQuery를 사용할 때 예기치 않은 동작이 발생할 수 있기 때문입니다.

제공된 예에서:

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

화살표 함수는 this를 어휘적으로 바인딩하여 $(this)가 클릭한 요소가 아닌 Game 개체를 참조하도록 합니다. 이 문제를 해결하려면 $(this):

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

대신 event.currentTarget을 사용해야 합니다. 이렇게 하면 jQuery가 명시적으로 event.currentTarget을 제공하므로 $(this)가 클릭한 요소를 올바르게 참조하게 됩니다. 이 값이 일관되지 않을 수 있는 시나리오를 처리합니다.

어휘 바인딩 이해 ES6

ES6 화살표 함수에는 어휘 this 바인딩이 있습니다. 즉, 주변 컨텍스트의 this 값을 상속합니다. 이는 우발적인 바인딩 문제를 방지할 수 있지만 콜백 작업 시 신중한 고려가 필요하므로 유리하면서도 어려울 수 있습니다.

결론

ES6 화살표 함수를 jQuery 클릭 바인딩에서는 this 바인딩의 어휘에 유의하고 event.currentTarget을 사용하여 클릭된 요소에 명시적으로 액세스하는 것을 고려하는 것이 중요합니다. 이렇게 하면 올바른 기능이 보장되고 이 값의 변화로 인한 예기치 않은 동작이 방지됩니다.

위 내용은 ES6 화살표 함수 내에서 jQuery의 `$(this)`와 `this` 바인딩을 어떻게 보존할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!