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

  • 相关阅读:
    CSS 定位position
    new Date(time).getTime()在ios返回NaN
    babel.js 文件 browser.min.js
    export 和 export default 的区别
    第一个webpack例子demo1
    Kafka源码解析与实战
    Redis实战
    RabbitMQ实战
    Spring源码理解
    Java并发编程实践
  • 原文地址:https://www.cnblogs.com/subying/p/5665347.html
Copyright © 2011-2022 走看看