普通函数和箭头函数区别

普通函数

 let fun1 = function () {
   console.log('普通函数');
 }

箭头函数

let fun2 = () => {
  console.log('箭头函数');
}

区别:
1、this指向不同
2、箭头函数无法作为构造函数，不能使用new
3、箭头函数不绑定arguments，用三点运算符解决
4、箭头函数没有原型
5、箭头函数不存在变量提升

一、this指向不同

   let obj = {
      name: 'laosan',
      fun1: function() {
        console.log(this.name) 
      },
      fun2: ()=>{
        console.log(this.name) 
      }
    }
    obj.fun1() // laosan
    obj.fun2() // window

二、箭头函数无法作为构造函数，不能使用new

let fun2 = () => {
  console.log('箭头函数');
}
let newFun = new fun2() // Identifier 'fun2' has already been declared

三、箭头函数不绑定arguments，用三点运算符解决

let fun1 = function (a) {
  console.log(arguments);
}
let fun2 = (a) => {
  console.log(arguments);
}
let fun3 = (...a) => {
  console.log(a);
}
fun1(1,2,3) // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
fun2(1,2,3) // arguments is not defined
fun3(1,2,3) // [1, 2, 3]

四、箭头函数没有原型

let fun1 = function () {
  console.log('普通函数');
}
let fun2 = () => {
  console.log('箭头函数');
}
console.log(fun1.prototype) // {constructor: ƒ}
console.log(fun2.prototype) // undefined

五、箭头函数不存在变量提升

fun1(); // laosan
function fun1(){
    console.log('laosan');
}

fun2(); // Uncaught TypeError: fun2 is not a function
var fun2 = () => {
  console.log('laosan');
};

console.log(f1); //function f1() {}   
console.log(f2); //undefined  
function f1() {}
var f2 = function() {}