JavaScript 箭头函数与function函数区别

 结合以下注释理解代码,有空再分步骤讲解 

// 执行正常 function 方法名() 会直接将函数提升到顶部所以此步成功
normalFun(2);
// 执行失败 因var会将arrowFun变量提升但赋值仍在原本行无法在赋值前调用
// arrowfun();
// 箭头函数
var arrowFun = ()=>{console.log(this)}
// 正常函数
function normalFun(a){this.a = a; console.log(this)}
// 定义对象cat有两个属性分别保存箭头函数和正常函数所定义的函数
var cat = {
    arrowfun: arrowFun,
    normalfun: normalFun
}
// 箭头函数所使用的this不会因调用域不同发生改变(会指向创建时作用域的this)
arrowFun(); // this =  window
cat.arrowfun()  // this = window
// 正常函数所使用this会跟随调用域不同发生改变
normalFun(1); // this = window
cat.normalfun(1); // this = cat
// 执行正常且this指针将指向自身
// ❌使用new以后会变成一个对象无法以函数方式调用,newNormal()
var newNormal = new normalFun(1);
console.log(newNormal.a);
// 下行代码报错:Uncaught ReferenceError: arrowfun is not defined
// 因箭头函数无法使用new方法调用因箭头函数无构造方法
// var newArrow = new arrowfun(); 
// 总结: 
// 1. 定义方式不同 
    // 箭头函数 ()=>{}
    // 正常函数 function name(){}
// 2. this指向不同 
    // 箭头函数所使用的this不会因调用域不同发生改变(会指向创建时作用域的this)
    // 正常函数所使用this会跟随调用域不同发生改变
// 3. 构造函数不同
    // 箭头函数无构造函数无法使用new方式
    // 正常函数有构造函数可以使用new方式但new后不再是函数而是对象
// 4. 变量提升不同
    // 箭头函数因会使用var来保存,所以会先将var变量名提升但赋值不会提升,所以无法在赋值前调用
    // 正常函数会直接提升到最顶部,所以可以在声明前调用