JavaScript笔记-03函数与作用域

一、概述

1.1、定义

# 函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

1.2、函数的使用

1.2.1、说明

​ 函数在使用时分为两步：声明函数和调用函数。

1.2.2、声明函数

• function 是声明函数的关键字，必须小写
• 函数表示的是做某件事情，函数名一般是动词形式
• 函数必须经过调用之后，才能执行函数体代码

<script>
   	// 声明函数
    function sayHi() {
        console.log("世界,你好！");
    }
</script>

1.2.3、调用函数

• 调用的时候千万不要忘记添加小括号
• 口诀：函数不调用，自己不执行。
• 注意：声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码

<script>
   	// 声明函数
    function sayHi() {
        console.log("世界,你好！");
    }
    
    // 调用函数
    sayHi();
</script>

1.3、函数的封装

1.3.1、概念

• 函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口。
• 简单理解：封装类似于将电脑配件整合组装到机箱中 ( 类似快递打包）

1.3.2、案例

​ 需求：利用函数计算1-100之间的累加和。

<script>
   	// 声明函数
    function getSum() {
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            sum = sum + i;
        }
        console.log("1到100的和是:" + sum);
    }
    // 调用函数
    getSum();
</script>

二、函数的参数

2.1、形参和实参

• 在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参
• 调用该函数时，同样也需要传递相应的参数，这些参数被称为实参。

参数	说明
形参	形式上的参数 函数定义的时候 传递的参数 当前并不知道是什么
实参	实际上的参数 函数调用的时候 传递的参数 实参是传递给形参的

==参数的作用 : 在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去。==

<script>
    // 在声明函数的小括号里面是 形参 （形式上的参数）
    function 函数名(形参1, 形参2, ...) {

    }

    // 在函数调用的小括号里面是实参（实际的参数）
    函数名(实参1, 实参2, ...);
</script>

<script>
    // 利用函数求任意两个数之间的和
    function getSum(start, end) {
        var sum = 0;
        for (var i = start; i <= end; i++) {
            sum = sum + i;
        }
        console.log(start + "到" + end + "之间的和是:" + sum);
    }
    // 调用函数
    getSum(1, 100);
</script>

2.2、函数参数的传递过程

• 调用的时候实参值是传递给形参的
• 形参简单理解为：不用声明的变量
• 实参和形参的多个参数之间用逗号（,）分隔

2.3、函数形参和实参个数不匹配问题

2.3.1、形参和实参个数相等

<script>
  	// 利用函数求任意两个数的和
    function getSum(num1, num2) {
        console.log(num1);             //  1
        console.log(num2);             // 100
        console.log(num1 + num2);      // 101
    }
    // 调用函数
    getSum(1, 100);
</script>

# 如果实参的个数和形参的个数一致 则正常输出结果

2.3.2、实参个数多于形参

<script>
    // 利用函数求任意两个数的和
    function getSum(num1, num2) {
       	console.log(num1);          //  20
        console.log(num2);          //  30
        console.log(num1 + num2);   //  50
    }
    // 调用函数
    getSum(20, 30, 200, 300);
</script>

# 实参个数多于形参，只取到形参的个数

2.3.3、实参个数少于形参

<script>
    // 利用函数求任意两个数的和
    function getSum(num1, num2) {
       	console.log(num1);             //  20
       	console.log(num2);             //  undefined
        console.log(num1 + num2);      //  NaN
    }
    // 调用函数
    getSum(20);
</script>

# 实参个数少于形参，多的形参定义为undefined，结果为NaN
# 形参可以看做是不用声明的变量  num2 是一个变量但是没有接受值  结果就是undefined 

2.3.4、总结

• 建议 我们尽量让实参的个数和形参相匹配
• 在JavaScript中，形参的默认值是undefined。

2.4、小结

• 函数可以带参数也可以不带参数
• 声明函数的时候，函数名括号里面的是形参，形参的默认值为 undefined
• 调用函数的时候，函数名括号里面的是实参
• 多个参数中间用逗号分隔
• 形参的个数可以和实参个数不匹配，但是结果不可预计，我们尽量要匹配

三、函数的返回值

3.1、return语句

​ 有的时候，我们会希望函数将值返回给调用者，此时通过使用 return 语句就可以实现。

​ 例如，声明了一个sum()函数，该函数的返回值为666，其代码如下：

• 在使用 return 语句时，函数会停止执行，并返回指定的值
• 如果函数没有 return ，返回的值是 undefined

<script>
    // 利用函数求任意一个数组中的最大值
    function getMax(arrs) {
       	var max = arrs[0];
        for (var i = 1; i <= arrs.length; i++) {
            if (max < arrs[i]) {
                max = arrs[i];
            }
        }
        return max;
    }
    // 调用函数
    var arrs = [10, 13, 56, 73, 48, 19];
    var max = getMax(arrs);
    console.log("最大值是:" + max);
</script>

3.2、return 终止函数

​ return 语句之后的代码不被执行。

<script>
    function getSum(num1, num2) {
        return num1 + num2;
        alert("我不会被执行,前面有 return");
   	}
   	// 调用函数
    var sum = getSum(10, 20);
    console.log("和是:" + sum);
</script>

3.3、return 的返回值

<script>
    function fn(num1, num2) {
     	return num1, num2;
    }
    // 调用函数
    var result = fn(10, 20);
    console.log("结果是:" + result);
</script>

3.4、函数没有 return 返回 undefined

<script>
   	function fn(num1, num2) {
    	console.log(num1 + num2);    // 30
    }
    // 调用函数
    var result = fn(10, 20);
    console.log("结果是:" + result); // undefined
</script>

​ ==函数无论是否有return，函数都是有返回值的。==

• 如果有return 则返回 return 后面的值
• 如果没有return 则返回 undefined

3.5、break、continue、return 的区别

• break ：结束当前的循环体（如 for、while）
• continue ：跳出本次循环，继续执行下次循环（如 for、while）
• return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码

3.6、类比

四、arguments的使用

4.1、概述

​ 当我们不确定有多少个参数传递的时候，可以用 arguments 来获取。在 JavaScript 中，arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。

​ arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：

• 具有 length 属性
• 按索引方式储存数据
• 不具有数组的 push , pop 等方法

4.2、案例

<script>
    // 利用函数求任意个数的最大值
    function getMax() {
        var max = arguments[0];
        for (var i = 1; i <= arguments.length; i++) {
            if (max < arguments[i]) {
                 max = arguments[i];
            }
   		}
        return max;
    }
    var result1 = getMax(10, 23, 17, 45);
    console.log("最大值是:" + result1);

    var result2 = getMax(10, 18, 19, 23, 38, 35);
    console.log("最大值是:" + result2);
</script>

# arguments 内置对象指的是函数中我实际接受到的参数。

五、length的使用

5.1、概述

​ length也是函数的内置对象，表达的含义是：函数期望接受到的参数个数，其实就是函数定义的是时候形参的个数。

5.2、案例

<script>
    // 利用函数求任意个数的最大值
    function getMax(num, num2) {
        console.log("实际接收到参数的个数是:" + arguments.length);
    }
    var result1 = getMax.length;
    console.log("期望接受到的参数个数是:" + result1);

    getMax(10, 20, 30, 40);
</script>

六、函数的两种声明方式

6.1、自定义函数方式(命名函数)

​ 利用函数关键字 function 自定义函数方式。

• 因为有名字，所以也被称为命名函数
• 调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面

<script>
   	// 调用函数,可以再定义函数之前进行调用
    sum();

    // 定义函数
    function sum() {
       console.log("求和");
    }
</script>

6.2、函数表达式方式(匿名函数)

​ 利用函数表达式方式的写法如下：

• 因为函数没有名字，所以也被称为匿名函数，其实 fn 并不是函数名称，是变量名。
• 函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值 而 函数表达式里面存的是函数
• 这个fn变量里面存储的是一个函数
• 函数表达式方式原理跟声明变量方式是一致的
• 函数调用的代码必须写到函数体后面

 <script>
    // 理解：定义了一个fn变量，该变量的值是一个函数
    var fn = function() {
        console.log("函数表达式的方式定义函数");
    }
    fn();
</script>

七、作用域

7.1、概念

​ 作用域 ： 就是变量在某个范围内起作用和效果。目的是为了提高程序的可靠性，更重要的是减少命名冲突。

​ JavaScript (ES6前) 中的作用域有两种：

• 全局作用域
• 局部作用域(函数作用域)

7.2、全局作用域

​ 作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。

<script>
    // 定义的num变量就是全局作用域
    
    var num = 10;
    var num = 30;
    console.log(num);   // 30
</script>

7.3、局部作用域/函数作用域

​ 作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，所以也称为函数作用域。

<script>
    function fn() {
        var num = 20;
            console.log("num的值是:" + num); // 20
    }

    fn();

    console.log(num); // 报错,函数内部的num在函数外部是访问不到的
</script>

7.4、变量的作用域

7.4.1、概述

​ 根据作用域的不同我们变量分为全局变量和局部变量。

7.4.2、全局变量

​ 在全局作用域下定义的变量，在全局下都可以使用。

<script>
    // 全局作用域下定义的变量是全局变量
    var num = 10;

    console.log(num);       // 10

    function fn() {
        console.log("在函数中访问num变量:" + num);
    }

    fn();
</script>

<script>
    function fn() {
       // 如果在函数内部 没有声明直接赋值的变量也属于全局变量
       num = 40;
    }

    fn();
    console.log("num的值是:" + num); // 40
</script>

# 如果在函数内部 没有声明直接赋值的变量也属于全局变量

7.4.3、局部变量

​ 在局部作用域下定义的变量就是局部变量， 也就是说在函数中没有通过var关键字定义的变量就是局部变量。

# 注： 函数的形参也可以看做是局部变量

<script>
    function fn() {
       var num = 30; // 局部变量,只能在此函数内部使用
   	}

    fn();
    console.log("num的值是:" + num); // 报错
</script>

7.5、JS 没有块级作用域

7.5.1、概述

​ 在ES6之前（即目前阶段），JavaScript中没有块级作用域，只有全局作用域和局部作用域。

​ 关于块级作用域是在ES6版本才新增的，这个以后再讲。

​ 块级作用域：

• 由{}包裹起来的，比如说if、while这些语句。

7.5.2、案例

<script>
   if (true) {
       var num = 21;
       console.log("num的值是:" + num);
   }

   console.log("值是" + num);
</script>

7.6、作用域链

7.6.1、概述

• 内部函数访问外部函数的变量，采取的是链式查找的方式来决定取那个值 这种结构我们称为作用域链。
• 采取就近原则的方式来查找变量最终的值。

7.6.2、案例1

<script>
   var num = 456;

   function f1() {
      var num = 123;

      function f2() {
           var num = 0;
           console.log(num); // 站在目标出发，一层一层的往外查找
      }
      f2();
   }
   f1();
</script>

八、预解析

8.1、问题引入

8.1.1、案例1

<script>
    console.log(num); // 报错,  num is not defined
</script>

8.1.2、案例2

<script>
    console.log(num); 	// undefined
    var num = 20;
</script>

8.1.3、案例3

<script>
   	// 命名函数(自定义函数方式):我们把函数调用放在函数声明上面,发现也可以
    fn();

    function fn() {
       console.log("1111"); // 1111
    }
</script>

8.1.4、案例4

<script>
   	// 匿名函数(函数表达式方式):我们把函数调用放在函数声明上面
    fn();

    var fn = function() {
      	console.log('22222');
    }
</script>

8.2、概念

​ JavaScript 代码是由浏览器中的 JavaScript 解析器（js引擎）来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行。

• 预解析：js引擎会把js里面所有的 var 、 function 提升到当前作用域的最前面。
• 代码执行：从上到下执行JS语句

​ 预解析只会发生在通过 var 定义的变量和 function 上。学习预解析能够让我们知道为什么在变量声明之前访问变量的值是 undefined，为什么在函数声明之前就可以调用函数。

8.2.1、变量预解析(变量提升)

​ 变量提升：变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。

8.2.2、函数预解析(函数提升)

​ 函数提升： 函数的声明会被提升到当前作用域的最上面，但是不会调用函数。

8.2.3、解决函数表达式声明调用问题

​ 对于函数表达式声明调用需要记住：函数表达式调用必须写在函数声明的下面。