Javascript class scope

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参考几乎肯定是不是你t它是。试试这个变化：

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

为什么不在Deals（）之外定义RenderDeals（）？

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

然后，而不是这样的：

this.RenderDeals(result); 

这样做：

RenderDeals(this, result); 

Answer 3

试试这个：

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

你是对的，这是一个范围界定问题。波蒂有正确的答案，但我认为我可以填补一些正在发生的事情。

this在JavaScript中是一个隐式变量，它被设置为默认情况下函数所附加的任何内容（或者全局对象，如果它不附加任何东西）。当您将函数作为参数传递给Post＃成功时，它不会附加到任何实例，更不用说当前的Deals实例。

Pointy在这里有最好的答案，他正在做的是创建一个显式变量，捕获交易的隐含变量this。 javascript最酷的功能之一是，函数定义范围内的所有内容都将在函数调用的范围内，因此通过创建该变量，您可以稍后再次访问它，无论何时何地匿名函数是调用。

Answer 5

首先，在javascript中没有类，只有对象。这听起来很奇怪，但是你仍然可以在没有javascript的情况下做OOP :)我建议你阅读这个。

你对范围问题是正确的，this关键字有一些奇怪的行为。请阅读this了解更多信息。

使用任何函数对象的prototype属性进行研究。我喜欢做我的javascript以下列方式OOP：

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

通过在每个原型函数的顶部声明var me = this;，您可以创建一个指向感兴趣的对象封闭，甚至内部的回调:)