箭头函数与普通函数区别

一.this指向不同

普通函数（谁调用它this就指向谁），箭头函数（指向父级作用域的上下文）

    //普通函数
    {//方法是谁调用的,那么在方法中this就指向谁(.前面是谁, this就是谁)
        let obj = {
            name: "obj",
            fn: function () {
                console.log(this);//obj
            }
        };
        obj.fn();
    }

    //箭头函数
    {//箭头函数的this指向父级的上下文
        let obj = {
            name: "obj",
            fn: function () {
                console.log(this);//obj
                let fn2 = ()=>{//闭包
                    console.log("箭头函数 fn2 中的this指向=========>",this);//obj
                }
                fn2()
            }
        };
        obj.fn();
    //箭头函数的this指向来自父级上下文, 箭头函数没有自己的this
    //箭头函数的this不会在调用的时候被改变, 在箭头函数声明的时候他的this就已经被永久的确定
    }

二.箭头函数都是匿名函数

普通函数可以是具名函数，也可以是匿名函数，但是箭头函数都是匿名函数

// 具名函数
function func(){
  // code
}
 
// 匿名函数
let func=function(){
  // code
}

// 箭头函数全都是匿名函数
let func=()=>{
  // code
}

三.箭头函数不能用于构造函数

普通函数可以用于构造函数，但是箭头函数都是匿名的，所以不能用于构造函数

//普通函数的构造函数
function Person(name,age){
   this.name=name;
   this.age=age;
}
let admin=new Person("郭小侠",19);
console.log(admin.name); //郭小侠
console.log(admin.age); //19

四.箭头函数不能用arguments获取参数，用展开运算符来解决

没一个普通函数调用后都具有一个arguments对象，用来存储十级船抵达的参数。但是箭头函数并没有这个对象。

function A(a){
  console.log(arguments);
}
A(1,2,3,4,5,8);  //  [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ]


let B = (b)=>{
  console.log(arguments);
}
B(2,92,32,32);   // Uncaught ReferenceError: arguments is not defined


let C = (...c) => {
  console.log(c);
}
C(3,82,32,11323);  // [3, 82, 32, 11323]

总结：

1. 箭头函数中的this指向父级的上下文，普通函数中的this指向调用它的元素
2. 箭头函数都是匿名函数，所以不能使用new，不能用来作为构造函数
3. 箭头函数中获取参数不能使用arguments，而要使用展开运算符来获取参数