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

Program / 글쓴이

어휘 this바인딩 과 함께 ES6 화살표 기능을 사용하는 것이 좋습니다.

그러나 잠시 전에 일반적인 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 (self = this) 유형 클로저로 변환됩니다.

Traceur가 어휘 바인딩에 대해 “$ (this)”를 무시하도록하는 방법이 있습니까?

답변

이것은 Traceur와 관련이 없으며 무언가를 끄는 것과 관련이 없습니다. 이것은 단순히 ES6가 작동하는 방식입니다. =>대신을 사용하여 요청하는 특정 기능 입니다 function () { }.

ES6를 작성하려면 항상 ES6를 작성해야하고 특정 코드 줄에서 전환 할 수 없으며 =>작동 방식을 억제하거나 변경할 수 없습니다 . 당신이 할 수 있다고하더라도, 당신은 단지 당신 만이 이해하고 사용자 정의 된 Traceur 외부에서는 제대로 작동하지 않는 기괴한 버전의 JavaScript를 보게 될 것입니다. 이것은 확실히 Traceur의 요점이 아닙니다.

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

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

jQuery는 event.currentTarget특히 ES6 이전에도 jQuery가 this콜백 함수 를 부과하는 것이 항상 가능하지는 않기 때문에 제공 합니다 (즉, bind.

답변

이벤트 바인딩

$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();
})

이것은 첫 번째 인수로 요소 대신 index 를 넣는 jQuery의 역사적인 실수입니다 .

.each (함수)

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

참조 : https://api.jquery.com/each/#each-function

답변

(이것은이 질문의 다른 버전에 대해 작성한 답변입니다.이 질문을 배우기 전에이 질문의 중복이었습니다. 대답이 정보를 상당히 명확하게 모아 놓은 것 같아서 크게 다르지만 커뮤니티 위키로 추가하기로 결정했습니다. 다른 답변의 구문.)

당신은 할 수 없습니다. 그것은 화살표 함수의 절반이며, this호출 방법에 따라 설정된 자체를 갖는 대신 닫힙니다 . 질문의 사용 사례의 경우 this핸들러를 호출 할 때 jQuery로 설정하려면 핸들러가 function함수 여야 합니다.

그러나 화살표를 사용하는 이유가있는 경우 (아마도 this화살표 외부에서 의미하는 것을 사용하려는 경우) 원하는 경우 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이벤트 객체는 jQuery를가 설정 한 것과 동일한 this핸들러를 호출 할 때.

답변

으로 빈약는 이 같은 질문에 그의 대답했다 당신이 ES6를 작성하려는 경우, 당신은 ES6 모든 시간을 쓸 필요 ,

따라서 ES6 :의 화살표 기능 (event)=>{}을 사용 $(event.currentTarget)하는 경우 대신 을 사용해야 합니다 $(this).

currentTarget을 더 멋지고 깔끔하게 사용할 수도 있습니다 ({currentTarget})=>{}.

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

원래이 아이디어는 @Meager 의 답변에서 rizzi frank 에 의해 주석 처리되었으며 유용하다고 느꼈고 모든 사람들이 그 주석을 읽지는 않을 것이라고 생각 하므로이 다른 대답으로 작성했습니다.

답변