자바 스크립트 - 인스턴스 클래스의 속성은 $ .post

Question

에서 콜백 이후에 정의되어 있지 않습니다 나는 다음과 같은 JS는 니펫을했다 :

그것은 항상 곁에있어

<script language="javascript"> 
      function test() { 
      this.a = 10; 
     }; 
     test.prototype.next = function() { 
      alert('before: ' + this.a); 
      $.ajax({ 
       url: 'some-url', 
       async: true, 
       type: 'POST', 
       dataType: 'json', 
       success: this.callback 

      }); 
     }; 
     test.prototype.callback = function() { 
      alert('after: ' + this.a); 
     }; 

     $(document).ready(function() { 
      var test1 = new test(); 
      test1.next(); 
     }); 
     </script> 

는 결과를 생성 : 하기 전에 : 10 후 : UNDEFINE합니다.

$ .post의 콜백 함수에서 클래스의 속성이 정의되지 않은 이유는 무엇입니까? 누구든지 나를 도울 수 있을까? 고마워.

Answer 1

success: this.callback 

이것은 작동하지 않습니다. 콜백을 인스턴스 (this)에 바인드해야합니다. 그렇지 않으면 범위를 잃어 버리게됩니다. 이 기능만으로도 불행히도 기억하지 못할 것입니다.

수동 방법은

var me = this; 

// ..... 

success: function(x,y,z) { me.callback(x,y,z) } 

것 내가 jQuery를 지금이 권리가 내장 된 도우미를 찾을 수 없습니다. CoffeeScript에서는 축 화살표 => 만 사용하면됩니다.

업데이트

:은 JQuery와 방법을 발견 : 거기 당신은 $.ajax에 대해 지정할 수있는 매개 변수 context이며, 그 모든 콜백 this 될 것입니다 :

success: this.callback, 
context: this 

Answer 2

문제는 함수 클로저 때문이다. 콜백에 대한 "this"는 콜백 함수 자체 대신 "test"를 가리 키지 않습니다. 이

function binder (func, thisValue) { 
      return function() { 
       return func.apply(thisValue, arguments); 
      } 
     } 

var bindedFun = binder(function() { 
      alert('after: ' + this.a); 
     }, test); 

Answer 3

같은

사용 뭔가 당신은 this 점 때문에 다른 개체에 대한 컨텍스트를 잃어버린있다. jQuery에서 사용할 수있는 빌트인 프록시 함수가 있습니다. 다음과 같이 코드를 변경합니다

// ... 
$.ajax({ 
    url: 'some-url', 
    async: true, 
    type: 'POST', 
    dataType: 'json', 
    success: $.proxy(this.callback, this) 
}); 
// ... 

Answer 4

이 작업을 수행하는 다른 방법은 콜백에게 로컬 범위에 액세스 할 수있는 지역의 기능을 지역 범위 this에 대한 참조를 저장하는 것입니다. 콜백은 this에 대한 액세스를 원할 수 있기 때문에 정상적으로 작동 할 수 있다고 생각하지만, 반드시 그렇게 할 필요는 없습니다. 다음과 같은 UR 코드에서

test.prototype.next = function() { 
     var self = this; 

     function callback() { 
      alert('after: ' + self.a); 
     } 

     alert('before: ' + this.a); 
     $.ajax({ 
      url: 'some-url', 
      async: true, 
      type: 'POST', 
      dataType: 'json', 
      success: callback 

     }); 
    }; 

Answer 5

몇 가지 변화가

<script language="javascript"> 
      function test() { 
      this.a = 10; 
     }; 
     test.prototype.next = function() { 
      alert('before: ' + this.a); 
      var oThis = this;   //Save refernce of Test() function in a varaiable. then use it 
      $.ajax({ 
       url: 'some-url', 
       async: true, 
       type: 'POST', 
       dataType: 'json', 
       success: oThis.callback // This is change this=> earlier was referring 
             //$.ajax object so save this of test() 
             // in a variable and then use it 
      }); 
     }; 
     test.prototype.callback = function() { 
      alert('after: ' + this.a); 
     }; 

     $(document).ready(function() { 
      var test1 = new test(); 
      test1.next(); 
     }); 
     </script>