jQuery 및 ES6 화살표 함수에서 `$(this)`가 오작동하는 이유는 무엇입니까?

ES6 화살표 함수와 함께 jQuery $(this) 사용: Lexical This Binding

ES6 화살표 함수와 함께 jQuery의 $(this)를 사용하는 경우, 개발자는 $(this)가 self = this를 사용하여 ES5 스타일 클로저로 변환되는 문제에 직면할 수 있습니다. 이 동작은 화살표 함수의 어휘 바인딩 특성으로 인해 발생합니다.

문제:

다음 코드는 문제를 보여줍니다.

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

대신 화살표 함수가 사용됩니다.

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

$(this)는 다음으로 변환됩니다. 예상치 못한 동작으로 이어지는 ES5 스타일 폐쇄.

해결 방법:

이 문제는 ES6 화살표 기능의 고유한 특성이며 Traceur를 사용하여 우회할 수 없습니다. 이 문제를 해결하려면 클릭한 요소에 액세스하기 위해 이를 사용하지 않아야 합니다. 대신 event.currentTarget 속성을 사용할 수 있습니다.

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

jQuery는 콜백 함수가 다른 컨텍스트에 바인딩되는 등 외부 요인으로 인해 this 바인딩이 모호할 수 있는 상황을 위해 특별히 event.currentTarget을 제공합니다. .bind()를 통해.

위 내용은 jQuery 및 ES6 화살표 함수에서 `$(this)`가 오작동하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!