一、函数介绍
概念:将任意代码封装到一起,需要用的时候进行调用执行。就像一个盒子,盒子里面装代码,通过盒子名称找到盒子执行里面的代码。
函数作用:封装代码。
封装作用:复用代码。
语法:
//定义函数
function 函数名(){
函数体 //封装的代码
}
//函数调用语句
函数名()
示例:两个数中的最大数
<body>
<script>
function getMax(){
var m=34
var n=23
var max=m
if(max<n){
max=n
}
console.log('max is '+max);
}
getMax()
</script>
</body>
输出:max is 34
二、函数参数
函数有形参和实参。
形参是在函数内部可以使用的变量,在函数外部不能使用,也不用再定义。形参的值是在函数调用的时候由实参决定的。
function 函数名(形参1,形参2...){
函数体
}
实参是在函数调用的时候给形参赋值的,也就是说,在调用的时候传入的实际参数值。
函数名(实参1,实参2...)
示例:求最大值
<body>
<script>
//在定义函数的括号中,定义的变量叫形参,即x和y是形参
function max(x,y){
var max=x
if(max<y){
max=y
}
console.log('max:',max);
}
max(23, 45) //在函数调用语句中,传递的值叫实参,即23和45是实参
</script>
</body>
形参和实参是按照顺序一一对应的。
1.当形参比实参少时,形参没有实参给的值,所以在函数内部无法用到这些值。
<body>
<script>
function fn(num1,num2){
//函数内部可以使用num1和num2
}
fn(100,200,300)
//本次调用的时候,传递了两个实参,100和200
//100对应num1,200对应num2,300没有对应的变量
//所以在函数内部就没有办法依靠变量来使用300这个值
</script>
</body>
2.当形参比实参多时,多出来的形参没有值,就是undefined。
<body>
<script>
function fn(num1,num2,num3){
//函数内部可以使用num1、num2和num3
}
fn(100,200)
//本次调用的时候,传递了两个实参,100和200
//100对应num1,200对应num2,num3没有实参和其对应
//所以num3的值就是undefined
</script>
</body>
参数默认值:
<body>
<script>
function fun(m){
m = m || 10 //函数默认值
console.log('m',m)
}
fun() //没有给实参,会打印默认值10
</script>
</body>
三、函数返回值
函数中使用return给函数一个返回值和终断函数。
1.终断函数:使用return关键字,不给返回值,让函数在中间位置停掉,让后面的代码不再执行。
2.返回值:给执行完的函数一个结果。
<body>
<script>
//无返回值
function f2(){
console.log('f2')
var i=1
return
console.log('i',i)
}
f2()
console.log('-----------------')
//有返回值
function f1(){
console.log('f1');
return 100
}
console.log(f1());
</script>
</body>
四、函数类型
根据函数参数和返回值,分为四类:
1.无参无返回值
function fun(){
}
fun()
2.无参有返回值
function fun(){
return 值
}
var m=fun()
3.有参无返回值
function fun(形参){
}
fun(实参)
4.有参有返回值
function fun(形参){
return 值
}
var m=fun(实参)
五、函数定义方式
1.声明式函数定义
2.赋值式函数定义
<body>
<script>
//1.声明式 function 函数名(){}
//2.函数表达式(赋值式) var 函数名=function (){} 函数名()
var getMax=function (m,n){
var max=m
if(max<n)
max=n
console.log('max:',max);
}
getMax(12,13)
</script>
</body>
六、预解析
浏览器javascript引擎解析执行javascript代码。执行javascript代码之前,扫描通过js代码,如果发现声明式函数和var声明的变量,将其提前。
<body>
<script>
fun()
console.log('111 num',num)
function fun(){
console.log('fun >>>');
}
var num=100
console.log('222 num',num);
</script>
</body>
同名变量和函数解析方式:声明式函数优先。一定要避免函数名和变量同名。
<body>
<script>
fn()
function fn(){
console.log('我是fn函数');
}
fn()
var fn=100
fn()
</script>
</body>
if条件不管成立与否都会预解析,只是条件不成立不会执行代码。
<body>
<script>
console.log(num);
if(false){
var num=100
}
console.log(num)
</script>
</body>
return语句后代码不执行,但会进行预解析。
<body>
<script>
function fn(){
console.log(num);
if(true){
var num=10
return;
}
var num=100
}
fn()
</script>
</body>
输出一个:undefined
七、练习
1.求1*2*3*……*99*100的乘积
<body>
<script>
function fn(m,n){
s=1
for(var i=m;i<=n;i++){
s *= i
}
return s
}
document.write(fn(1,100))
//console.log(fn(1,100))
//输出结果是:9.33262154439441e+157
</script>
</body>
2.百元买百鸡
<body>
<script>
function fun() {
//用一百元钱买一百只鸡。已知公鸡5元/只,母鸡3元/只,小鸡1元/3只。必须每种都有
for (var gj = 1; gj < 100; gj++) {
for (var mj = 1; mj < 100; mj++) {
// for(var chicken=1;chicken<100;chicken++){
// if((gj+mj+chicken==100) && (5*gj+3*mj+chicken/3==100)){
// document.write('公鸡有'+gj+'只'+'<br>')
// document.write('母鸡有'+mj+'只'+'<br>')
// document.write('小鸡有'+chicken+'只'+'<br>')
// document.write('-----------------<br>')
// }
// }
chicken = 100 - mj - gj
if (5 * gj + 3 * mj + chicken / 3 == 100) {
console.log('公鸡:', gj, '母鸡:', mj, '小鸡:', chicken)
}
}
}
}
fun()
</script>
</body>