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