JavaScript简单学习（七）-函数详解

最新推荐文章于 2024-01-15 13:07:06 发布

zhang___gang

最新推荐文章于 2024-01-15 13:07:06 发布

阅读量135

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/zhang___gang/article/details/85003415

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

函数详解

JavaScript代码复用的单位是函数，函数可以包含一段可执行代码，也可以接收调用者传入的参数。

函数：（方法）

可以把需要反复执行的代码封装到一个函数中，复用
把不同的算法进行拆分，封装，每一个函数只做一件事件，利用函数的调用来使用

函数的定义

注：

形参直接写名字，不需要做类型声明，也不要加var，这是JavaScript属于弱类型语言的一种表现。
大多数优秀的JavaScript框架都使用第二种“匿名函数”语法来定义函数，它的可读性最好，所以必须要掌握。

第一种方式：命名函数

function 函数名 (形参){
    要执行的语句块;
}

第二种方式：匿名函数

function (形参){
    要执行的语句块;
}

第三种方式：使用Function类构造匿名函数

new Function (参数列表，函数执行体);

函数的调用

方式一：直接调用函数

对象.函数(实参)
如果没有指定对象，默认是window对象，window对象可以省略
- window对象：所有直接定义的函数都是属于window对象

方式二：call方法调用函数

函数引用.call(调用者，实参1，实参2，......);

方式三：

函数引用.apply(调用者，参数数组);

函数定义和函数调用示例：

<!--JavaScript函数定义和函数调用演示-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数</title>
    <script type="text/javascript">
        //函数的定义
        //方式1：命名函数
        //形参不加类型
        function sum(num1, num2) {
            var result = num1 + num2;
            return result; //需要返回就return，不需要就不写
        }

        //方式2：匿名函数,重点，函数本质上也是一个对象
        var add = function (num1, num2) {
            var result = num1 + num2;
            return result;
        }

        //方式3：通过Function类来创建一个函数（对象），new Function(形参列表, 方法执行代码);
        var add2 = new Function("num1", "num2", "return num1 + num2;");


        //函数的调用方式
        //方式一：对象.函数(实参)  (最常用)
        alert(window.sum(1,2)); //window可省略
        alert(add(1,3));
        alert(add2(2,4));

        //方式二：函数引用.call(调用者，实参1，实参2，......);
        alert(sum.call(window,1,2));

        //方式三：函数引用.apply(调用者，参数数组);
        alert(sum.apply(window, [3, 6]));
    </script>
</head>
<body>

</body>
</html>

函数返回值

JavaScript中的函数没有声明返回类型，，当函数想要返回值的时候直接加上return "值" 语句即可，不加则代表该函数没有任何返回值。

局部变量和局部函数

变量：根据定义范围不同，分为全局变量和局部变量

全局变量：直接定义的显式变量，无论在哪定义的隐式变量都是全局变量
局部变量：在函数中定义的变量

全局变量

只要执行到了声明之后就可以使用

局部变量

使用范围，只是当前函数
如果全局变量和局部变量名字相同，在这个方法中使用的是局部变量

局部函数

定义在其它函数中的函数
使用范围：所在的函数，声明之后的位置
在外界不能直接调用局部函数
只能通过调用它所在的函数，利用所在函数调用它

局部变量和局部函数示例：

<!--JavaScript局部变量和局部函数演示-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>局部变量和局部函数</title>
    <script type="text/javascript">
        //全局变量
        var result = 2;
        //隐式声明的全局变量
        temp = 3;
        var sum = function (num1, num2) {
            //在函数中显示声明的变量才是局部变量
            var result = 0;
            alert(result); //当函数调用时显示的时局部变量
            alert(window.result); //显示全局变量
            //函数中隐式声明的变量时全局变量
            temp1 = 3;
            
            //局部函数
            var sub = function (num1, num2) {
                alert("被调用了");
            }
            
            
            sub(1,2);  //外部调用sum函数，此处调用局部函数
            
            return num1 + num2;
        }

        //sub(4,2); 出了函数是不能使用局部函数的

        document.write("result: " + result + "<br/>"); //显示的是全局的result
        sum(1,2); //调用sum函数，使得temp1变量存在，sub局部函数被调用等
        //要先调用sum函数才能显示temp1，因为不调用函数temp1是不存在的
        document.write("temp1: " +temp1 + "<br/>");
    </script>
</head>
<body>

</body>
</html>