JQuery 위젯, "this"에 대한 참조가 손실 됨

Question

참고 : 코드가 길어 보이지만 데모 목적으로는 간단한 psuedo 코드입니다. 도망 가지 마!

키 입력을 수신하는 위젯을 작성했습니다. onKeyDown 이벤트가 발생하면 this에 대한 참조가 손실됩니다. 그래서 위젯을 참조하기 위해 self이라는 범위 변수를 설정했습니다. self은 위젯이 작성 될 때 초기화됩니다.

이 방법이 효과적이지만 올바른 방법인지는 확실하지 않습니다. 나는 여기의 해결책이 프록시와 관련이 있다고 생각한다. 아마도 self 변수가 이미 프록시 역할을 수행하고 있습니까? 누군가는 일어나고있는 무슨을에 약간 빛을 비춰주고 싶 는다?

(function($) 
{ 
    var vendorPrefix = Modernizr.prefixed("transform"); 
    var self; 

    $.widget("ui.myWidget", { 

     _create: function() 
     { 
      self = this;    
      //Do some widget stuff 
      document.addEventListener('keydown', this.onKeyDown, false) 
      return this; 
     }, 

     exampleFn: function() 
     { 
     }, 

     onKeyDown: function(event) 
     { 
      // this now refers to "document" and not the widget    
      switch(event.keyCode) 
      { 
       case 37: 
        self.exampleFn(); 
        break; 
       case 39: 
        self.exampleFn(); 
        break; 
      } 
     } 

    }); 
})(jQuery); 

Answer 1

또한 jQuery.proxy()를 사용할 수 있습니다

onKeyDown: $.proxy(function(event) 
{ 
    // this now refers to "document" and not the widget    
    switch(event.keyCode) 
    { 
     case 37: 
      this.exampleFn(); 
      break; 
     case 39: 
      this.exampleFn(); 
      break; 
    } 
}, this) 

어쨌든, 무엇이 일어나고있는 것은 함수에서 this 그 기능을 의미한다는 것이다. 그래서 this에 onKeyDown은 onKeyDown 기능입니다. 위와 같이 프록시를 사용하면 onKeyDown에있는 this은 상위 함수에 대한 참조가됩니다. 자바 스크립트에서 this 행동에

더 : How does the "this" keyword work?

Answer 2

"this"키워드는 이벤트가 첨부 된 개체를 참조하기 때문입니다.

자기 팁을 사용하는 것이 좋습니다.

Answer 3

나는 프록시가 의미하는 바가 javascript에는 없다는 것이 확실하지 않지만, 본질적으로 전역 변수를 만들었으므로 올바른 방법은 아닙니다.

예를 들어 위젯이 여러 번 초기화 된 경우 코드에 따라 실제로 이상한 동작이 나타날 수 있습니다.

전역 var self을 제거하고 개체 선언 내에서 _create 메서드 위로 이동하여 개체에 대한 개인 변수가되도록합니다. 당신이 self 변수를 제거하려는 경우