javaScript中函数粗探

#

因为在学习JavaScript中，对于其函数的定义掌握的不是很好，所以写下了这篇文章，一是为了时时回顾，二是大家一起沟通交流，学习进步。因为还处于初学者阶段，有些地方表述不够精准，甚至于错误，请多多包涵。那么，不说废话，我们开始吧

---

目录
1、什么是JavaScript函数
2、怎么定义函数
…2、1 直接声明
…2、2 函数定义表达式
…2、3 Function构造函数
3、区别（声明提升）

---

一、什么是JavaScript函数？

JavaScript 函数是被调用时执行的可重复使用的代码块，包裹在花括号中，使用关键词function定义。它的函数名中只能包含字母、数字、下划线或$，且不能以数字开头。

二、怎么定义函数？

JavaScript遵循先声明后使用的原则，共有三种声明方式，分别为

---

1. 直接声明

---

function 函数名(参数列表){函数}

注意：即便函数只有一条语句，仍然需要用花括号包裹起来，否则便会报错，例如

function funTextOne()//报错：输入意外结束（SyntaxError: Unexpected end of input）

function  funTextTwo(){};//不报错

---

2. 函数定义表达式

---

//第一种
var 函数变量名 = function(参数列表){
   函数
}
//第二种
var 函数变量名 = function 函数名(参数列表){
   函数
}

通常而言，以表达式方式定义函数时都不需要函数名（即是第一种声明方式），这会让定义它们的代码更加紧凑。而这种方式被称为匿名函数(anonymous function)，有时也叫拉姆达函数。

注意：函数名只能在函数体内使用。倘若在函数体外使用函数名将会导致错误,例如：

var y = function x() {};
alert(x); // throws an error

而相对的，函数变量名在内外部都可以使用，同时也能都被再分配，如：

var a=function x(){};
var b=a;
alert(b);//---->function x(){}

类比于Java，函数的名称更类似于形参的存在，只能在内部使用，而函数变量名相当于实参，在内外部都可以使用

var test = function funct(){
   return funct == test;
}
console.log(test());//true
console.log(test == funct);//报错：未找到funct（funct is not defined）

---

3. Function构造函数

---

var 函数变量名 = new Function(参数列表, '函数');

其相当于

var 函数变量名 = function(参数列表) {
              函数
 };

注意：尽管可以使用 Function 构造函数创建函数，但最好不要使用它，因为用它定义函数比用传统方式要慢得多。不过，所有函数都应看作 Function 类的实例 。

三、有什么区别？

首先我们先引入一个概念：声明提升（hoisting）
JavaScript引擎在解释代码之前会首先对其进行编译。其会在编译阶段中找到所有的声明，并用合适的作用域将它们关联起来。而这就导致了一个很不符合我们感官的现象出现，如我们写了一段js代码

a=9;
var a;
console.log(a);

如果按照顺序执行，a=9会被认为无意义，而在之后定义a并未赋值，所以最终结果应该会是报错或者undefined。但事实上，最终结果为9。
在该作用域里，引擎在编译的过程发现a的声明，于是自动把a的声明提升到最先，之后编译结束，该代码块变为

var a;
a=9;
console.log(a);

故而输出结果为9
但是，如果将console.log(a);提到最先，例如

console.log(a);
var a=9;

编译时找var a并提到最先，于是代码块变为

var a;
console.log(a);//undefined
a=9;

回到我们的问题中，既然变量存在着这种情况，那么函数是否也存在呢？如果存在，那我们的几种的声明方法会有什么不同呢？
做个小实验

//使用直接声明
funDirect("text");  //true                    
function funDirect(type){return type==="text";}

//使用函数定义表达式
funIndirect("text");//error
var funIndirect = function(type){return type==="text";}

我们可以发现，使用直接声明的，最终能够成功输出结果“true”，而采用函数定义表达式的，最终却报错。那这是为什么呢？
通过之前的例子，我们知道变量可以进行声明提升，经过我们现在的实验，函数依然可以。而之所以直接声明与使用函数定义表达式的差别这么大，是因为在直接声明中，引擎直接将函数提升的作用域的顶端，而在函数表达式中，引擎将其作为一个变量声明对待处理，于是将变量声明提升到最开始，编译结束，之后系统在翻译时一步步进行，而声明的函数要等到表达式赋值完成后才能调用。因此，代码最终变为：

//使用直接声明
function funDirect(type){return type==="text";}
funDirect("text");  //true                    


//使用函数定义表达式
var funIndirect;
funIndirect("text");//error
funIndirect = function(type){return type==="text";}

这里贴一个从别人那看来的一个例子，能够帮助我们加深理解

 1     var sayHello;
 2     console.log(typeof (sayHey));//=>function    
 3     console.log(typeof (sayHo));//=>undefined
 4     if (true) {
 5         function sayHey() {
 6             console.log("sayHey");
 7         }
 8         sayHello = function sayHo() {
 9             console.log("sayHello");
10     }
11     } else {
12         function sayHey() {
13             console.log("sayHey2");
14         }
15         sayHello = function sayHo() {
16             console.log("sayHello2");
17         }
18     }    
19     sayHey();// => sayHey2    
20     sayHello();// => sayHello


分析：sayHey是用函数声明创建的，在JS解析时JS编译器将函数定义进行了函数提升，也就是说，在解析JS代码的时候，JS编译器（条件判断不形成新的作用域，两个sayHey函数定义都被提升到条件判断之外）检测到作用域内有两个同名的sayHey定义，第一个定义先被提升，第二个定义接着被提升（第二个定义在第一个定义之下），第二个定义覆盖了第一个sayHey定义，所以sayHey（）输出sayHey2；而sayHello是用函数表达式创建的，其表达式的内容是在JS运行时（不是解析时）才能确定（这里条件判断就起到作用了），所以sayHello表达式执行了第一个函数定义并赋值，则sayHello（）输出sayHello。

来自 <http://www.cnblogs.com/isaboy/p/javascript_function.html> 

本文参考借鉴了
luotao’s blog————-《JavaScript-The Definitive Guide》读书笔记：函数定义和函数调用（http://www.cnblogs.com/luotaoyeah/p/3823294.html）
小火柴的蓝色理想———深入理解javascript函数系列第一篇——函数概述（http://www.cnblogs.com/xiaohuochai/p/5702813.html）
小火柴的蓝色理想———深入理解javascript函数系列第三篇——声明提升（http://www.cnblogs.com/xiaohuochai/p/5700590.html）
MDN web docs————-函数与function的相关内容（https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects）