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

箭头函数的定义

箭头函数是匿名函数，不能作为构造函数，它使表达更加简洁，简化了回调函数

箭头函数最重要的：this指向问题

• 箭头函数的this指向的是父级作用域中的this，是通过查找作用域链来确定this的值，指向的是定义它的对象，而不是使用时所在的对象。

//普通函数中，this总是指向调用它的对象，如果用作构造函数，this指向创建的对象实例
let obj1 = {
    a:function(){
        console.log(this)
    }
    b:()=>{
        console.log(this)
    }
}
obj.a()//this指向obj
obj.b()//this指向window

let obj2  = {
    fun:function(){
        return ()=>{
            console.log(this)
        }
    }
}
//箭头函数的this指向定义的时候、外层第一个普通函数的this
//这里箭头函数指向的是 fun函数，fun函数指向的是obj2，所以这里this会指向obj2
obj2.fun()() //this指向obj2

• 箭头函数中的this只在箭头函数定义时就决定的，而且不能修改(call(),apply(),bind())

let obj1 = {
    a:function(){
        console.log(this)
    }
    b:()=>{
        console.log(this)
    }
}
obj.a()//this指向obj
obj.b()//this指向window
obj.b().call(obj) //this还是会指向window，指向不能被修改

箭头函数不能当做构造函数（不能被new）

不能被当做构造函数使用，通过new命令来作为构造函数会报错，不存在prototypepe属性。

let fun = ()=>{
    return 123
}
console.log(new fun()) //会报错
console.log(run.prototype)//undefined

箭头函数没有arguments对象

每个普通函数调用后都具有一个arguments对象，用来存储实际传递的参数。但是箭头函数没有此对象

function f1(arr) {
     console.log(arguments);
}
f1([1,2,3]); // [1,2,3]
let f2 = (arr) => {
   console.log(arguments);
}
f2([1,3,9]); //Uncaught ReferenceError: arguments is not defined

总结：

• 1.箭头函数this指向外层第一个普通函数this的指向，且不能修改指向，如call（），bind（），apply（）。
• 2.普通函数的this指向调用它的那个对象，谁调用指向谁。