函数封装、调用、作用域

JavaScript函数（方法） 封装

函数：一段代码的封装

定义函数：function fn(){} ,var fn = function (){}

调用函数：函数名();

参数：形参，实参

函数：

目的：

​ 1、了解函数作用【代码封装，重复使用】

2、会定义函数并且调用【function 函数名 () {}，调用：函数名();】

函数的概念

函数： 可以封装一段特定功能代码，然后通过函数名调用，实现对该段代码重复使用
函数：一段（功能）代码的封装

函数重点：
1. 封装
2. 重复

函数的作用

实现代码的重复使用，提高代码使用效率
✔ 对分散代码整合（封装）
✔ 重复使用

创建函数

创建：function 函数名 () {}

调用：函数名();

方式一： 函数声明及执行方式（推荐）

☞ 函数的声明：

function  自定义函数名() {
     //一堆代码
    具体的功能代码
    一堆代码==>函数体
     //函数体
}

注意：
	 1. 由于函数是用来实现某种特定功能代码，所以一般我们设置函数名的时候，以动词开始。
   	 2. 函数不能自己执行代码，需要通过函数名调用实现代码的执行

☞ 调用函数（执行函数）

函数名();  //函数的调用

方式二：函数表达式（字面量）及执行方式

var  fn = function () {

}   
fn();

函数的参数

思考： 利用函数如何计算任意两个数字之和？

形参

在 函数创建时，在小扩号中定义的变量
语法：
形参：占位符，本身没有真实数据
function 函数名(形参,形参,形参...) {//形参，就是一个占位符，命名规则和规范和变量一样
	//函数体
}
注意：
	  1 函数也可以做为参数进行传递

实参

实参，在函数调用时，在小扩号中所传入的实际的数据。
语法：
实参：真实数据
函数名(数据,数据,数据...);   //实参，就是实际的数据

函数：一段代码的封装

​ 定义函数：function 函数名 (形式参数，形式参数…) {函数体}

​ 调用函数：函数名(实际参数，实际参数…);

函数的返回值return

注意：函数内部的值不可以直接拿到函数外面用

返回值：函数执行完后，可以把执行的结果 通过 return 语法 返回给 调用者

目的：把一个值返回到函数外面;

function add(num1，num2){
		//函数体
		return num1 + num2; // 注意：return 后的代码不执行
}
var resNum = add(21,6); // 调用函数，传入 两个实参，并通过 resNum 接收函数返回值
alert(resNum);// 27

注意：【很重要！！！】
    1. 如果函数没有显示的使用 return语句 ，那么函数有默认的返回值：undefined
    2. 如果函数中写了return语句，后面没有写任何其他内容，那么函数的返回值依然是 undefined
    3. 一个函数只能有一个返回值
    4. return 代码执行完成后，后面的代码不再执行
    5. 函数也可以作为返回值（理解）

函数其他部分

arguments对象

☞ 通过 arguments获取到函数参数的个数 【不确定函数到底有多少个参数】

☞ 总结：

 	 1. 如果函数参数不确定，可以定义函数的时候不写参数，通过arguments获取
 	 2. 如果函数的参数确定，那么推荐定义函数的时候写参数

匿名函数和自调用函数

☞ 匿名函数： 没有函数名的函数
例如：

var  fn = function () {
    
}

☞ 总结：

  	  1. 匿名函数不能单独使用
            2. 可以将匿名函数赋值给一个变量
            3. 可以让匿名函数自己调用自己

☞ 自调用函数： 函数封装好，立即执行。

☞ 总结：

   	1. 自调用函数可以是命名函数也可以是匿名函数
	2. ( function () {} )(); 

☞ 函数属于一种数据类型

☞ 函数可以作为参数

☞ 函数可以为返回值

函数作用域及局部变量

作用域

☞ 思考： 在函数内部定义的变量，在函数外部能否访问该变量

作用域： 变量或者函数可以起作用的区域

◆ 全局作用域（全局变量）

1. 在script标签中或者js文件中定义的变量，在任何地方都可以访问
2. 在函数内部声明变量不使用var关键字 （不建议使用）

◆ 局部作用域（局部变量）

1. 在函数内部定义的变量
2. 局部变量只能在定义变量的函数中使用

◆ 块级作用域 （目前所学版本没有，新版本语义中有块级作用域）

​ {
​ 块级作用域
​ }

1. 本质上块级作用域中的变量在外部不能访问
2. 但是在js中可以访问块级作用域的变量（证明js没有块级作用域）

全局作用域（全局变量）

声明在所有函数外部的变量，可以所有地方使用

案例：
	说出下列代码的运行结果？
	
  var age = 18;  
  console.log(age); 

  function fn(){
     console.log(age)
  }

  fn();

局部作用域（局部变量）

声明在某个函数内部的变量或函数的形参，只能在函数内部使用

案例：
说出下列代码的运行结果？

function fn(a){
   a = 100;
   var b = 200;  
}
	  
fn();
console.log(a); 
console.log(b);

作用域链

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y8gBGldh-1604772431808)(assets/06-1.png)]

作用域链：
当访问一个变量时，会先从本作用域中去找这个变量，若找不到则向上一级作用域中去找，依次类推，就形成了一个作用域链。

案例代码分析：

 	var a = 1;
    function fn1(){
      var a = 2;
      function fn2(){
          console.log(a);   //a的值 
      }
      fn2();
    }
    fn1();

作用域案例分析

分析代码执行结果

function  f1 () {
       num = 123;
    function f2 () {
       num = 789;
       console.log( num );
    }
    f2 ();
} 
var  num = 456;

f1();
//789