babel 正在将“this”导出为 ember 计算属性中的未定义答案

【问题标题】：babel is exporting "this" as undefined in ember computed propertybabel 正在将“this”导出为 ember 计算属性中的未定义
【发布时间】：2015-09-25 19:16:40
【问题描述】：

使用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 从来没有设置模型。为什么会这样？

【问题讨论】：

标签： ember.js ember-cli babeljs

【解决方案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 解构来使代码看起来“更好”：

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

【讨论】：

所以对我来说，你只能在函数内部使用新的箭头结构。我会认为“this”在这两种情况下都是指父对象。
() => {} === function() {}.bind(this) 在你的情况下this === undefined，还没有父对象，你正在将一个选项对象传递给DS.Model@ 987654330@ 实例尚未创建。
只有在想要保留上下文或上下文无关紧要（审美原因）时才使用粗箭头
最新版本的 ember-data 允许您只导入所需的类，如下所示：import attr from 'ember-data/attr'; 和 import Model from 'ember-data/model';。您可以查看最新的 ember-cli 蓝图以获取更多示例。