JavaScript 函数声明与函数表达式的区别
JavaScript 函数是通过 function 关键词定义的,可以使用函数声明或函数表达式
函数声明
1 function functionName(parameters) { 2 要执行的代码 3 }
被声明的函数不会直接执行。它们被“保存供稍后使用”,将在稍后执行,当它们被调用时。
下面看个例子:
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <h1>JavaScript 函数</h1> 6 7 <p>此例调用一个执行计算并返回结果的函数:</p> 8 9 <p id="demo"></p> 10 11 <script> 12 var x = myFunction(4, 3); 13 document.getElementById("demo").innerHTML = x; 14 15 function myFunction(a, b) { 16 return a * b; 17 } 18 </script> 19 20 </body> 21 </html>
分号用于分隔可执行的 JavaScript 语句。也就是如果函数内有多行语句,可以使用;进行分割
由于函数声明不是可执行的语句,以分号结尾并不常见。也就是花括号后面是没有;的
函数表达式
JavaScript 函数也可以使用表达式来定义。
函数表达式可以在变量中存储:
1 var x = function (a, b) {return a * b};
在变量中保存函数表达式之后,此变量可用作函数:
1 var x = function (a, b) {return a * b}; 2 var z = x(4, 3);
最后z的值是4*3=12
上面的函数实际上是一个匿名函数(没有名称的函数)。
存放在变量中的函数不需要函数名。他们总是使用变量名调用。
上面的函数使用分号结尾,因为它是可执行语句的一部分。
函数提升
“提升”(hoisting)
Hoisting 是 JavaScript 将声明移动到当前作用域顶端的默认行为。
Hoisting 应用于变量声明和函数声明。
正因如此,JavaScript 函数能够在声明之前被调用:
1 myFunction(5); 2 3 function myFunction(y) { 4 return y * y; 5 }
上面的代码在执行过程中是不会报错的,原因也说了就是提升。
但注意:使用表达式定义的函数不会被提升。
例子如下:
1 var x = myFunction(4, 3); 2 3 var myFunction = function (a, b) {return a * b};
表达式定义的函数,如果函数在定义之前调用,这是会报错滴,原因也说了,因为不会自动提升。至于为什么,规则就是规则,记住就好啦,谁叫这个语言的发明者不是你勒!
最后总结一下:
函数声明,调用以及声明的顺序可以随意,反正都有提升定义在
函数表达式,调用以及声明的顺序不可以随意,必须先定义函数再调用,否则会报错!
上面的内容都是从W3school网站上拿过来的,感兴趣的可以参考这个链接:https://www.w3school.com.cn/js/js_function_definition.asp