zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Perl字符集就是方括号(或称中括号)里一连串可能的字符,只匹配单一字符,该单一字符可以是字符集里的任何一个,“-”在字符集里有特殊含义:表示某个范围的字符。而字符集意外的连字符不具有特殊意义。
    为什么 [00-177]匹配任意7bit ascii码 ?
    用字符串对列表赋值,一个字符串对应一个列表元素,eg: my @escaped = "asteriskasterisk hash access unpack_func";
    正则-量词,匹配的个数
    TCP/IP网络编程 读书笔记1
    LeetCode75 Sort Colors
    LeetCode74 Search a 2D Matrix
    LeetCode73 Set Matrix Zeroes
    LeetCode Weekly Contest 6
    LeetCode72 Edit Distance
  • 原文地址:https://www.cnblogs.com/ljfsmile0613/p/13182167.html
Copyright © 2011-2022 走看看