箭头函数和普通函数的区别？

1、 箭头函数比普通函数要简洁

//普通函数写法
function fn(x){
    return function(y){
        return x+y
    }
}
//箭头函数写法
let fn=x=>y=>x+y

2、箭头函数的this永远指向其上下文的this，call(), bind(), apply()改变不了其this指向

let obj={
    name:'OBJ'
}
//普通函数
function fn1(){
    console.log(this)
}
fn1.call(obj);//obj

//箭头函数
let obj2=()=>{
    console.log(this)
}
fn2.call(obj);//window

let obj={
    name:'OBJ',
    fn:function(){
        //普通函数是有自己的this的 obj
        let f=()=>{
            //箭头函数是没有自己的this的，指向上下文中的this
            console.log(this);
        };
        f();
    }
};
obj.fn();//{name: "OBJ", fn: ƒ} 指向obj

//真实项目中的一个应用
let obj={
    name:'OBJ',
    fn:function(){
            //=>this:obj
            //期望需求是：1s后OBJ中的NAME改为'珠峰'
setTimeout(()=>{
      console.log(this);//=>OBJ
      this.name='珠峰';
},1000)    
    }
};
obj.fn();

3、箭头函数中没有ARGUMENTS类数组，只能基于 ...ARG(剩余运算符)来获取传递的参数集合（是一个数组）

let fn=(...arg)=>{
   console.log(arguments);//报错  arguments is not defined
   console.log(arg);// [10,20,30]  数组
}
fn(10,20,30)

4、箭头函数不能被new执行（因为：箭头函数没有this 也没有prototype）

function Fn(){
        this.x=100;
}
Fn.prototype.getX=function(){}
let f=new Fn;
//箭头函数
 let Fn=()=>{
    this.x=200;
}
let f=new Fn; //  报错  Fn is not a constructor

5、箭头函数的创建都是函数表达式方式（变量=函数），这种模式下，不存在变量提升，因为我们是用const 或者let 创建的，函数只能在创建完成后被执行（也就是创建的代码之后执行）

const fn=([形参])=>{
     //函数体 return
}
fn([实参])

6、箭头函数的简写

//形参只有一个，小括号可以不加
const  fn=n=>{}；
//函数体中只有一句话，并且还是return xxx的，可以省略大括号和return 等
const fn=n=>n*10

/*
function fn(n){
    return function(m){
          return m+(++n)
    }
}
*/
//将上边的那个方法改成箭头函数
const fn=n=>m=>m+(++n);

7、箭头函数支持给形参设置默认值

let obj={};
let fn=(context=window,...args)=>{
    console.log(context,args)
}
fn(obj,10,20,30); //{} [10,20,30] 
fn();//window  []

注：笔记源于珠峰培训！