普通函数vs箭头函数vs匿名函数

前言

最近在复习前端知识点的时候，发现js有很多概念都模糊不清，比如说普通函数，箭头函数，匿名函数等各种问题，所以今天整理如下。

普通函数

JS中我们广泛使用的就是各种函数，通常普通函数有3种声明方式：直接声明，函数表达式声明，构造函数声明。

直接声明

这是最常见的一种声明方式。

    // 1.直接声明
    function f() {
        console.log("这是直接声明的")
    }
    //函数调用
    f();

函数表达式声明

    //2.函数表达式
    var temp = function () {
        console.log("这是函数表达式声明")
    }
    // 函数调用
    temp();

构造函数声明

    //3.构造函数调用
    var  variable = new Function('name','alert("hello,"+name)');     
     //最末尾的是函数体，其前面的都是参数
    //函数调用
    variable('world');

匿名函数

匿名函数顾名思义其实就是没有名字的函数。匿名函数的声明也有两种方式

直接声明

    window.onload = function () {
        console.log("匿名函数直接声明")
    }

通过匿名函数表达式

    //匿名函数，表达式声明
    var name = function () {
        console.log("这种声明和普通函数的声明一样")
    }

匿名函数vs普通函数

用匿名函数表达式时，函数的调用语句，必须放在函数声明语句之后

箭头函数

箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或 new.target。这些函数表达式更适用于那些本来需要匿名函数的地方，并且它们不能用作构造函数。（摘抄在MDN）

多个参数的箭头函数

(参数1, 参数2, …, 参数N) => { 函数声明 }

等同于

(参数1, 参数2, …, 参数N) =>{ return 表达式; }

一个参数的箭头函数(括号可省略)

(单一参数) => {函数声明}
单一参数 => {函数声明}

没有参数的箭头函数（要有括号）

() => {函数声明}

不绑定this

通过 call() 或 apply() 方法调用一个函数时，只能传递参数

不绑定arguments

不能使用new操作符

箭头函数不能用作构造器，所以不能使用new操作符

没有prototype属性

yield 关键字

yield 关键字通常不能在箭头函数中使用（除非是嵌套在允许使用的函数内）。因此，箭头函数不能用作生成器。

习题练习

这种声明方法，就是用函数表达式来声明，本质上还是 var f =function(); 不过给了这个匿名函数一个名字一样，但其实g就类似于f.name 变成了f的一个属性 没有什么作用，所以g()的时候，就想要去查g()这个函数，但是并没有g()函数（只有声明的时候一个匿名函数） 所以会报error ，而g的时候，是没有找到定义过的这个变量 所以undefined。

定义的这个属性name 只能在匿名函数内部进行访问，和g，g()没有关系