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

巴特西

babel 编译后 this 变成了 undefined

最新文章

热门文章