函数封装、调用、作用域

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
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值