JavaScript学习笔记——函数 Part1：函数的创建原理（函数声明、函数表达式、函数在何时被创建）

在JavaScript中，很多组织代码的技巧都要求精通并熟练地使用函数。学习JavaScript的分水岭就是能否熟知函数

要点

• 函数声明创建的函数是在执行其他代码前定义的；
  函数表达式是在运行阶段与其他代码一起执行的，因此在函数表达式所在的语句执行前，它创建的函数是未定义的。

1. 定义函数的方式有两种：使用函数声明和使用函数表达式。
   （函数引用是一个指向函数的值。）
2. 函数声明在执行代码前处理
   函数表达式在运行阶段随其他代码一起执行。
3. 处理函数声明时，浏览器创建一个函数以及一个与函数同名的变量，并将指向函数的引用存储到变量中。
   处理函数表达式时，浏览器创建一个函数，但你必须显式地处理指向这个函数的引用。

创建函数的两种方法

1.函数声明

function quack(num){//这是函数声明语句
...}

quack(3);//调用函数

• 标准的函数声明（由function关键字、函数名、形参、代码块组成）
• 创建了一个函数，名称为quack
• 指向该函数的函数引用存储在名为quack的同名变量中，该变量由浏览器创建

2.函数表达式

然而，关键字function还有另一种用法，看起来不那么标准

var fly=function(num){...};//这是赋值语句，把函数表达式赋给变量fly

fly(3);//调用函数

• 直接使用关键字function创建一个函数表达式，这个函数没有名称
• 函数表达式的结果是一个值：是函数引用，即指向函数的引用（理解为指针）
• 函数引用在这里被赋给一个变量fly，即：fly的值是一个函数引用
• 函数引用可以用来调用函数；也可以将它们存储在对象中、传递给函数；还可以从函数返回它们（如同对象引用一样）

函数声明与函数表达式的区别

创建函数的两种方式：使用函数声明和使用函数表达式

• 它们的差别主要在于声明函数的阶段；
• 调用函数时，浏览器处理它们的方式完全相同

区别一 函数的命名

首先区分声明与表达式：
声明是一条完整的语句；
表达式只是语句的一部分，任何结果为一个值的东西都称为表达式

• 使用函数声明时，为函数指定名称，并且将创建一个与函数同名的变量，并让它指向函数；
• 而使用函数表达式时，通常不给函数指定名称，因此你要么在代码中将函数赋给一个变量，要么以其他方式使用函数表达式。（后面将讨论这些使用函数表达式的方式）

ps. 可认为函数声明包含了隐藏的赋值语句，自动将函数引用赋给与函数名同名的变量；
而函数表达式不是完整语句，只会返回一个函数引用，显式地将其赋给变量，语句才完整

区别二 函数在何时被定义

• 函数声明在执行代码前处理
  在执行任何代码前，浏览器先在代码中首先查找所有的函数声明。每当找到一个函数声明，浏览器创建一个函数 以及 一个与函数同名的变量，还将函数引用存储到该变量中

• 函数表达式在运行阶段(随其他代码一起)被处理
  执行代码时，如果遇到函数表达式，浏览器创建一个函数，只是单纯地返回其函数引用，你必须显式地处理这个函数引用（例如将函数引用赋给一个变量）

处理函数表达式时，浏览器创建一个函数，只是单纯地返回其函数引用，你必须显式地处理这个函数引用（例如将函数引用赋给一个变量）

相同点 调用函数时，浏览器的处理方式

无论使用函数声明还是函数表达式创建的函数，在调用函数时，浏览器处理它们的方式完全相同

调用函数的方法

在函数引用后面加上()即可调用函数
ps. 这也是区分函数和变量的技巧：有()就是函数，没有就是变量

务必将[创建函数]放在[调用函数]之前

先区分函数的创建和定义：

• 创建函数：用代码描述一个函数，有函数声明和函数表达式两种方法
• 定义函数：浏览器发现函数声明和函数表达式后，定义函数，经过定义后，浏览器才知道函数的功能、才知道如何使用函数

---

前面提到，浏览器分两遍来处理JavaScript代码：
第一遍，浏览器分析所有的函数声明，并定义由函数声明创建的函数；
第二遍，浏览器按编写的顺序执行代码，并定义由函数表达式创建的函数。

可见：
在代码的任何地方，由函数声明创建的函数都是已经定义的，这被称为提升(hoisting)；
而由函数表达式创建的函数，必须等待浏览器执行到函数表达式那一行，这个函数才被定义，才能在后面调用这个函数

---

因此：
（1）由函数声明创建的函数，可以在代码的任何地方创建；
（2）由函数表达式创建的函数，必须在使用前创建，否则无法正常使用

无论用哪种方式创建函数，只要养成习惯，统一在使用前创建函数，就不会出错（i.e. 保持和其他编程语言一致，将创建函数的部分，即描述函数内容的部分，放在调用这个函数之前）