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プロパティを変更しません。テンプレートにエラーが表示されることはありません。一方、2番目の意思とその結果のエラーがテンプレートに表示されます。

私は約束の重要なスコープの問題がないと思います。

Answer 1

唯一の違いはタイミングです。最初にrequestPermalinkを呼び出す前に、先にerrorsオブジェクトにアクセスしています。最後のものがそれにアクセスします。 thisのコンテキストは、矢印機能のために同じです。

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

そして、最初の例の実行のご注文は、次のとおりです：私はあなたのrequestPermalink機能はこのような何かをすると仮定し

---

あなたがそれを初期化する方法をthatsのため

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");を実行します。これにより、変数が{}から{permalink: "Test"}に変更されます。しかしthis.errorsはまだ{ debug: "second error object" }です。

しかし第二の例の実行の順序：

1. this.errorsが{}あるので、あなたはerrors: {},でそれを初期化する方法のthats。
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が変更されます。