Question

我有一个管理特定对话框的单独对象。考虑以下代码。由于很容易想象函数的作用，因此我无法访问该类的实例。我尝试使用传统的that = this方法。

export class Whatever implements OnInit {

    that = this;

    dialog = {
       data:{},
       open:function() {
           //way to access 'that' variable
       },
       close:function() {},
       toggle:function() {}
    }

    //other declarations and functions
}

在我的应用程序扩展时，该服务中有太多功能。因此，我试图将这些功能中的一些整合到对象中，这将使代码更简洁。

如果有更好的方法，我也想知道。谢谢。

Answer 1

最好的方法是将function(){}替换为ES6箭头功能，该功能像this一样保留() => {}上下文。

您也可以使用functions(){}.bind(this)，但是最好只使用箭头功能。两者都将保留您在函数正文中对this的引用

Answer 2

您必须使用箭头功能以确保不会丢失上下文（this）;

export class Whatever implements OnInit {   

  dialog = {
     data:{},
     open:() => {
         //'this' will point to Whatever class's instance
     },
     close:() => {},
     toggle:() => {}
  }

  //other declarations and functions
}

Answer 3

在您的代码中，that不是变量，它是Whatever实例的属性。

您的dialog也是Whatever实例的属性。在调用其方法时，this会因调用方式而异。

要确保他们访问Whatever实例，可以使用箭头功能，并在功能内使用this：

export class Whatever implements OnInit {

    dialog = {
       data: {},
       open: () => {
           // use `this` here
           // use `this.dialog.data` to acccess the data above
       },
       close: () => {},
       toggle: () => {}
    };

    //other declarations and functions
}

之所以行之有效，是因为在您声明了类字段的情况下，它们被有效地初始化，就好像它们在构造函数内部一样，并且在构造函数内部，this引用了实例。箭头函数在创建它们的上下文的this上封闭（就像在范围内变量上封闭一样）。

在实例对象内部的函数中获取类的实例（this）-Typescript / Angular

3 个答案: