• JavaScript要点 (五) 函数定义


    JavaScript 使用关键字 function 定义函数。

    函数可以通过声明定义,也可以是一个表达式


     

     

    函数声明分号是用来分隔可执行JavaScript语句。 
    由于函数声明不是一个可执行语句,所以不以分号结束。

    在之前的教程中,已经了解了函数声明的语法 :

    function functionName(parameters) {
      执行的代码
    }

    函数声明后不会立即执行,会在我们需要的时候调用到。

    <body>
    
    <p>本例调用的函数会执行一个计算,然后返回结果:</p>
    <p id="demo"></p>
    <script>
    function myFunction(a,b){
        return a*b;
    }
    document.getElementById("demo").innerHTML=myFunction(4,3);
    </script>
    
    </body>

    函数表达式下述函数以分号结尾,因为它是一个执行语句。

    JavaScript 函数可以通过一个表达式定义。

    函数表达式可以存储在变量中:

    1 <p>函数可以存储在变量中:</p>
    2 <p id="demo"></p>
    3 <script>
    4 var x = function (a, b) {return a * b};
    5 document.getElementById("demo").innerHTML = x;
    6 </script>

    在函数表达式存储在变量后,变量也可作为一个函数使用:

    1 <p>函数存储在变量后,变量可作为函数使用:</p>
    2 <p id="demo"></p>
    3 <script>
    4 var x = function (a, b) {return a * b};
    5 document.getElementById("demo").innerHTML = x(4, 3);
    6 </script>

    以上函数实际上是一个 匿名函数 (函数没有名称)

    函数存储在变量中,不需要函数名称,通常通过变量名来调用。


    Function() 构造函数

    在以上实例中,我们了解到函数通过关键字 function 定义。

    函数同样可以通过内置的 JavaScript 函数构造器(Function())定义。

    1 <p>JavaScrip 内置构造函数。</p>
    2 <p id="demo"></p>
    3 <script>
    4 var myFunction = new Function("a", "b", "return a * b");
    5 document.getElementById("demo").innerHTML = myFunction(4, 3);
    6 </script>

    实际上,你不必使用构造函数。上面实例可以写成:

    1 <p id="demo"></p>
    2 <script>
    3 var myFunction = function (a, b) {return a * b}
    4 document.getElementById("demo").innerHTML = myFunction(4, 3);
    5 </script>

    注:在 JavaScript 中,很多时候,你需要避免使用 new 关键字。


    函数提升(Hoisting)

    在之前的教程中我们已经了解了 "hoisting(提升)"

    提升(Hoisting)是 JavaScript 默认将当前作用域提升到前面去的的行为。

    提升(Hoisting)应用在变量的声明与函数的声明。

    因此,函数可以在声明之前调用:

    1 myFunction(5);
    2 
    3 function myFunction(y) {
    4     return y * y;
    5 }

    使用表达式定义函数时无法提升。


    自调用函数

    函数表达式可以 "自调用"

    自调用表达式会自动调用。

    如果表达式后面紧跟 () ,则会自动调用

    不能自调用声明的函数

    通过添加括号,来说明它是一个函数表达式:

    (function () {
        var x = "Hello!!";      // 我将调用自己
    })();

    以上函数实际上是一个 匿名自我调用的函数 (没有函数名)

     

    函数可作为一个值使用

    JavaScript 函数作为一个值使用:

     1 <p>函数可作为一个值:</p>
     2 <p>x = myFunction(4,3) 或 x = 12</p>
     3 <p>两种情况下,x 的值都为 12。</p>
     4 <p id="demo"></p>
     5 <script>
     6 function myFunction(a, b) {
     7     return a * b;
     8 }
     9 var x = myFunction(4, 3);
    10 document.getElementById("demo").innerHTML = x;
    11 </script>

    JavaScript 函数可作为表达式使用:

    1 function myFunction(a, b) {
    2     return a * b;
    3 }
    4 
    5 var x = myFunction(4, 3) * 2;

    函数是对象

    在 JavaScript 中使用 typeof 操作符判断函数类型将返回 "function" 。

    但是JavaScript 函数描述为一个对象更加准确。

    JavaScript 函数有 属性 和 方法

    arguments.length 属性返回函数调用过程接收到的参数个数:

    1 <p> arguments.length 属性返回函数接收到参数的个数:</p>
    2 <p id="demo"></p>
    3 <script>
    4 function myFunction(a, b) {
    5     return arguments.length;
    6 }
    7 document.getElementById("demo").innerHTML = myFunction(4, 3);
    8 </script>

    toString() 方法将函数作为一个字符串返回:

    1 <p> toString() 将函数作为一个字符串返回:</p>
    2 <p id="demo"></p>
    3 <script>
    4 function myFunction(a, b) {
    5     return a * b;
    6 }
    7 document.getElementById("demo").innerHTML = myFunction.toString();
    8 </script>

    函数定义作为对象的属性,称之为对象方法。
    函数如果用于创建新的对象,称之为对象的构造函数。

  • 相关阅读:
    开始我的博客园
    科技生态链
    程式建议
    如何自动识别判断url中的中文参数是GB2312还是Utf-8编码?
    jquery.cookie 使用方法
    数据结构(Java)——查找和排序(5)
    数据结构(Java)——查找和排序(4)
    数据结构(Java)——查找和排序(3)
    数据结构(Java)——查找和排序(2)
    数据结构(Java)——查找和排序(1)
  • 原文地址:https://www.cnblogs.com/tig666666/p/5918715.html
Copyright © 2020-2023  润新知