JavaScript函数精讲-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38636998/article/details/83374406

函数(function)

一、概要

函数为程序设计人员提供了一个丰常方便的能力。通常在进行一个复杂的程序设计时，总是根据所要完成的功能，将程序划分为一些相对独立的部分，每部分编写一个函数。从而，使各部分充分独立，任务单一，程序清晰，易懂、易读、易维护。JavaScript函数可以封装那些在程序中可能要多次用到的模块。并可作为事件驱动的结果而调用的程序。从而实现一个函数把它与事件驱动相关联。这是与其它语言不样的地方

二、定义

函数就是把完成特定功能的一段代码封装起来。给该功能起一个名字（函数名）

三、作用

使程序变得更简短而清晰
有利于程序维护
可以提高程序开发的效率
提高了代码的重用性(复用性）

四、定义函数

1、说明

函数声明也叫函数定义。使用函数，必须要先定义。

2、语法格式

带返回值

function 函数名(参数列表){
    //函数体;
    return 函数返回值;
}

不带返回值

function 函数名(参数列表){
    //函数体;
}

说明
- function 是定义函数用到的关键字，必须存在，不能省略。这个单词的所有字母必须小写。
- 函数名是为了能让这个函数在别的地方调用。
- 函数名的后面必须跟一对圆括号()。
- 圆括号内根据需要可以声明形参，定义形参的时候只需要参数名，而不要var来声明。形参的个数不固定，根据需要，可以有多个形参，也可以一个也没有。(圆括号内的形参有时候我们也称之为形参列表)
- 圆括号后面跟一对大括号{ },表示函数代码的开始和结束。圆括号内写我们要执行的一系列的代码，这一系列的代码我们称之为函数体。
- 函数体内可以根据需要决定是否添加return语句。return语句表示给方法的调用者返回一个值。总体来说 return语句有两个作用：1、给调用者返回值 2、结束函数(只要碰到return语句，不管代码执行到了什么地方，也不管进入了多少层循环，那么方法都会立即执行，并返回)。
- return语句的语法是：return 返回值; 返回值可以省略，表示仅仅结束函数。
- 如果省略return语句或者有return但是没有返回值，这个时候，返回的是undefined

五、匿名函数

1、定义

没有名字的函数叫匿名函数

2、变量匿名函数

定义

可以把函数赋值给变量、事件。

语法格式

var 变量名 = function (p1, p2) {
    //语句块
};

示例代码

//变量匿名函数，左侧可以为变量、事件等
var fun = function (p1, p2) {
    alert(p1+p2);
};

适合场景

避免函数名污染。若先声明个带名称的函数，再赋值给变量或事件，就造成了函数名的滥用

3、无名称匿名函数

定义

在函数声明时，在后面紧跟参数。Js语法解析此函数时，里面代码立即执行。

语法格式

(function (参数) {
    alert(参数);
})(参数);

适合场景

只需执行一次的。如浏览器加载完，只需要执行一次且后面不执行的功能。

六、闭包函数

1、定义

函数A内部声明了个函数B，函数B引用了函数B之外的变量，并且函数A的返回值为函数B的引用。那么函数B就是闭包函数，凡是有权访问另一个函数作用域内变量的函数都是闭包。

2、作用

一个是前面提到的可以读取函数内部的变量，
让这些变量的值始终保持在内存中

2、示例代码

简单的闭包使用

 function add() {
        var num = 1;//标记回收
        return function () {
            num++;//发现有对象引用,不回收
            return num;
        }
    }
    var test = add();
    alert(typeof  test);//输出 function
    alert(test()); //打印2
执行步骤
1. 定义了一个普通函数add
2. 在add中定义了局部变量num
3. 在add函数返回一个匿名函数
4. 执行add函数讲函数对象赋值给全局变量test
5. test()执行了add中的匿名函数
6. add中的匿名函数引用了add函数的num

填坑案例

function createArr(){
    var result =[];
    for (var i=0; i < 10; i++){
        result[i] = function(){
            return i;
        };
    }
    return result;
}

var arr = createArr();
for (var i=0; i < arr.length; i++){
    console.log(arr[i]());//输出10个10？ 
}
 执行步骤

1. var result, i; 定义局部变量
2. result[0] = function(){ return i; }; //没执行函数，函数内部不变，不能将函数内的i替换！
3. result[1] = function(){ return i; }; //没执行函数，函数内部不变，不能将函数内的i替换！
   ...
   result[9] = function(){ return i; }; //没执行函数，函数内部不变，不能将函数内的i替换！
4. i = 10;
   arr = result;
   result = null;
5. for循环执行
   console.log(i); // arr[0]()就是执行 return i 语句，就是返回10
   console.log(i); // arr[1]()就是执行 return i 语句，就是返回10
   ...
   console.log(i); // arr[9]()就是执行 return i 语句，就是返回10

2、注意事项

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
闭包会在父函数外部，改变父函数内部变量的值。

七、参数详解

1、参数分类

实际参数：调用时传递的参数
形式参数：定义时传递的参数。

2、参数是什么

在定义一个函数时，有时候需要为函数传递额外的数据，不同的外部数据会得到不同的结果，这种外部数据就叫做参数。

3、参数的省略

函数参数不是必须的，javascript规范允许省略调用时传递的实际参数一个用括号的参数列表，参数是可选的，参数是用逗号分隔开

4、参数默认值

函数参数的默认值是undefined。然而，在某些情况下设置不同的默认值是有用的。一般策略是在函数的主体测试参数值是否为undefined，如果是则赋予一个值，如果不是，则返回实际参数传递的值从ECMAScript 6开始，定义了默认参数(default parameters)。使用默认参数，在函数体的检查就不再需要了。

5、特性

参数个数没有限制

实参<形参  多余参数=undefined
实参>形参  多余的实参被忽略

通过arguments可以访问参数数组

参数始终按值传递

基本类型—>传值
引用类型—>传地址

八、调用方式

1、直接调用

函数名(实参列表)

function add(num1,num2){
  console.log(num1+num2);
}
add(1,2);

2、在链接中调用

javascript:函数名(实参列表)

<script type="text/javascript">
    function add(num1,num2) {
      console.log(num1+num2);
    }
</script>
<a href="javascript:add(1,2)">描述</a>

3、在事件中调用

事件名称=“函数名(实参列表)”

 <button type="button" onclick="add(1,2)">调用js代码</button>

九、变量的作用域

9.1、定义

变量的作用域指的是，变量起作用的范围。也就是能访问到变量的有效范围。

9.2、变量的分类

全局变量
局部变量

9.3、全局变量

定义

在函数外部的变量都是全局变量

示例代码

<script type="text/javascript">
      //定义了一个全局变量。那么这个变量在当前html页面的任何的JS脚本部分都可以访问到。
     var num = 20; 
    alert(num); //弹出：20
</script>
<script type="text/javascript">
      //因为v是全局变量，所以这里仍然可以访问到。
      alert(v);  //弹出：20
</script>

调用
```
任何位置
```

9.4、局部变量

定义

在函数内声明的变量，叫局部变量！表示形参的变量也是局部变量！
局部变量的作用域是局部变量所在的整个函数的内部。 在函数的外部不能访问局部变量

示例代码

<script type="text/javascript">
    function fun(){
        alert(v);  //    弹出：undefined
        var str = "abc";  // 声明局部变量。局部变量也会声明提前到函数的最顶端。
        alert(str);    //    弹出：abc
    }
    alert(str);  //报错。因为变量str没有定义。 方法 fun 的外部是不能访问方法内部的局部变量 str 的。
 </script>