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