js中箭头函数和普通函数的区别

1、前言

首先看下直观的区别

// 箭头函数 
    let fun = () => {
        console.log('lalalala');
    }
    
    // 普通函数 
    function fun() {
        console.log('lalla');
    }

2、定义

首先我认为箭头函数是匿名函数，不能做为构造函数，不能使用new
而后借鉴阮一峰老师的es6教程里第七章（函数扩展）里面的第五小节箭头函数来看看他的定义

箭头函数有几个使用注意点。

• 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
• 不能够看成构造函数，也就是说，不可使用new命令，不然会抛出一个错误。
• 不可使用arguments对象，该对象在函数体内不存在。若是要用，能够用 rest 参数代替。
• 不可使用yield命令，所以箭头函数不能用做 Generator 函数。

上面四点中，第一点尤为值得注意。this对象的指向是可变的，可是在箭头函数中，它是固定的。

把动态this转换为静态this

• 长期以来，JavaScript 语言的this对象一直是一个使人头痛的问题，在对象方法中使用this，必须很是当心。箭头函数”绑定”this，很大程度上解决了这个困扰。
• 箭头函数可让this指向固定化，这种特性颇有利于封装回调函数。

原理: this指向的固定化，并非由于箭头函数内部有绑定this的机制，实际缘由是箭头函数根本没有本身的this，致使内部的this就是外层代码块的this。正是由于它没有this，因此也就不能用做构造函数。

总结

• 箭头函数的 this 永远指向其上下文的 this ，任何方法都改变不了其指向，如 call() , bind() , apply()
• 普通函数的this指向调用它的那个对象