자바 스크립트 클래스 범위

Question

내 Post.success 함수 내에서 this.RenderDeals()를 호출 할 수 없습니다. 나는 이것이 스코프와 관련이 있다고 가정한다. 누군가가 문제에 대해 밝히고 해결 방법을 제안 할 수 있습니까? 나는 행운없이 프로토 타입과 모듈 패턴을 사용해 보았다.

FYI Post는 jQuery Deferred 객체를 반환하는 $ .ajax 래퍼입니다.

function Deals() { 
     this.template = '#trTemplate'; 
     this.container = '#containerTable'; 
     this.GetDeals = function() { 
      Post('Deal.svc/GetDeals') 
      .success(function (result) { 
       this.RenderDeals(result); 
      }); 
     }; 
     this.RenderDeals = function (deals) { 
      $(this.template).tmpl(deals).appendTo(this.container); 
     } 
    } 


    var deal = new Deals(); 
    deal.GetDeals(); 

UPDATE :

좋아, 그래서 난 그냥 GetDeals 기능 위에 다음 줄을 추가 : 대신

var me = this; 

및

me.RenderDeals(result); 

가 제대로 작동하려면 나타납니다 부르지 만, 이유가 확실하지 않습니다.

Answer 1

당신의 "성공"함수의 this 참조 거의 확실를 너는 네가 아니야. 그것이있다. 이 변경을 시도

function Deals() { 
    var instance = this; 

    this.template = '#trTemplate'; 
    this.container = '#containerTable'; 
    this.GetDeals = function() { 
     Post('Deal.svc/GetDeals') 
     .success(function (result) { 
      instance.RenderDeals(result); 
     }); 
    }; 
    this.RenderDeals = function (deals) { 
     $(this.template).tmpl(deals).appendTo(this.container); 
    } 
} 

은 "예"변수에 this에 대한 참조를 보관 한으로 핸들러가 다른 기능 ("RenderDeals")를 호출 할 때 다시 해당 인스턴스 얻기의 보장 방법이있을 것이다.

Answer 2

거래() 외부에서 RenderDeals()를 정의하지 않는 이유는 무엇입니까? 대신이의 그런

function RenderDeals(dealsObj, dealsData) { 
     $(dealsObj.template).tmpl(dealsData).appendTo(dealsObj.container); 
    } 

:

RenderDeals(this, result); 

Answer 3

이 시도 :

this.RenderDeals(result); 

는이 작업을 수행

var Deals = { 
    template: $('#trTemplate'), 
    container: $('#containerTable'), 
    init: function(){ 
     return Deals; 
    } 
    GetDeals: function() { 
     Post('Deal.svc/GetDeals') 
     .success(function (result) { 
      Deals.RenderDeals(result); 
     }) 
    }, 
    RenderDeals = function (deals) { 
     Deals.template.tmpl(deals).appendTo(Deals.container); 
    } 
} 

var deal = Deals.init(); 
deal.GetDeals(); 

Answer 4

맞아요, 범위 지정 문제입니다. Pointy는 정답을 가지고 있지만, 내가하고있는 일들을 조금만 채울 수 있다고 생각했습니다.

this은 기본적으로 함수가 첨부 된 것으로 설정된 암시 적 변수 또는 아무것도 연결되어 있지 않은 경우 전역 개체입니다. 함수를 매개 변수로 Post # success에 전달하면 거래의 현재 인스턴스는 물론 모든 인스턴스에 연결되지 않습니다.

여기는 Pointy가 가장 잘 대답합니다. 그는 암시적인 변수 this을 캡처하는 명시 적 변수를 만듭니다. 자바 스크립트의 가장 멋진 기능 중 하나는 함수 정의의 범위에있는 모든 것도 함수 호출의 범위에 포함된다는 것입니다. 따라서 변수를 작성하면 나중에 익명 함수가 필요할 때마다 다시 액세스 할 수 있습니다. 라는.

Answer 5

첫째, 자바 스크립트에는 클래스가 없으며 개체 만 있습니다. 이것은 이상하게 들릴지 모르지만, 자바 스크립트를 사용하지 않고 OOP를 할 수 있습니다.

범위 문제에 대해 정확하다고 가정하면 this 키워드는 이상한 동작을합니다. 더 많은 정보는 this을 참조하십시오.

모든 기능 객체의 prototype 속성을 사용하십시오. 나는 다음과 같은 방식으로 내 자바 스크립트 OOP 할 선호 : 각 프로토 타입 함수의 상단에 var me = this;을 선언함으로써

function Deals(){ 
    //this is your constructor 
    var me = this; 
    //this way you can avoid having to search the DOM every time you want to reference 
    //your jquery objects. 
    me.template = $('#trTemplate'); 
    me.container = $('#containerTable'); 
} 
Deals.prototype.getDeals = function(){ 
    var me = this; 
    Post('Deal.svc/GetDeals') 
    .success(function (result) { 
     me.RenderDeals(result); 
    }) 
} 
Deals.prototype.renderDeals = function(){ 
    var me = this; 
    me.template.tmpl(deals).appendTo(me.container); 
} 

을, 당신도 콜백의 내부에 관심있는 객체를 참조 클로저를 만들 :