Ember 对象的 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 属性。该错误永远不会显示在模板上。而第二个将和产生的错误显示在我的模板上。

我认为我错过了 promise 的一个关键范围问题。

Answer 1

唯一的区别是时间。第一个是在调用 requestPermalink 之前先访问 errors 对象。最后一个访问它之后。由于箭头函数的原因，this 上下文是相同的。

<小时/>

我假设您的 requestPermalink 函数执行以下操作:

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

那么第一个示例的执行顺序是:

1. this.errors 是 {}，因为这就是您使用 errors: {}, 初始化它的方式。
2. 您执行let error = 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:“第二个错误对象” 的新对象。不过，还没有 errors 变量，因此原始对象 {} 可能会被垃圾回收。
3. 您执行let error = this.get('errors');。现在 errors 与 this.errors 的对象相同，看起来像 { debug: "second error object"}。
4. 您可以使用 Ember.set(errors, 'permalink', "Test"); 修改 errors。由于 errors 和 this.errors 都是对同一对象的引用，因此将修改 this.errors。