ES6 화살표 기능과 함께 jQuery $(이) 사용(이 바인딩은 어휘)

ES6 화살표 기능과 함께 jQuery $(이) 사용(이 바인딩은 어휘)

어휘와 함께 ES6 화살표 기능 사용this바인딩은 훌륭합니다.

그러나 얼마 전 일반적인 jQuery 클릭 바인딩과 함께 사용하면서 문제가 발생했습니다.

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(자체 = 이) 유형의 폐쇄로 변환됩니다.

Traceur가 어휘 바인딩을 위해 "$(this)"를 무시하도록 하는 방법이 있습니까?

이것은 Traceur와 무언가를 끄는 것과는 아무런 관련이 없습니다. 이것이 바로 ES6의 작동 방식입니다.이 기능은 다음을 사용하여 요청하는 특정 기능입니다.=>대신에function () { }.

ES6를 작성하려면 항상 ES6를 작성해야 합니다.특정 코드 행에서 해당 코드를 전환하거나 전환할 수 없으며, 방법을 억제하거나 변경할 수도 없습니다.=>할 수 있다고 해도, 당신만이 이해할 수 있는 이상한 버전의 자바스크립트를 보게 될 것입니다. 그리고 당신의 맞춤형 트레이서 밖에서는 결코 제대로 작동하지 않을 것입니다. 트레이서의 요점은 분명 아닙니다.

이 특정 문제를 해결하는 방법은 사용하지 않는 것입니다.this클릭한 요소에 대한 액세스 권한을 얻지만 대신event.currentTarget:

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

jQuery 제공event.currentTarget특히, ES6 이전에도, jQuery가 항상 다음을 부과하는 것이 가능하지는 않기 때문입니다.this콜백 함수(즉, 을 통해 다른 컨텍스트에 바인딩된 경우)에서.

이벤트 바인딩

$button.on('click', (e) => {
    var $this = $(e.currentTarget);
    // ... deal with $this
});

고리

Array.prototype.forEach.call($items, (el, index, obj) => {
    var $this = $(el);
    // ... deal with $this
});

다른 경우

미거의 답은 정확하고 저는 그것에 찬성표를 던졌습니다.

그러나 다음과 같은 경우가 있습니다.

$('jquery-selector').each(() => {
    $(this).click();
})

다음과 같이 수정 가능:

$('jquery-selector').each((index, element) => {
    $(element).click();
})

이것은 jQuery에서 첫 번째 인수로 요소 대신 인덱스를 넣는 과거의 실수입니다.

.각(함수)

기능.
유형:Function( Integer index, Element element )
일치하는 각 요소에 대해 실행할 함수입니다.

참조: https://api.jquery.com/each/ #각 함수

에도 적용됩니다..map( function )그리고..filter( function ).

(이것은 제가 이 질문의 다른 버전을 위해 작성한 답변입니다. 이 질문이 중복된다는 것을 알기 전에 말입니다.저는 그 답이 정보를 꽤 명확하게 정리한다고 생각하기 때문에 다른 답들의 표현이 대체로 다를 뿐이지만 커뮤니티 위키로 추가하기로 결정했습니다.)

그럴수는 없어요.화살표 기능의 절반입니다. 그들은 닫힙니다.this그들이 어떻게 불리는지에 따라 정해진 그들만의 것을 갖는 대신에.질문의 사용 사례에 대해, 원하는 경우this할 때 에 의해 됩니다. 는 "jQuery"입니다.function기능.

하지만 화살표를 사용해야 하는 이유가 있다면 (아마도 사용하고 싶을 것입니다).this의화표외를의미수있다사니습용할부의살를▁you▁for를 사용하면 .e.currentTarget에 this원하는 경우:

class Game {
  foo(){
    this._pads.on('click', e => {                   // Note the `e` argument
      if(this.go) {
        $(e.currentTarget).addClass('active');      // Using it
      }
    });
  }
}

그currentTarget가 설정한 값과 .this처리자를 호출할 때 사용합니다.

이 같은 질문에 대한 그의 대답에서 Membly가 말했듯이 ES6를 쓰려면 항상 ES6를 써야 합니다.

ES6의: ES6는 다음과 같습니다.(event)=>{}그러면 당신은 사용해야 합니다.$(event.currentTarget)에 $(this).

을 currentTarget으로 사용하는 을 더 할 수 .({currentTarget})=>{},

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

원래 이 아이디어는 리지 프랭크가 미가의 답변에 언급했고, 저는 그것이 유용하다고 느꼈고 모든 사람들이 그 의견을 읽지 않을 것이라고 생각하기 때문에 저는 이것을 다른 답변으로 썼습니다.

언급URL : https://stackoverflow.com/questions/27670401/using-jquery-this-with-es6-arrow-functions-lexical-this-binding