Vue.jsメソッド内でスコープを失う

Question

私は、作成時にデータを要求するコンポーネントを持っています。しかし、データが返されたときには、これに直接アクセスすることはできません。

// Service 
class DataService { 
    getDataFromService() { 
    var p = new Promise(function(resolve, reject) { 
     resolve({ message: 'hello world' }); 
    }); 
    return p; 
    } 
} 
var dataService = new DataService(); 

// Component 
Vue.component('review', { 
    created: function() { 
    this.fetchData(); 
    }, 
    methods: { 
    fetchData: function() { 
     var that = this; 
     var hello = 'world'; 

     // normal function 
     dataService.getDataFromService().then(function(data) { 
     this.foo = data.message; // 'this' is undefined 
     that.bar = data.message; // 'that' is undefined 
     console.log(hello);  // 'hello' is undefined 
     }); 

     // fat arrow 
     dataService.getDataFromService().then((data) => { 
     this.foo = data.message; // 'this' is undefined 
     that.bar = data.message; // 'that' is undefined 
     console.log(hello);  // 'hello' is undefined 
     }); 
    }, 
    }, 
}); 

上記の例では、 'this'と 'that'の両方は定義されていません。理由はわかりません。私はコードをコンパイルするためにブラウザ&を使用しています。

何も変更していない約束の代わりにコールバックを使用するようにサービスを変更しようとしました。私はまた、太い矢印の代わりに通常の "関数（データ）"を使用しようとしました。

更新： 例はJSFiddleで機能します。私はこれがbabel/browserify/modulesと関係があることを意味していると推測しています。矢印の機能を使用して

Answer 1

webpackは問題の発生を止めました。

Answer 2

は、これを使用するために、あなたが自己を使用する必要があり、コールバック関数=これで、ブロックスコープを排除しますが、矢印の機能は、このスクリプトを実行するとご覧にいただきましつもりはない：私はへの切り替え終わっ

   var cb= function(f){ 
        f(); 
       } 


       var fetchData = function() { 
        var that = this; 
        this.data ='data'; 

        cb(() => { 
         console.log('---') 
         console.log(data); 
         console.log(that); 
        }); 
       }