babel 将 "this" 导出为未定义 ember computed 属性

Question

使用 ember-cli@0.2.7 和 emberjs@1.13.2。

源emberjs模型

export default DS.Model.extend({
    name: DS.attr('string'),

    displayName : Ember.computed('name', () => {
      return this.get('name');
    })
});

翻译模型

'use strict';

var _this = undefined;

exports['default'] = DS['default'].Model.extend({
    name: DS['default'].attr('string'),

    displayName: Ember.computed('name', function () {
        return _this.get('name'); //at this point _this is undefined
    })
});

问题是 _this 从未设置模型。为什么会这样？

Answer 1

Babel 将其导出为未定义的，因为您使用粗箭头函数保留的上下文未定义。

你现在拥有的和下面的没有区别：

let options = {
    name: DS.attr('string'),

    displayName : Ember.computed('name', () => {
      return this.get('name');
    })
};
console.log(this); // undefined
export default DS.Model.extend(options);

本例中的上下文未定义。您正在将选项传递给 DS.Model 该对象尚不存在。

export default DS.Model.extend({
    name: DS.attr('string'),

    displayName : Ember.computed('name', function() {
      return this.get('name');
    })
});

顺便说一句，既然你使用的是 ember，那么让我们利用 ES6 解构来使代码看起来像 'nicer'：

import Ember from 'ember';
import DS from 'ember-data';

const { computed } = Ember;
const { attr, Model } = DS;

export default Model.extend({
    name: attr('string'),

    displayName : computed('name', function() {
      return this.get('name');
    })
});

babel 将 "this" 导出为未定义 ember computed 属性

babel is exporting "this" as undefined in ember computed property

ember.js

ember-cli

babeljs