babel 编译后 this 变成了 undefined

我就是我 2022-01-14 06:01 244阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

最近有在用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值继承自外围作用域。

通过一个例子来了解一下

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

转载于:https://my.oschina.net/tearlight/blog/688449

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220114/ba0979b6d667481cb19443f987dbb9c4.png

还没有评论，来说两句吧...