承诺中的 ES6 和变量作用域

Question

不确定我在这里遗漏了什么。

我需要将 data 的输出转换为 this.contact。现在，我正在使用静态 class 变量，但必须这样做似乎很脏。

export class contactEdit {
  static t; // static class var
  constructor() {
    this.id = null;
    this.contact = null;
    contactEdit.t = this;
  }

  activate(id) {
    this.id = id;
    let contact = this.contact; // scoped version of class var
    return dpd.contacts.get(id).then(function(data) {
      console.log(data);
      contactEdit.t.contact = data; // this works
      contact = data; // this doesn't
    });
  }
}

通常我会在 activate() 函数中创建一个 var contact （它在 Chrome 控制台中工作）但这似乎在 ES6 中不起作用。

Chrome 控制台：

var c = null;
undefined
c;
null
dpd.contacts.get('a415fdc8f5a7184d').then(function(data) {
      c = data;
    });
Object {}fail: (n)then: (e,t)__proto__: Object
c;
Object {firstName: "John", lastName: "Doe", id: "a415fdc8f5a7184d"}

Answer 1

你需要做两件事。首先，使用箭头函数，其次，使用`this.contact = data;

activate(id) {
  this.id = id;
  return dpd.contacts.get(id).then(data => {
    console.log(data);
    this.contact = data;
  });
}

您使用箭头函数是因为它处理 JavaScript 的“this”问题，其中 this 指的是函数的词法范围，而不是您当前所在的对象. 使用箭头函数确保箭头函数外的 this 与箭头函数内的 this 相同。

您需要使用 this.contact，因为 contact 是 class.

的实例属性

Answer 2

问题是 contact = data; 会更新本地 contact 变量的值，但不会更改 this.contact 的值。您需要改为更新 contact 联系人属性。问题是您无法访问匿名函数体内的 this（或者更确切地说，匿名函数的 this 与 this 不同 activate's).

有多种方法可以解决这个问题。

1- 您可以将 activate 的上下文 (this) 保存到 activate 闭包中的变量中，以便您可以在 then.[=26 的核心中访问它=]

activate(id) {
    this.id = id;
    let that = this;
    return dpd.contacts.get(id).then(function(data) {
      console.log(data);
      that.contact = data;
    });
  }

2- 您可以将函数绑定到 activate 的 this，以便在相同的上下文中调用它。

activate(id) {
    this.id = id;
    return dpd.contacts.get(id).then(function(data) {
      console.log(data);
      this.contact = data;
    }.bind(this));
  }

3-（ES6 推荐）你可以使用箭头函数（箭头函数没有自己的上下文，所以它们会保留创建它们的上下文）

activate(id) {
    this.id = id;
    return dpd.contacts.get(id).then((data) => {
      console.log(data);
      this.contact = data;
    });
  }

承诺中的 ES6 和变量作用域

ES6 and variable scope inside a promise

promise

ecmascript-6

deployd

aurelia