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的语法上，像箭头函数这样的，仍是要谨慎一些，不要由于用得爽就泛滥用。