2016-06-28 24 views
1

下面的代码不起作用,因为在此时函数被调用这个 =窗口。我期待这个 = controller.actions.project,但自那时以来,我们学到了更多关于这个这个关键字是如何工作的,现在又明白了为什么不是这种情况。从传递给它的构造函数的函数访问javascript对象的属性

BROKEN

controller.actions = { 
     project: new TableauAction("Project", 
      function() { 
       $http.get('/reports/projects/').then(function (response) { 
        this.options = response.data; 
       }); 
      }}; 

下解决了这个问题,但它是相当不雅

WORKS

controller.actions = { 
     project: new TableauAction("Project", 
      function() { 
       var self = controller.actions.project; 
       $http.get('/reports/projects/').then(function (response) { 
        self.options = response.data; 
       }); 
      }}; 

TableauAction对象:

function TableauAction(name, onChange) { 
this.name = name; 
this.onChange = onChange;} 

我的问题是,是否有更优雅的方式来访问从传递给它的构造函数的函数的对象的属性?

+1

小心 “本”,看看..这:http://stackoverflow.com/questions/4195970/what-does -这个意思 。在javascript中,“this”根据其上下文假设各种值。在你的情况下,匿名函数中的“this”和回调函数中的“this”在它们之间依然不同,因此,据我所知,你不得不实际声明自变量(或者扩展一个非常特定的原型在你的班级)。 – briosheje

+0

这很大程度上取决于构造函数与函数的作用。请向我们展示'TableauAction'的定义! – Bergi

+0

'self = this'会起作用吗?你传递的函数的上下文是什么? – Bergi

回答

1

将“this”上下文添加到onChange回调中。

function TableauAction(name, onChange) { 
    this.name = name; 
    this.onChange = onChange; 
    //add this context to your onChange 
    this.onChange.bind(this); 
} 

然后更改下面这样:

controller.actions = { 
     project: new TableauAction("Project", 
      function() { 
       //"this" refers to TableauAction instance now 
       var $this = this; 
       $http.get('/reports/projects/').then(function (response) { 
        //this refers to $http callback response.. 
        $this.options = response.data; 
       }); 
      }}; 
} 
+1

是的工作 - 谢谢! –

相关问题