JavaScript-函数

函数

• js 默认是从上至下是顺序执行
• 分支：可以让js代码选择(跳过)执行
• 循环：可以让代码重复执行
• 函数：可以重复调用代码块

函数的定义

• 定义函数名字与变量的命名一致
• 由数字 字母 下划线 $ 组成
• 不能以数字开头，不能是关键字

// 最基础的函数
function 函数名() {
	函数内容;
}

// 列子：定义函数 用三种方式输出“你好”;
function say() {
	console.log("你好");
	document.write("你好<br/>");
	alert("你好");
}
// 调用函数：函数名()
say();

函数的调用

1. 函数名()

// 基础调用 可以调用多次
函数名();
函数名();
函数名();
函数名();

2. 事件调用
   • html 标签事件属性

// 标签事件属性
<button onclick="say()">触发</button>

- html 元素事件监听

//可以直接通过id名来访问事件，调用函数；
<button id="btn">触发</button>
btn.onclick = say; //调用 就是操作dom的属性，简写

// 同样的方法，不同写法（带参数调用）
<button id="pear">苹果</button>
var pear = document.getElementById("pear");
	pear.onclick = function() { juice("苹果") };
	//使用匿名函数传递参数

函数调用函数

// 定义加，减，乘，除，函数
	function add(a,b) {
		return a + b;
	}
	function minus(a,b) {
		return a - b;
	}
	function times(a,b) {
		return a * b;
	}
	function divide(a,b) {
		return a / b;
	}
	// 定义总函数 传入参数，分别调用以上函数
	function fun(a,b) {
		console.log("a+b：" + add(a,b));
		console.log("a-b：" + minus(a,b));
		console.log("a*b：" + times(a,b));
		console.log("a/b：" + divide(a,b));
	}
	//调用 fun
	fun(3,3);

函数的参数

• 单个参数

parseInt("字符"); //转换为整数
parseFloat("字符"); //转换为小数
alert(变量); 	// 弹出框
// 以上的括号里的都算是参数

// 定义一个榨汁函数，juice ，给他输入水果，返回什么样的水果汁
function juice(fruit) {
	alert("一杯新鲜的" + fruit + "汁榨好了);
}
// 调用 并 传参
juice("苹果");
juice("西瓜");
juice("草莓");
// fruit 称之为：函数的形参(占一个位置，给真正要传递的参数)
// "苹果"，"西瓜"，"草莓"，这些是真正的参数（去占用，形参占用的位置）

• 多个参数,使用逗号“,”隔开

function add(a,b) {
	alert(a + b);
}
add(5 + 4);

arguments 函数参数列表

• arguments.length 参数列表的长度
• arguments[num] 参数列表的每一项的值，mun从0开始

// 使用arguments 求平均值
function avg() {
	console.log(arguments); //查看arguments有什么
	var total = 0;
	for(var i = 0; i <= arguments.length - 1; i++) {
		total += arguments[i]; //循环累加，i对应的值
	}
	// 求平均值，个数为arguments中的长度
	alert("平均值：" + total/arguments.length);
}
avg(5,6,2,3); // 调用，且 ，传参，参数个数随便

形参和实参

• 形参

// fruit 称之为：函数的形参(占一个位置，给真正要传递的参数，形式上的参数)

• 实参

// "苹果"，"西瓜"，"草莓"，这些是真正的参数（去占用，形参占用的位置）

• 当函数执行的时候，实参会占用形式上的参数

函数的返回值

• 关键字：return
• 当执行函数遇到return时，return之下的语句将不在执行；
• return 语句只会返回一个值，默认为：undefined

// 普通的这样 alert(result);
function add(a,b) {
	a + b;
}
var result = add(4,6);
alert(result); // 结果为：undefined

// 定义函数 add 参数a,b 返回a,b的和
function add(a,b) {
	return a + b;
}
var result = add(4,6); //调用，传参，赋值，如果函数有返回值，则会赋值，不然是空
	alert(result);

函数，自己调用自己-----递归

• 函数调用自己，要有终止函数条件，不然会死循环
• 递归的规律

// 5,4,3,2,1
function outPut(n) {
	// 终止条件 ，如果n === 0时，终止，
	if(n === 0) {
		return;
	}
	console.log(n);
	outPut(n - 1); // 递归调用自己，每次参数减1
}
outPut(5); //调用，传参

// 求传入参数1-n的和 第一种
function add1(n) {
	var total = 0;
	for(var i = 1; i <= n; i++) {
		total += i;
	}
	return total;
}
alert(add1(3)); //6

// 求传入参数1-n的和 第二种，递归
function add2(n) {
	//终止条件
	if(n === 1) {
		return 1;
	}
	return n + add(n - 1);
}
alert(add2(3)) // 6
// 解析：
	add2(3)
	3	add2(3 - 1);
		2	add2(2 - 1);
			1	if(n === 1) return 1;
			===> 6

// 斐波那契数列：又称“兔子数列”：1，1，2，3，5，8.。。。
// 编写一个函数fib ，传参数n,返回，斐波那契数列 n位的值
function fib(n) {
	// 终止条件
	if(n === 0 || n === 1) {
		return 1;
	}
	return fib(n - 1) + fib(n - 2);
}
alert(fib(4));		// 调用，传参

函数的前置(函数的提升)

• js 在编译中，会把函数提升到最前面，也会把变量提升到最前面，变量的默认值时undefined
• 在函数定义前后调用，都可以成功访问
• 函数赋值给变量，就不能在赋值的前面访问，只能在赋值后面访问。

msg(); //可以调用到
function msg() {
	alert("你好");
}

msg(); //报错 (msg is not function)
var msg = function() {
	alert("你好");
}

匿名函数—没有名称的函数

• 匿名函数定义

// 不会执行
function() {
	alert("abc");
}

调用匿名函数

• 事件监听

// html
<button id="btn"></button>
// js
btn.onclick = function() {
	alert("abc");
}

• 自执行

// 匿名函数赋值 调用
var fun = function() {
	alert("abc");
}
fun()

// 括号包裹 调用
(function() {
	alert("abc");
})();
===> 相当于：(匿名函数)();

// 符号 调用
!function() {
	alert("abc");
}();
===> 相当于：!匿名函数();
// 同时还有：!,+,-,~,可以调用

变量的作用域

• 变量可以使用的范围
• 在函数中声明的变量，只能在函数中使用：局部变量
• 在script标签中声明的变量，任何地方都可以使用：全局变量
• if,switch,for,是没有作用域的，只有函数才有作用域
• 函数内部，有函数，函数嵌套，内部函数可以访问外部函数，但是外部函数不能访问内部函数；

var a = 20;
console.log("外部访问a",a);	//能访问到
function out() {
	var b = 50;
	console.log("在内部访问a和b：",a,b);  //能访问到
}
out() // 调用函数
console.log("函数外部访问b：",b);		// 访问不到b

var a = 15;
function fun() {
	var a = 20;		//这里的a ，与，外部的a，是两个变量
	alert(a);		//这里访问的是内部的a
}
fun();		//20 因为调用的函数，所以执行的函数内部的语句，是20
alert(a);   //15 这里因为访问不到内部的a，所以访问的是外部的a

function funA() {
	var a = "你好啊,A";								
	function funB() {				 				
		var b = "hi B";
		function funC() {
			var c = "前端真好啊，C";
			console.log(a,b,c);  
		}
	}
}
//可以看到，a的作用范围，在他所在函数的大括号的范围中
//可以看到，b的作用范围，在他所在函数的大括号的范围中
//可以看到，c的作用范围，在他所在函数的大括号的范围中

自由变量

• 没有在当前作用域定义的变量称为：自由变量

function fun() {
	alert(b);
}
// 访问b这个变量时，b变量没有在当前作用域定义，b是自由变量
// 自由变量会从内至外，向上，依次查找，直到全局，如果找不到b，就进行报错：b is not defined;
// 如果在某一个作用域下，找到了，则，访问找到的变量，从内至外

var a = 50;
function funA() {
	var a = 30;
	function funB() {
		alert(a);  // a 自由变量，向上查找，找到了30，就不再找，如果没找到继续找
	}
}