javaScript---箭头函数和普通函数的区别

1、定义区别：箭头函数语法比普通函数更加简洁

普通函数使用关键字function定义。

箭头函数：如果没有参数，直接写一个()；如果一个参数，可以省略()；如果多个参数，逗号分割。如果函数体中只有return返回语句或者只有一句代码，return和{}可以省略。

//普通函数
const fn=function(){
    console.log(this)//Window
}

//箭头函数
const fn1 = () => console.log(1);
fn1(); //1 
const fn2 = a => console.log(a);
fn2(2) //2
const fn3 = (a, b, c) => a+b+c;
var sum = fn3(1, 2, 3)
console.log(sum);//6

2、this指向区别

箭头函数没有自己的this，箭头函数内部 this 始终指向创建时所在作用域指向的对象。call，apply，bind方法改变不了箭头函数的指向。

普通函数：直接调用时指向全局对象；方法调用时指向调用该方法的对象；new 调用时指向创建的对象实例；call、apply、bind 调用时，指向三种方法的第一个参数。

const fn=function(){
    console.log(this)//Window
}
fn() //等价于Window.fn()

let obj1 = {
    name: "Tom",
    sayHi:function() {
        console.log(this);//打印{ name: 'Tom', sayHi: [Function: sayHi] }
    }
}
obj1.sayHi()//this指向obj1对象

// //构造函数
function Person(name,age) {
    this.name = name
    this.age = age
    console.log(this);//打印 Person {name: 'Jerry', age: 12}
}
let p1=new Person("Jerry",12)

//箭头函数没有自己的this，它的this来自上级作用域,call，apply，bind方法改变不了箭头函数的指向
let obj2 = {
    name: "Tom",
    sayHi:()=> {
        console.log(this);//Window
    }
}
obj2.sayHi()//this指向Window对象

javaSccript---call()、 bind()、 apply()的区别_javascropt call-优快云博客

3、参数区别

箭头函数不绑定 arguments 对象，可以使用es6的...rest参数代替arguments对象，来访问箭头函数的参数列表。如果在普通函数中嵌套箭头函数，并在箭头函数中访问arguments，实际上获得的是父作用域（函数）的arguments对象

const fn = (val) => { 
    console.log(val);//1
    console.log(arguments); //Uncaught ReferenceError: arguments is not defined
}
fn(1, 2)
const fn1 = (...rest) => { 
    console.log(rest);//[1,2]
}
fn1(1,2)
const fn2= function(val){ 
    console.log(val);//1
    console.log(arguments); //Uncaught ReferenceError: arguments is not defined
}
fn2(1, 2)

const fn3= function(val){ 
    let fn = () => { 
        console.log(val);//1
        console.log(arguments);//Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]
    }
    fn()
}
fn3(1,2)

4、构造器

箭头函数不能用作构造器，和 new一起用会抛出错误。

为什么箭头函数不能用作构造器，和 new一起用会抛出错误。

因为new的过程：1.开辟内存空间；2.this指向内存空间；3.执行构造函数；4.返回this实例。但是箭头函数没有自己的this，它的this其实是继承了父作用域中的this，所以箭头函数不能作为构造函数使用。

const fn1 = function () { }
let f1 = new fn1()

const fn2 = () => { }
let f2=new fn2() // Uncaught TypeError: fn2 is not a constructor

5、原型

箭头函数没有原型，原型是undefined

const fn1 = function () { }
console.log(fn1.prototype);
const fn2 = () => { }
console.log(fn2.prototype);//undefined

6、箭头函数不能使用yield命令，因此箭头函数不能用作 Generator 函数。