ES6和承诺内的变量范围

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

通常我会创造一个var contact的activate()功能（它适用于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.contact，因为contact是该类的实例属性。

Answer 2

问题是contact = data;将更新本地contact变量的值，但不会更改this.contact的值。 您需要改为更新contact联系人属性。问题在于你不能访问函数内核中的this。

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

1您可以保存激活的情况下（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 - 可以绑定功能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; 
    }); 
    }