大家好，我是IT修真院萌新分院的王寒，一枚正直，纯洁，善良的前端程序员。
今天给大家分享一下函数表达式和函数声明有什么区别？
1.背景介绍
函数就是一段可以反复调用的代码块。函数声明由三部分组成：函数名，函数参数，函数体。 整体的构造是function命令后面是函数名，函数名后面是一对圆括号，里面是传入函数的参数。 函数体放在大括号里面。当函数体没有使用return关键字返回函数时，函数调用时返回默认的undefined； 如果有使用return语句，则返回指定内容。函数最后不用加上冒号。
function keith() {}
console.log(keith()) // 'undefined'
function rascal(){
return 'rascal';
}
console.log(rascal()) // 'rascal'
2.知识剖析
什么是FUNCTION DECLARATION（函数声明）？ Function Declaration 可以定义命名的函数变量，而无需给变量赋值。Function Declaration 是一种独立的结构，不能嵌套在非功能模块中。 就是使用function关键字声明一个函数，再指定一个函数名，叫函数声明
函数声明是在预执行期执行的，也就是说函数声明是在浏览器准备解析并执行脚本代码的时候执行的。所以，当去调用一个函数声明时，可以在其前面调用并且不会报错。
console.log(rascal()) // 'rascal'
function rascal(){
return 'rascal';
}
什么是FUNCTION EXPRESSION（函数表达式）？ Function Expression 将函数定义为表达式语句（通常是变量赋值）的一部分。通过 Function Expression 定义的函数可以是命名的，也可以是匿名的。Function Expression 不能以“function”开头。 使用function关键字声明一个函数，但未给函数命名，最后将匿名函数赋予一个变量，叫函数表达式
简单点来说函数表达式是把一个匿名函数赋给一个全局变量。这个匿名函数又称为函数表达式，因为赋值语句的等号右侧只能放表达式。函数表达式末尾需要加上分号，表示语句结束。
var keith = function() {
//函数体
};
函数表达式存储在变量后，变量也可作为一个函数使用：
var x = function (a, b) {return a * b};
alert= x(4, 3);
以上函数实际上是一个 匿名函数 (函数没有名称)。 函数存储在变量中，不需要函数名称，通常通过变量名来调用。
var x = function (a, b) {return a * b};
var z = x(4, 3);
alert= z;
3.常见问题
一、什么是JavaScript函数？
二、两者具体有哪些区别呢？
4.解决方案
1.JavaScript函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块
函数语法：函数就是包裹在花括号中的代码块，使用了关键词function：
function functionname(){
执行代码
}
当调用该函数时，会执行函数内的代码。
可以在某事件发生时直接调用函数
调用带参数的函数,在调用函数时，可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。 可以发送任意多的参数，由逗号(,)分隔：
myFunction(argument1,argument2)
当声明函数时，把参数作为变量来声明：
function myFunction(var1,var2){
代码
}
点击这个按钮，来调用带参数的函数
functionmyFunction(name,job){
alert("Welcome "+ name +", the "+ job);
}
2.函数声明和函数表达式的区别
1.函数声明中函数名是必须的；函数表达式中则是可选的
//函数声明
function sum(a, b) {
return a + b;
}
alert(sum(1, 2));
//函数表达式
var s = function sum(a, b) {
return a + b;
}
alert(s(1, 2));
var s = function(a, b) {
return a + b;
}
alert(s(1, 2));//以上两种都可以
2.用函数声明定义的函数,函数可以在函数声明之前调用,而用函数表达式定义的函数只能在声明之后调用。
//函数声明
alert(sum(1, 2));//3
function sum(a, b) {
return a + b;
}
//函数表达式：发生错误
try {
alert(s(1, 2));
var s = function sum(a, b) {
return a + b;
}
}
catch (e) {
alert("wrong!");
}
3.以函数声明的方法定义的函数并不是真正的声明,它们仅仅可以出现在全局中,或者嵌套在其他的函数中, 但是它们不能出现在循环,条件或者try/catch/finally中,而 函数表达式可以在任何地方声明.
//函数声明式
function greeting(){
console.log("hello world");
}
//函数表达式
var greeting = function(){
console.log("hello world");
}
5.扩展思考
使用function关键字声明一个函数，再指定一个函数名，叫函数声明。
function fn(){……}
使用function关键字声明一个函数，但未给函数命名，最后将匿名函数赋予一个变量，叫函数表达式。
var fn=function(){……}
使用function关键字声明一个函数，但未给函数命名,这个又称之为什么呢？是属于以上两种类型的哪一种？
function(){……}
6.参考文献
函数声明与函数表达式以及立即执行函数的讨论
7.更多讨论
问题一：关于立即执行函数的讨论
回答：也就是说只有函数表达式才能实现立即执行，匿名函数也是函数表达式为何不能立即执行呢?
因为匿名函数开始的function会被JavaScript引擎识别为函数声明的开始，所以加上括号也不会被执行
而加上()，！，+，-等符号为什么就可以了呢?
因为加上这些符号就可以告诉js引擎这不是函数声明了。
问题二：给匿名函数用小括号包起来，为什么能执行？
//匿名函数：
function(){ //如果不加小括号则会报错！
alert('弹出框');
}();
//添加小括号后的匿名函数
(function(){
alert('弹出框');
})();
回答：小括号能把我们的表达式组合分块，并且每一块，也就是每一对小括号， 都有一个返回值。这个返回值实际上也就是小括号中表达式的返回值。 加上括号也不会被执行
问题三：什么是自执行函数？
回答：在JavaScript里，任何function在执行的时候都会创建一个执行上下文， 因为function声明的变量和function有可能只在该function内部，这个上下文， 在调用function的时候，提供了一种简单的方式来创建自由变量或私有子function。
函数表达式的作用域
如果函数表达式声明的函数有函数名,那么这个函数名就相当于这个函数的一个局部变量,只能在函数内部调用
var f = function fact(x) {
if (x <= 1)
return 1;
else
return x*fact(x-1);
};
alert(fact()); // Uncaught ReferenceError: fact is not defined
fact()在函数内部可以调用,在函数外部调用就会报错:fact未定义
问题：
1.变量提升：
答案：请点击
2. 函数声明可以先调用再声明，是因为变量提升吗？
这个问题在上面的第一个问题里有提到：
函数及变量的声明都将被提升到函数的最顶部，所以函数声明会被先调用再声明是以为变量提升
3.函数声明在条件语句中使用时注意的问题?
在不同的环境下用函数声明会得到不同的效果
这也是函数声明的另外一个重要的特点，即通过条件语句控制函数声明的行为并未标准化，因此不同环境下可能会得到不同的结果。
网友评论