菜鸟看前端（箭头函数与普通函数区别）

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

let fun = ()=>{
console.log('我是箭头函数')
}


let f = new fun() // 报错
// Uncaught TypeError: fun is not a constructor

  箭头函数只有一个表达式时可以把{}return省略掉

let fun = ()=>'你好'
let f = fun()
console.log(f)

二、箭头函数不绑定arguments，取而代之需要用展开运算符解决…解决

  let sum = (...arguments)=>{
            console.log(arguments) // 1,2,3,4
        }
        sum(1,2,3,4)

普通函数的arguments

function fun(){
        // 伪数组 不能使用数组方法
        console.log(arguments)
        // 伪数组转换为数组
        let arr = [...arguments]
        console.log(arr)

        let arr = [6,7,8]
        // 伪数组使用数组方式
        // apply 改变指向
        Array.prototype.push.apply(arguments,arr)
        console.log(arguments)

    }
    fun(1,2,3,4,5)

三， 箭头函数的this，始终指向父级上下文（箭头函数的this取决于定义位置父级的上下文，跟使用位置没关系，普通函数this指向调用的那个对象）

    var a = 200
    let obj = {
        a: 300,

        fn: function () {
           console.log(this.a) //  谁调用指向谁
        },
        f: () => {
        console.log(this.a)  // 200
        }
    }
    obj.fn() // 300
    obj.f() //200

四，箭头函数不能通过call() 、 apply() 、bind()方法直接修改它的this指向。(call、aaply、bind会默认忽略第一个参数，但是可以正常传参)

 let obj2 = {
        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(obj2.b(1))  // 11
    console.log(obj2.c(1)) //11

五，箭头函数没有原型属性

 var a = ()=>{
return 11
}
function b (){
return 12
}

console.log(a.prototype); // undefined
console.log(b.prototype); // constructor