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