的Javascript對象範圍界定

Question

我不知道下面的區別的：

export default Ember.Component.extend({ 

    errors: {}, 

    performPermalinkUpdate: function(){ 

     let errors = this.get('errors'); 

     this.requestPermalink(this.get('title'), this.endpoint).then((resp) => {  
      // Do success stuff 
     }).catch((resp) => { 
      Ember.set(errors, 'permalink', "Test"); 
     }); 
    } 
}); 

VS

export default Ember.Component.extend({ 

    errors: {}, 

    performPermalinkUpdate: function(){ 

     this.requestPermalink(this.get('title'), this.endpoint).then((resp) => {  
      // Do success stuff 
     }).catch((resp) => { 
      let errors = this.get('errors'); 
      Ember.set(errors, 'permalink', "Test"); 
     }); 
    } 
}); 

第一個實際上並沒有改變errors財產。該錯誤從未出現在模板上。而第二個和結果的錯誤顯示在我的模板上。

我想我錯過了一個關鍵的範圍問題與承諾。

Answer 1

唯一的區別是時機。第一個在訪問errors對象之前，在致電requestPermalink之前。最後一個訪問它後。由於箭頭功能，this上下文相同。

---

我假設你requestPermalink功能確實是這樣的：

requestPermalink() { 
    // 
    this.set('errors', { debug: "second error object" }); 
}, 

然後你執行的第一個例子中的順序是：

1. this.errors是{}，因爲這就是你如何初始化它與errors: {},。
2. 您執行let errors = this.get('errors');。所以現在errors變量與this.errors是同一個對象。
3. 您致電this.requestPermalink。這將執行我上面發佈的this.set('errors', { debug: "second error object" });。現在this.errors是定義了debug: "second error object"的新對象，而errors變量仍然指向原始對象{}。
4. 接下來執行Ember.set(errors, 'permalink', "Test");。這會將errors變量從{}更改爲{permalink: "Test"}。但this.errors仍然是{ debug: "second error object" }。

執行然而，對於第二個例子中的順序：

1. this.errors是{}因爲多數民衆贊成你如何與errors: {},初始化它。
2. 您致電this.requestPermalink。這將執行我上面發佈的this.set('errors', { debug: "second error object" });。 現在this.errors是定義了debug: "second error object"的新對象。但是目前還沒有errors變量，所以原始對象{}可能會被垃圾收集。
3. 您執行let errors = this.get('errors');。現在errors與this.errors相同，看起來像{ debug: "second error object" }。
4. 您修改errors與Ember.set(errors, 'permalink', "Test");。由於errors和this.errors都是對同一個對象的引用，因此將修改this.errors。