ES6 和 promise 中的变量范围

Question

不确定我在这里缺少什么。

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

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 指的是函数的词法范围，而不是您当前所在的对象。使用箭头函数可确保 @987654324箭头函数外的@与箭头函数内的this相同。

您需要使用this.contact，因为contact 是该类的实例属性。

Answer 2

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

有不同的方法来解决这个问题。

1- 您可以将activate的上下文（this）保存到activate的闭包中的一个变量中，以便您可以在then的核心内访问它。

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