shangrila-xiu

112
文章
101
分类
33
标签

js_函数

javascript函数的讲解

函数：把一堆重复的代码封装，在需要额时候直接调用即可

函数的作用：代码的重用

使用函数的好处：

1、函数具有重复使用性，当写好一个函数时，可以在程序中不同地方调用这个函数，而不必重新编写。
2、加上函数后，程序就会变得很精简，虽然多了调用函数的语句，但是却少了很多重复的代码。
3、程序的可读性提高。
4、把程序拆成几个函数后，写起来轻松，且程序的编辑性和正确性都会提高，容易理解，好调试，修改和维护。

函数的缺点：函数会使程序的执行速度减慢。

函数需要先定义，再调用。不能重复，一旦重名，后面的函数会把前面的函数覆盖: 遵循驼峰命名法;CTRL+鼠标左键———>转到定义;一个函数最好实现一个功能

1
2
3
function 函数名字(){
		函数体;
	}
1
2
3
var str1="haha";
str1="helou";//设置-----可以改变
console.log(str1);

用户自定义函数：可以使用function关键字来声明函数

1
2
3
4
5
function 函数名(参数){
  代码块;
  [return;|return value;]
  [代码块;]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
	<head><meta charset=utf-8>
  	<script language="javascript">
    	function Greeting(){
          var UserName=prompt("请输入您的姓名！");
          alert(UserName+"您好，欢迎光临！");
    	}  
    </script>
  </head> 
  <body>
    <h1><a href="javascript:Greeting();">单击此处以显示欢迎信息</a> </h1>
  </body>
</html>

函数的参数：在函数定义的时候，函数名字厚民啊的小括号里面的变量是参数，目的是函数传进来的值得操作。函数可以作为参数使用，那么这个函数可以叫做回调函数。

1
2
形参：函数定义的时候小括号里面的值是形参
实参：函数在调用的时候，小括号里面的值是实参；实参可以是变量，也可以是值。
1
2
3
4
5
6
7
8
function sayHi(fn){
	console.log("您好啊");
	fn();//此时fn是一个函数
}
function sayBey(){
	console.log("拜拜！");
}
sayHi(sayBey);

函数的返回值：在函数的内部有return关键字，并且关键字的后面有内容，则这个内容就会被返回了；当函数调用的时候，只需要这个返回值，那么就定义变量接受即可。(如果有return关键字，但是后面没有内容;没有return。结果都是undefined——->属于没有明确的返回值)

函数可以作为返回值使用。

1
2
3
4
5
6
7
function f1(){
		return function(){
			console.log("这是一个函数");
		};
	}
	var ff=f1();//ff是一个函数了
	ff();
1
2
set:设置
get:获取
1
2
3
4
5
6
7
如果一个函数中有return,那么就有返回值。反之，则没有返回值。
形参的个数和形参的个数可以不一致。
函数没有返回值，但是在调用的时候接收了，那么结果就是undefined
变量声明了，但是没有赋值，结果也是undefined
实参的个数少于形参的个数，结果为NaN
return语句的下一句不会执行（无论后面写的是什么，都不会执行）
1
2
3
4
5
6
7
function twoSum(num1,num2){
	var twoSum=num1+num2;
	return twoSum;
}
//调用函数
var res=twoSum(10,20);
console.log("两个数的和是"+res);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//有参数，有返回值
function f1(x,y){
	return x+y;
}
var res=f1(10,20);
console.log(res);
//无参数，有返回值
funciton f2(){
	return 100;
}
//有参数，有返回值
function f3(x){
	return x;
}
//无参数，无返回值
function f4(){
	console.log("哈哈");
}
1
2
3
4
5
6
//函数没有返回值，但是在调用的时候接收了，那么结果就是undefined
function f1(x,y){
	var s= x+y;
}
var res=f1(10,20);
console.log(res);//undefined
1
2
3
4
5
6
7
//函数有return,但是后面没有值，但是在调用的时候接收了，那么结果就是undefined
function f2(x,y){
	var s=x+y;
	return;
}
var res=f2(10,20);
console.log(res);//undefined
1
2
3
4
5
6
7
8
9
10
11
function f1(){
	console.log("哈哈");//会执行的
	return 100;//会执行的
}
console.log(f1());//函数的调用
function f2(){
	console.log("哈哈");//会执行的
	return 100;//会执行的
}
console.log(f2);//函数的调用：结果数函数的代码

函数也是一种数据类型：

1
2
3
4
function f1(){
  console.log("函数类型！");
}
console.log(typeof f1);//function

命名函数和匿名函数

1
2
3
4
5
6
7
8
9
1、命名函数：函数如果有名字，就是命名函数
2、函数没有名字，是匿名函数。
3、函数另外一种定义方式：
	函数表达式：把一个函数给一个变量，此时形成的函数表达式
	var 变量名=匿名函数;
如果是函数表达式，那么此时前面的变量存储的是一个函数，这个变量相当于一个函数，就可以直接在变量的后面加上()来调用函数了。
函数表达式的后面，赋值结束后，要加上分号。

命名函数：

1
2
3
4
function f1(){
  console.log("这是一个命名函数！");
}
f1();

匿名函数(函数表达式)

1
2
3
4
5
var f2=function(){
	console.log("为又变帅了！");
};
//匿名函数不能直接调用，需要像下面这样调用
f2();

函数的自调用：，声明的同时，直接调用，

1
2
3
(function(){
	console.log("我真又变帅了！");
})();//函数的代码();这样写也可以调用函数

闭包

1
2
3
4
5
var add=(function(){
	var counter=0;
	return function(){return counter +=1;};
})();
document.write("这个数字为"+add());

关于闭包的详细理解

js闭包：使用完后清除闭包函数里面的局部变量

函数的总结

1
2
3
4
5
6
7
8
9
10
11
12
13
14
函数：把一些重复的代码封装起来，在需要的时候，直接调用函数即可
函数的作用：代码的重用
函数的定义：
	function 函数名(){
		函数体
	}
函数的调用：
	函数名();
参数：形参和实参
	形参：定义函数的时候，括号内的参数是形参，不需要写var
	实参：函数调用的时候小括号里传入的变量或者值，都是实参
返回值：函数中，如果有return，那么这个函数有返回值
	如果函数中没有return，说明这个函数没有返回值；如果函数中的有return，但是return的后面没有内容，则这个函数没有明确的返回值；如果函数没有明确的返回值，函数调用了，并且接收了，则结果为undefined。
	如果直接输出函数的名字，那么是这个函数的代码

javascript内置函数总结

内部函数

函数重写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			function factorial(num){
				if(num<=1){
					return 1;
					} else{
						return num * arguments.callee(num-1);
					}
				}
			var trueFactorial = factorial; //改变原函数体的指针（保存位置）
			factorial = function (){ //factorial 指向返回0的新函数
				return 0;
			}
			console.log(trueFactorial(5)); //120
			console.log(factorial(5)); //0
		</script>
	</body>
</html>

利用arguments就可以实现函数的重载。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function Add(firstnumber,sencondnumber) { 
if (arguments.length == 0)//没有传递参数 
{ 
return null; 
} 
else if (arguments.length == 1) {//传递的是一个参数 
return firstnumber;//也可以写为 return arguments[0]; 
} 
else if(arguments.length == 2)//传递的是两个参数 
{ 
return firstnumber+sencondnumber;//也可以写为 return arguments[0]+arguments[1]; 
} 
else { 
var total=0; 
for (var i = 0; i < arguments.length; i++) { 
total=total+arguments[i] 
} 
return total; 
} 
} 
console.log(Add(100,200));//300