箭头函数与普通函数的区别

箭头函数与普通函数的区别

一、箭头函数是匿名函数，不能作为构造函数，不能使用new

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

二、箭头函数内没有arguments,可以使用扩展运算符...解决

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

let fn1 = (b) => {
    console.log(arguments)
}
fn1(1,2,3,4);//报错

let fn2 = (...c) => {
    console.log(c)
}
fn2(1,2,3,4,5);//(5) [1, 2, 3, 4, 5]

三、箭头函数的this指向父级的上下文，普通函数是谁调用就指向谁

var a=200;

let obj={
    a:100,
    fn:function(){   //es5 谁调用，this指向谁
        console.log(this.a);
    },
    foo:()=>{   //  es6箭头函数的this指向父级(obj)上下文。
        console.log(this.a)
    }
}


obj.fn();// 100;  
obj.foo();//200

四、箭头函数不能通过bind()、call()、apply()直接修改this指向

let obj={
  a:10,
  b:function(n){
    let f = (n)=>n+this.a
    return f(n)
  },
  c:function(n){
    let f = (n)=>n+this.a;
    let m ={
      a:20,
    };
    return f.call(m,n)
  }
}
console.log(obj.b(1));//11
console.log(obj.c(1));//11

五、箭头函数内没有原型属性

var a = () => {
    return 1;
}
function b(){
    return 2;
}

console.log(a.prototype);//undefine
console.log(b.prototype);//{constructor: ƒ}