babel 编译后 this 变成了 undefined

最近有在用webpack，使用了babel这个模块来编译js jsx文件，但是发现文件编译后this变成了undefined。源文件module.exports = React.createClass

最近有在用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();//123obj2.log();//a1

转回到正题上，这是因为这个特性，所以babel在编译过程中就会对this进行了判断，就直接指向了undefined。在使用es2015的语法上，像箭头函数这样的，还是要谨慎一些，不要因为用得爽就泛滥用。