babel 編譯後 this 變成了 undefined

最近有在用webpack，使用了babel這個模塊來編譯js jsx文件，可是發現文件編譯後this變成了undefined。
源文件

module.exports = React.createClass({
  render: () => {
    return (<div>{this.props.name}</div>);
  }
});

編譯後

module.exports = React.createClass({
  render: () => {
    return (<div>{undefined.props.name}</div>);
  }
});

這個緣由是由於webpack規則中babel用了es2015的編譯規則

{
   test: /\.jsx?$/,
   loader: "babel",
   query: {
      presets: ['react', 'es2015']
   }
}

解決的方法是這樣修改

module.exports = React.createClass({
  render: function(){
    return (<div>{this.props.name}</div>);
  }
});

其根本的緣由是es2015的箭頭函數，這個一個不能忽視的問題

普通function函數和箭頭函數的行爲有一個微妙的區別，箭頭函數沒有它本身的this值，箭頭函數內的this值繼承自外圍做用域。

經過一個例子來了解一下

var a = 123;
var obj1={
  a:'a1',
  log:()=>console.log(this.a)  
}
var obj2={
  a:'a1',
  log:function(){console.log(this.a)}  
}
obj1.log();//123
obj2.log();//a1

轉回到正題上，這是由於這個特性，因此babel在編譯過程當中就會對this進行了判斷，就直接指向了undefined。
在使用es2015的語法上，像箭頭函數這樣的，仍是要謹慎一些，不要由於用得爽就氾濫用。