JavaScript函数篇（初识作用域）

1. 函数的诞生——声明函数的基本作用及形式 ：

(1): 基本作用

比如说有以下代码

if(1 > 0){
	document.write('a');
	document.write('b');
	document.write('c');
}
if(2 > 0){
	document.write('a');
	document.write('b');
	document.write('c');
}
if(3 > 0){
	document.write('a');
	document.write('b');
	document.write('c');
}

比如说以上代码，我们满足了这个条件之后要执行很多功能，而且这个条件满足了很多次，但是我们这么写的话代码的偶合（重复）程度非常高，这种代码我们把它叫做低效代码，我们编程讲究的是高内聚弱偶合，就是把相同功能的代码抽取出来放到一个黑匣子里边，我们每次在用的时候直接调用这个黑匣子就好了，不用每次都自己写， 这样就方便了很多。这个可以封装成黑匣子的东西我们就把他叫做函数，就是一个函数体里可以放很多条语句，当我们需要用它的时候直接调用就可以了。

(2): 函数的形式及调用函数

例如上边的代码，我们可以简化为：

function test(){
	document.write('a');
	document.write('b');
	document.write('c');
}
if(1 > 0){
	test();
}
if(2 > 0){
	test();
}
if(3 > 0){
	test();
}

函数的基本形式：先是一个关键字 function，然后后边跟一个函数名（函数名的命名规则和变量名差不多，不能以数字开头，可以用下划线等等，但是，不管是函数名还是变量名，如果有多个单词拼接，必须遵循小驼峰命名规则，即第一个单词首字母小写，以后的单词首字母都大写，如 theFirstName），然后一个小括号，再一个大括号，大括号里放执行语句，这样，就把他封装好了，当我们要调用的时候，直接写一个函数名加一个小括号即可调用。例如上边的，函数里有三条语句，怎么让他执行呢？直接调用 test() 就可以了。而且你写上一个 test() 他就会执行一遍，你在写上一个 test() 他还会再执行一遍。

你把语句写在函数里和函数外效果是一样的，再比如：

function test(){
	var a = 123;
	var b = 234;
	var c = a + b;
	document.write(c);
}

• 当你在底下 test() 的时候就会打印出 357，其实函数和变量差不多，都可以理解成一 个筐，只不过变量里装的是数据，函数里装的是语句，而且当你调用他的时候他才会执行，如果你底下不写 test() 的话，他就不会执行里边的语句，他就是个装语句的筐，不会打印出 357，只有当你调用他的时候，他才会执行，打印出 357，而且调用两次的话就执行两次，打印两个 357.
• 既然函数可以把一些语句圈到里边，那么但凡能圈到它里边的东西我们就可以抽象出一类功能。就是说我们正常写的话会先把语句抽出来放在函数里，现在我们反着来，跟 css 一样，先定义功能，再使用功能，比如说我们要定义一个功能，打印 abc，就可以：

function test(){
	document.write('abc');
}

然后当你要用这个功能的时候直接调用函数就可以了。

注意：比如说

function a(){
	var b = 1;
}
document.write(a); //输出 function a(){var b = 1 } 

你不调用这个函数，你想打印这个函数，他就会输出 function a(){var b = 1; }

2. 函数表达式 :

(1): 命名函数表达式

命名函数表达式的形式是这样的，例如：

var test = function abc(){
	document.write('a');
}

他会先定义一个变量，变量里边放入函数，这就是函数表达式，但是命名函数表达式的变量名会替代函数名的作用，意思就是调用函数你必须 test() 才可以，假如你 abc() 就会报错，这个 abc 就不起作用了，但是你打印 test.name 就会得到 abc.

(2): 匿名函数表达式

既然命名函数表达式的函数名不起作用了，后来我们就省掉了，例如：

var test = function (){
	document.write('a');
}

这也是后来比较常用的函数表达式，但是假如你输出 test.name 会得到 test，一个声明函数的函数名.name 也是函数名。

3. 参数——形参和实参 :

(1): 参数的定义及作用

我们知道函数的组成形式必须有关键字 function、函数名、小括号和大括号，这是函数必须有的东西，其实函数的组成形式中还有一个东西叫做参数，这个参数可有可无，但是正是因为这个参数才让函数变的神奇了，真正的高级编程中如果没有参数，那么函数也就没啥用了。但是参数比较简单，比如说：

function sum(a,b){
	var c = a + b;
	document.write(c);
}
sum(1,2);
//输出 3 

例如上边的，我们小括号里边放的就是参数，函数名后边的小括号里放了两个值 a，b，这么一放就相当于给函数体里 var a 和 var b（但是写在括号里不能带 var，不然会报错），但是并没有给他赋值，我们就把他叫做形式参数（形参），我们在调用函数的时 候小括号里放了 1 和 2，我们把它叫做实际参数（实参），这就相当于给 a 赋值 1，给 b 赋值 2，传参后 a=1,b=2，所以调用函数的时候打印 c 得 3.

作用：我们再来看上边这个函数，这个函数的功能就是实现两个数相加，传参数进去之后两个数就能相加了，就是我们现在不看调用函数那个语句，只看这个函数体，我们就相当于把两个数相加的规则给抽象出来了，这个 a 和 b 就跟变量一样，因为你每次执行的时候传的参数都可以不一样，比如你 sum（1,2）打印 c 就得 3，sum（3,4）打印 c 就得 7，这个就和数学里边的函数差不多了，数学里的函数为了抽象规则，xy 可以随时代换值，咱们这里边的变量就是参数，所以说有了参数之后我们的函数就真正变成抽象规则了，而不是原来只是为了聚合代码。这个参数结合里边的代码可以组成无数种用法，因为我们每次传进去的参数都可以不同，所以我们针对不同的参数可以进行不同的处理，所以有了参数后函数才变得强大了。

注意：实参里边传任何值类型都可以。

例 1：写一个函数体，加上两个形参，如果第一个数大于 10，就打印第一个数减去第二个的差，如果第一个数小于 10，就打印两个数的和，如果第一个数等于 10 就打印 10.

function test(a,b){
	if(a > 10){
		document.write(a - b);
	}else if(a < 10){
		document.write(a + b);
	}else{
		document.write(10);
	}
}

(2): JavaScript 不定参

JavaScript 天生不定参，不是说在一个函数里有几个形参就必须有几个实参，不是这样的，在 JS 里，形参比实参多，可以，实参比形参多，也行。 在同一个函数里，形参比实参多，比如说形参有 a,b,c，实参只有 1，2，那么打印 a 得 1，打印 b 得 2，打印 c 就得 undefined。 在同一个函数里，实参比形参多，比如形参只有 a，实参有 1，2，那么 a 就等于 1，那 个 2 传不进去就算了。

但是无论实参怎么往里传，无论形参有没有把实参表示出来，这个实参都是有地方放的。在每一个函数里边都有一个隐式的东西叫做 arguments，arguments 是实参列表， 他就是一个类数组，我们把它理解成一个数组，比如一个函数的实参是 1，2，3，那么 arguments 里边就是[1,2,3]，就是说无论形参有没有接受完实参，arguments 都会把实参当做一个数组存起来，比如说你在函数里的形参是 a，实参是 1,2,3，你表面上看 2 和 3 没地方传，但是他会存放在 arguments 数组里的，你在函数里 console.log （arguments）就会得到[1,2,3]，既然是个数组，就有长度，你 arguments.length 就等于 3，我们也可以在函数体里把 arguments 的每一位用 for 循环单独输出。其实形参的长度也可以表示出来，用函数名.length 表示。

例 2：写一个程序，在一个函数里，如果形参比实参多，输出形参多，如果实参比形参多，输出实参多，如果一样多，输出相等。

function test(a, b, c){
	if(test.length > arguments.length){
		document.write("形参多");
	}else if(test.length < arguments.length){
		document.write("实参多");
	}else{
		document.write("一样多");
	}
}
test(1, "2");                  //输出形参多
test(1, "2", true, [0, 1, 2]); //输出实参多
test(1, "2", true);            //输出一样多

例 3：写一个求和功能的函数，无论实参里传多少值都能把他求出来。

function sum(){
	var count = 0;
	for(var i = 0; i < arguments.length; i++){
		count += arguments[i];
	}
	document.write(count);
}
sum(1,2,3,4); //输出10

解析：由于实参数量不固定，我们就可以用遍历数组把 arguments 的每一位都相加即可。

(3): 形参与实参的映射规则

比如说一个函数里形参是 a，b，实参是 1,2，那么 arguments 的数组里就是[1,2]，a 里边存的也是 1，好，我们现在在函数体里写个 a = 2;这时给 a 重新赋值了，你 console.log（arguments[0]）也会得到 2，继续写，我们 arguments[0]=3，这时你 console.log（a）也得 3.你们看，这里边都是原始值吧？怎么一个变一个跟着变呢？ 形参和 arguments 确实是一个变一个跟着变的，确实有这样的绑定规则，但是，他俩不是同一个变量，系统内部有映射规则，就是这俩我变你也得变，但是他们是两个变量。

但是，假如说形参比实参多，比如说形参是 a,b,实参只有 1，就算你在函数体里写了 b=2，你 console.log（arguments[1]）会得到 undefined，实参列表天生有几位就有几位，只有形参和实参一一对应时才会映射。

4. return :

(1): 终止函数

return 的第一个作用就是终止函数，比如说你在一个函数体里写

function test(){
	var a = 10;
	var b = 20;
	console.log(a);
	return;
	console.log(b);
}

他就会只输出 a，不输出 b。因为你中间终止函数了，他就不执行下边的了。

(2): 返回值

return 的第二点作用就是返回值，比如说

function test(){
	return 123;
}
test();

这时，当你执行函数的时候他就会把 123 返回，但是返回的值没地方放，我们就需要一个变量来存他，比如说 var num = sum();此时输出 num 就会得到 123，这里的 return 即返回值又终止函数，你写在 return 下边的语句依然不管用。一般函数处理完一个操作之后并不是为了打印，都是返回给我们以便后续利用，我们一般用变量来接收他的返回值。

5. 初识作用域 :

作用域后边会细讲，在这里只简单说一下，比如说:

var a = 1;
function test(){
	console.log(a)
	var b = 2;
	function sum(){
		console.log(a);
		console.loh(b);
		var c = 3;
	}
	console.log(c); //报错
}
console.log(b);     //报错

这是一个会报错的代码，写在外边的 var a = 1 是全局变量，定义在函数里的变量叫局部变量。因为函数相当于一个房间，函数里边的东西能看到外面的东西，也可以访问、修改等等，但是外边的看不到里边的东西，所以你写在最外边的打印 b 会报错，test 函数体里可以打印 a，但是打印 c 就会报错，最里边的 sum 函数则可以把 ab 都打印出来。

声明：作者通过观看渡一教育免费公开课及相关文档总结的笔记，不做任何商业用途，仅供学习交流，感谢指正，如有侵权烦请立马联系，欢迎转载，请注明出处。