Ember 对象的 Javascript 范围

Question

I am not sure of the difference between the following:

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

The first one does not actually alter the errors property. The error never shows up on the template. Whereas the second will and the resulting error shows up on my template.

I assume I am missing a key scoping issue with the promise.

Answer 1

The only difference is the timing. The first one is accessing the errors object earlier, before calling requestPermalink . The last one access it after. The this context is the same because of the arrow function.

---

I assume your requestPermalink function does something like this:

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

Then your order of execution for the first example is:

1. this.errors is {} because thats how you initialized it with errors: {}, .
2. you execute let errors = this.get('errors'); . So now the errors variable is the same object as this.errors .
3. You call this.requestPermalink . This will execute the this.set('errors', { debug: "second error object" }); I've posted above. Now this.errors is that new object with debug: "second error object" defined, while the errors variable is still pointing to the original object {} .
4. Next you execute Ember.set(errors, 'permalink', "Test"); . This will change the errors variable from {} to {permalink: "Test"} . However this.errors is still { debug: "second error object" } .

The order of execution for the second example however:

1. this.errors is {} because thats how you initialized it with errors: {}, .
2. You call this.requestPermalink . This will execute the this.set('errors', { debug: "second error object" }); I've posted above. Now this.errors is that new object with debug: "second error object" defined. However there is no errors variable yet, so probably the original object {} can be garbage collected.
3. You execute let errors = this.get('errors'); . Now errors is the same as object as this.errors and looks like { debug: "second error object" } .
4. You modify errors with Ember.set(errors, 'permalink', "Test"); . Because errors and this.errors are both references to the same object this will modify this.errors .