23-1 JavaScript基础 函数 return arguments 作用域

1 - 函数

1.1 函数的概念

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

1.2 函数的使用

声明函数:

这种是匿名函数

//声明函数
function 函数名(){
	//函数体代码
}
// function 声明函数的关键字,全部小写
// 函数中的代码不会自己在执行
// 如果函数要实现逻辑代码,需要调用函数: 函数名();
// 函数是做某件事情,函数名一般是动词比如sayHi,getSum

调用函数:

// 调用函数
函数名(); //通过调用函数名来执行函数体代码

• 调用的时候千万不要忘记添加小括号
• 口诀:函数不调用,自己不会执行

注意:声明函数本身并不会执行代码,只有调用函数时才会执行函数体代码.

函数的封装

• 就是把多个功能通过函数的方式封装起来,对外提供欧冠一个简单的函数接口
  -简单理解:把电脑配件组合到机箱中,类似于快递打包

//计算任意两个数之间和的函数
//声明函数
function getSum(num1,num2){
	var sum = 0;
	for(var i = num1; i <= num2;i++){
		sum += i;
	}
	console.log(sum);
}
getSum(1,100);
getSum(20,50);

1.3 函数的参数

函数参数的语法

• 形参:函数定义时设置接收调用时传入

• 实参:函数调用时传入小括号内的真实数据

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

函数参数的运用:

//带参数的函数声明
function 函数名(形参1,形参2,形参3....){//可以定义任意多的参数,用逗号隔开
	// 函数体
}
// 带参数的函数调用
函数名(实参1,实参2...);

1.调用的实参值时传递给形参的
2.形参可以理解成:不用声明的变量
3.实参和形参的多个参数之间用逗号隔开.

1.4函数形参和实参数量不匹配时

注意:在js中,形参的默认值时undefined.

小结:

• 函数可以带参数也可以不带参数
• 声明函数的时候,函数名括号里面的时形参,形参的默认值为undefined
• 调用函数的时候,函数名括号里面的时实参
• 多个参数中间用逗号隔开
• 形参的个数可以和实参的个数不匹配,但是结果不可预计,我们尽量要匹配
• 如果实参少于形参的时候,里面的循环有可能是不执行的,会直接输出结果

1.4函数的返回值

return语句

返回值:函数调用整体代表的数据;函数执行完成之后可以通过return语句将指定数据返回

//声明变量
function 函数名(){
	return 需要返回的值;
}
console.log(函数名());此时调用函数就可以得到函数体内return后面的值.

• 在使用return 语句时,函数会停止执行,并返回制定的值.如果用逗号隔开多个值,以最后一个为准.
• 如果函数没有return,返回的值是undefined

1.5 break ,continue ,return 的区别

• break : 结束当前的循环体(如果for,while)
• continue : 跳出本次循环,继续执行下次循环( for,while)
• return : 不仅可以跳出循环,还能返回return语句中的值,同时还可以结束当前函数体内的代码

1.5 arguments的使用

当不确定有多少个参数传递的时候,可以用arguments来获取.
js中,arguments实际上它是当前函数的一个内置arguments对象,对象中存储了传递的所有实参,展示形式是一个伪数组,因此可以进行遍历.

• 具有Length属性

• 按索引方式存储数据

• 不具有数组的push,pop等方法

  注意:在函数内部使用该对象,因此对象获取函数调用时传的实参.

1.6 函数的两种声明方式

• 自定义函数方式(命名函数)

  利用函数关键词 function 自定义函数方式

//声明定义方式
function fn() {...}
//调用
fn();

• 因为有名字,所以也被称为命名函数

• 调用函数的代码即可以放到声明函数的前面,也可以放到声明函数的后面

• 函数表达式方式(匿名函数)
  利用函数表达式方式的写法:

//这是函数表达式写法,匿名函数后面跟分号结束
var fn = function() {...}
// 调用的方式,函数调用必须写到函数体下面
fn();

• 因为函数没有名字,所以也称为匿名函数
• 这个fn里面存储的是一个函数
• 函数表达式方式原理跟声明变量方式式一致的
• 函数调用的代码必须写到函数体后面

2 - 作用域

2.1 作用域概述

JavaScript（es6前）中的作用域有两种：

• 全局作用域
• 局部作用域（函数作用域）

2.2 全局作用域

作用于所有代码执行的环境(整个script标签内部) 或独立的Js文件.

2.3 局部作用域

作用于函数内的代码环境,就是局部作用域.
因为跟函数有关系,所以也成为函数作用域

2.4 jS没有块级作用域

• 在别的编程语言中,在if,for语句中创建变量,仅仅只能在本if,for中使用,超过了范围就无效,会报错.

3 - 变量的作用域

在js中,根据作用域的不同,变量可以分为两种

3.1 全局变量

• 在全局作用域下的var声明的变量,就是全局变量
• 注意:如果函数内部没有var声明直接赋值的变量也属于全局变量

	var num = 10;
	console.log(num);

	function fn(){
		console.log(num);//这里没有声明所以也是全局比变量
	};
	fn();

3.2 局部变量

• 在局部作用域下声明的变量就是局部变量
• 局部变量只能在该函数内部使用
• 在函数内部var声明的变量就是变量
• 函数的形参实际上就是局部变量

	console.log(ary)
	function fun(ary) {
	var sum = 100;
	num2 = 200;
	// console.log(sum)
	fun();
	// console.log(sum)
	// console.log(sum2)
	}
fun();

3.3从执行效率来看局部变量和全局变量的区别

全局变量:在任何地方都可以使用,只有在浏览器关闭时才会销毁,因此比较占内存
局部变量:只有在函数内部使用,当其所在的代码块被执行时,会被初始化;当代码块运行结束时,会被销毁,因此更节省内存空间.

4.作用域链

只要代码都是一个作用域中,写在函数内部的局部作用域,未写在任何函数内部即在全局作用域中;如果函数中还有函数,那么在这个作用域中就又诞生一个作用域:根据**[内部函数可以访问外部函数变量]** 的机制,用链式查找决定哪些数据能被内部数据访问,就称作作用域链.

作用域链:采取就近原则的方式来查找变量最终的值

5.预解析

注意:预解析会把变量和函数的声明在代码执行之前执行完成

5.1 变量预解析

变量的声明会被提升到当前作用域的最上面,变量的赋值不会提升.

• 注意:变量的提升只提升声明,不提升赋值.

5.2 函数预解析

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

5.3函数表达式声明函数问题

函数表达式创建函数,会执行变量提升