一、 函数的声明和调用
1.1 函数的介绍
函数是具有重复的代码块，由事件驱动或者调用才会执行。封装函数的目的是为了减少重复代码的书写，提高程序的可复用性。
1.2 函数的声明
使用关键字function声明
声明方式一（常用）：
function 函数名(参数列表){
函数体;
}
声明方式二：
var fn = function(参数列表){
函数体
}
1.3 函数调用
函数声明之后不会自动执行，我们需要调用它：
事件驱动
在脚本的任何位置书写函数名()
function fn2(a){ console.log(a); } fn2(10); //fn is not a function // fn(); // 函数的声明方式二 var fn = function () { console.log("Hello World!!"); } //函数调用 fn(); console.log("fn的数据类型：",typeof fn);//fn的数据类型： function </script></head><body>this)">点</button></body></html>
1
二、 变量的作用域
2.1全局作用域：
函数外的区域，函数外声明的变量也叫做全局变量；
全局变量，可以在脚本的任何位置进行调用，它随页面加载生成，页面关闭后销毁。
2.2 局部作用域：
声明的函数会形成一个自己的作用域，那么在函数内声明的变量就叫做局部变量。
局部变量，函数被调用时创建，调用完毕后销毁。
2.3 变量与函数的提升：
变量的调用顺序：先在当前作用域查找是否有这个变量，如果有就调用，如果没有就去父作用域查找，
依次向上，直到找到为止。就近原则。。。
函数表达式：即变量的方式声明的函数，只能进行变量的提升，函数不会提升
//声明一个全局变量num并赋值10;//全局变量在脚本的任何位置都可以 被调用到var num = 10;//调用函数//函数的提升：fn();//声明一个函数fn，形成一个局部作用域function fn(){ // var num; //变量的提升，预解析阶段会将变量的声明提升到当前作用于的最顶部 console.log("num:",num);//num:undefined //局部变量函数调用时创建，调用完毕后销毁 var num = 200; // num = 200; console.log("num:",num);// num:200}//调用全局变量numconsole.log("num:",num);//num = 10
1
2.4 未使用var声明的变量：
var num = 10;fn();function fn(){ console.log("num:",num);//num:10 //在函数内部没有使用var声明的变量，在js运行阶段，调用函数执行到这个变量的时候，这个变量会被当做全局变量使用 //注意：没有使用var声明的变量，不会进行变量的提升 //建议大家在使用时，尽量使用var关键字声明变量，避免全局变量的污染 num = 200; console.log("num:",num);// num:200}//调用全局变量numconsole.log("num:",num);//num = 200
1
三、函数的参数
形参：函数声明时，给的参数
实参：函数调用时，用来替换形参的参数
传参：函数调用时，将实参传入到形参位置的过程
//函数调用时，传入的参数，就叫做实参fn(10)fn(20.20)fn("Hello")fn(true)fn(null)//声明函数时括号的参数为形参，js中的形参不能确定参数的类型；只有当传入实参时，才能根据实际传入参数确定类型function fn(num){ console.log(num);}
1
//需求：求两个数的和// var a = 10,// b = 20,// sum1 = a + b;// console.log(sum1);//// var c = 100,// d = 200,// sum2 = a + b;// console.log(sum2);getSum(10,20);getSum(100,200);//封装函数，实现两个任意求和的功能function getSum(num1,num2) { var sum = num1 + num2; document.write(num1+"+"+num2+"="+sum+"<br>");}
1
四、函数的重载及arguments介绍
4.1 重载的概念：
在一个程序中，声明多个函数名相同，参数类型及参数的个数不同的函数，叫函数的重载；
但是，在js中，没有重载的概念，因为当声明多个相同的函数名时，后面的会覆盖前面的相同函数名。
我们可以通过某些方式来模拟函数的重载。
//求不同数量的数值的和sum1(10,20);//Nasum1(10,20,30);//60sum1(10,20,30,40);//60sum2(10,20,30);//60function sum1(num1,num2) { var result = num1 + num2; console.log(result);}function sum1(num1,num2,num3) { var result = num1 + num2 + num3; console.log(result); console.log(num3);}function sum2(num1,num2,num3) { var result = num1 + num2 + num3; console.log(result);}//JS中声明多个函数名相同的函数，后面的会覆盖前面的//当实际参数的数量，小于函数声明时的形参的数量，前面的会依次匹配，后面不够的会认为是undefined//当实际参数的数量，多于函数声明时形参的数量，会根据形参依次匹配前面的实参，多余的实参不要了//JS可以利用arguments模拟函数的重载
1
4.2 arguments对象：
arguments对象是我们JS中一个特殊的对象，它是一个类数组，具有索引值，索引从0开始依次递增，通过索引可以获取到对应的值* 具有属性length，获取参数的数量
fn();//arguments.length 0 长度为0，代表没有参数fn(1);//arguments.length 1fn(2,"Hello");//arguments.length 2fn(2,"Hello",10,40);//arguments.length 4function fn() { console.log("arguments.length",arguments.length); for (var i = 0; i < arguments.length; i++) { console.log("对应的索引",i,"的参数为：",arguments[i]); }}
1
4.3 arguments对象模拟函数重载
//我们前面已经知道，通过arguments对象可以遍历到每一个参数，那么此时思考通过这个特殊的对象，来进行不同数量的数值的求和var count = 0;function sum() { var result = 0; console.group("开始"+count++); for (var i = 0; i < arguments.length; i++) { console.log(arguments[i]) //将遍历到的每个参数数值累加到result上面 result += arguments[i];//result = result + arguments[i] } console.log("result",result); console.groupEnd();}sum(10);sum(10,20);sum(10,20,30);sum(10,20,30,40);
1
五、带返回值的函数
上面所写的都是直接从函数中打印结果，这样的话我们不能在外部对通过这个函数所获取的结果进行二次操作，那么如果想要对其进行二次操作的话，那么就需要将结果用return返回。这样，在调用函数时，得到的就是这个结果。
return关键字：
返回通过函数所要得到的值；
如果不想返回任何值，仅仅是为了结束函数的执行，那么也可以使用return跳出函数
面试题：return break continue的区别
可以将一个函数作为返回值，传递给另外一个函数。利于模块化编程
document.write( fn(10,20));function fn(num1,num2) { return num1 + num2;}
fn();function fn() { for (var i = 0; i < 10; i++) { if (i === 5){ // continue;//=> 0 1 2 3 4 6 7 8 9 "Hello JS!!" // break;//=>0 1 2 3 4 "Hello JS!!" return;//=>0 1 2 3 4 } console.log(i); } console.log("Hello JS!!");}
关注VX公众号“icketang” 免费领取华为荣耀商城项目实战视频教程
网友评论