ES6---箭头函数=>{}与function定义函数区别

照例还是先说说写这篇记录的原因以及背景：

最近在开发过程中，新项目前端是用VUE来做，也升级了js版本，基于原先的编码习惯，写方法基本都是function不自觉就出来了，也没觉得有什么问题，当然本身这样写是没有问题的，以前传统的方法间调用，也是没啥问题，但是引入vue之后方法基本都是集中管理定义，引用是this.XXX()这样，于是问题就出现了，在某些回调函数体中this代表的意义变了，大概代码如下：

this.chart.on('click', { dataType: 'node' }, function(params){
          this.$parent.appName= params.name;
          this.$parent.appChange();
        })

 上面这段代码是给echarts图表绑定一个单击事件，this指向的是图表本身，这时候是没法拿到vue实体的，研究查阅许久，才发现在function函数和=>{}中，this的含义是不同的，使用function定义的函数，this的指向随着调用环境的变化而变化的，而箭头函数中的this指向是固定不变的，一直指向的是定义函数的环境。于是调整代码如下：

this.chart.on('click', { dataType: 'node' }, (params)=> {
          this.$parent.appName= params.name;
          this.$parent.appChange();
        })

在解决问题的过程正也更详细的了解了两种函数写法的其他区别，大概归纳如下：

1、箭头函数与function定义函数的写法不同，参见上面两端代码：

2.this的指向，上面有详细描述：

3.构造函数：（function是可以定义构造函数的，而箭头函数是不行的）

4.变量提升：（function定义的函数不论位置先后，调用皆无碍，箭头函数定义一定要在调用前才行，否则是找不到的）