zoukankan      html  css  js  c++  java
  • 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的语法上,像箭头函数这样的,还是要谨慎一些,不要因为用得爽就泛滥用。

  • 相关阅读:
    jQuery插件开发——全屏切换插件
    原生JS实现全屏切换以及导航栏滑动隐藏及显示——修改
    CSS 3学习——animation动画
    CSS 3学习——transition 过渡
    CSS 3 学习——transform 3D转换渲染
    CSS 3学习——transform 2D转换
    消息过滤
    jms消息组成
    vim常用命令整理
    知识碎片
  • 原文地址:https://www.cnblogs.com/subying/p/5665347.html
Copyright © 2011-2022 走看看