函数创建方式及区别，粗略总结函数原理

JS中函数的创建

版权声明：本文为博主原创文章，未经博主允许不得转载。

---

首先什么是函数

函数其实一个封装一段代码的对象，之所以要封装是为了便于我们以后代码的重用。通俗的说就是一项任务可能被反复的使用，就要定义函数，以便以后反复使用。

函数的创建

函数声明
定义：
使用function关键字声明一个函数，再指定一个函数名，叫函数声明。
表达式：
function 函数名(参数列表){函数体；return 返回值}

function add1(n1,n2){
    var sum=n1+n2;
    return sum;
  };

函数表达式
定义：
使用function关键字声明一个函数，但未给函数命名，最后将匿名函数赋予一个变量，叫函数表达式，这是最常见的函数表达式语法形式。
表达式：
var 函数名=function (参数列表){函数体；return 返回值}

var add2=function(n1,n2){
    var sum=n1+n2;
    return sum;
};

函数构造法
定义：
使用new方法创建一个函数，并传参给函数，声明一个变量接收此函数（参数必须加引号）
表达式：
var 函数名=new function (“参数1”,“参数2”, ……；“函数体；return 返回值”}

var add3=new Function('n1','n2','return n1+n2');
console.log(sum3(2,3));//5

三者的区别
函数声明和函数表达式不同之处在于：

解析器会先读取函数声明，并使其在执行任何代码之前可以访问；

而函数表达式则必须等到解析器执行到它所在的代码行才会真正被解释执行。

从技术角度讲，函数构造法其实是一个函数表达式。一般不推荐用这种方法定义函数，因为这种语法会导致解析两次代码（第一次是解析常规ECMAScript代码，第二次是解析传入构造函数中的字符串），从而影响性能。

//函数声明
fnName();
function fnName(){
    ...
}
//正常，因为‘提升'了函数声明，函数调用可在函数声明之前

//函数表达式
fnName();
var fnName=function(){
    ...
}
//报错，变量fnName还未保存对函数的引用，函数调用必须在函数表达式之后

出现这样的原因，是因为函数声明提前(Function declaration Hoisting)，后面会讲解声明提前是什么
函数的原理
让引擎按照函数的步骤执行任务
存储:
函数名其实就是一个普通的变量
函数本身是一个引用类型的对象(保存多个数据的复杂数据结构)
函数名通过函数的地址值，引用函数对象
强调: 声明时，不会执行函数的内容。
调用:
1. window中声明变量，准备保存函数的返回值
2. 找到函数对象，创建函数执行时的临时存储空间
3. 将调用时传入的参数值，放入临时存储空间的参数变量中
4. 执行函数体，修改临时存储空间中的变量值
5. 将返回值，返回window中，保存到指定变量
6. 函数执行后，临时存储空间释放！导致，函数内局部变量一同释放
所以: 函数中的参数变量和var的变量，只能在函数调用时，内部使用，出了函数，无法使用。

声明提前
在开始执行程序前，引擎会首先查找所有var声明的变量和function声明的函数，将他们集中到当前作用域的顶部优先创建

总结
强烈建议，所有要用到的变量集中声明在当前作用域的顶部

ES6:
尽量用let代替var
强调:
1. let必须在严格模式下使用！
2. let作为局部变量时，必须放在代码段开头
局部变量let之前的变量不可用
3. 用var 函数名=function(){…} 代替function 函数名(){…}
区别: function 函数名(){…} 会被声明提前
var 函数名=function(){…} 不会被声明提前

    揭示了本质: 函数名其实就是一个变量
            函数名通过地址引用着函数对象