学习函数,对于学生党而言,熟悉得不能再熟悉。
在代码中,函数是被设计为执行特定任务的代码块;把相同重复的流程打包,方便重复调用。我们得会创建一个函数并调用。
一、创建函数
1.基本方式定义函数:通过function关键字进行定义,其后是函数名、括号()、大括号{};
//语法格式:
function 函数名(参数1,参数2,参数3,......){
要执行的代码(函数体);
}
2.自变量方式定义函数:通过function关键词进行定义,其后是括号()、大括号{}。并赋值给一个变量,变量名就相当于函数名。
//语法格式:
var 变量名=function(参数1,参数2,参数3,......){
要执行的代码(函数体);
}
二、函数调用
语法格式:函数名();
1.当事件发生时(用户点击按钮时);
2.当JS代码调用时;
3.函数创建完成后自动调用();
//例子
<script>
(function cfb(){
for(var i=1;i<=9;i++){
for(var a=1;a<=i;a++){
document.write(i+"x"+a+"="+(i*a));
};
document.write("<br>");
};
})();//自动调用;
cfb();//调用函数;
</script>
三、函数的传参,形参和实参
形参:形式上的参数,没有实际值;
实参:实际有值的参数;
//例子
<script>
function jiafa(x,y){ //x,y就是形参
var jf=x+y;
alert(jf);
};
jiafa(12,15); //第一种:12,15就是实参
var a=10;
var b=20;
var c=30;
jiafa(a,b); //第二种:实际有值的参数;
jiafa(a,b,c); //第三种:c无法使用;
jiafa(a); //第四种:a无法使用;
</script>
四、函数返回值
返回执行结果,不会在页面中显示,需要用变量来接受。函数遇到return会立即返回结果,并终止函数。在函数外部使用变量来接收函数执行的结果。
五、函数中调用函数
<script>
function jiafa1(x,y){
var jf=x+y;
return jf;
};
function jiafa2(x,y,z){
var jf=x+y;
var re=chengfa(jf,z); //函数中调用函数
return re;
};
function chengfa(x,y){
var cf=x*y;
return cf;
};
//要求:(2+3)*4;
//方法一:
var a=jiafa1(2,3);
var b=chengfa(a,4);
//方法二:函数中调用函数
var b=jiafa2(2,3,4);
alert(b);
</script>
六、全局变量和局部变量
全局变量:函数外部声明的变量,在整个文档中都可用;
局部变量:函数内部用var声明的变量是局部变量,只能在函数内部调用;局部变量在函数执行完就从内存中删除,能用局部变量声明的,就不要用全局变量,提高效率;
注意:函数内部不用var声明,直接赋值方式声明的变量是全局变量。
<script>
//加强理解
//全局变量
var a="声明全局变量";
function z(){
document.write(a);
};
z();
//局部变量
function z(){
var a="声明局部变量";
};
z();
document.write(a);//无法输出;
//注意这种全局变量
function z(){
a="声明全局变量";
};
z();
document.write(a);
</script>
七、匿名函数(没有函数名)
第一种匿名函数:函数没有函数名,而是直接赋值给一个变量,通过变量调用或直接调用。注意:函数的调用语句,必须放在函数声明语句之后,正常的函数均可用。
//
<script>
z(); //函数调用,放在这里,不能输出;
var z=function(){
alert("这是第一种匿名函数");
};
z(); //可以输出;
</script>
第二种匿名函数:匿名函数的调用
1.自调用
<script>
(function(){
alert("这是第二种匿名函数");
})();
</script>
2.当事件发生时调用
<script>
window.onload=function(){ //window.onload窗口加载完毕事件
alert("这是第二种匿名函数")
};
</script>
3.函数中调用
<script>
setTimeout(function(){ //setTimeout定时器函数,有俩参数;
alert("这是第二种匿名函数");
},3000);
</script>
八、回调函数初识
回调函数:(callback函数),函数B作为参数传递到另一个函数A中,函数A执行函数B,函数B叫做回调函数。
//例子
<script>
//1.回家是主函数;发信息是回调函数;把“发信息函数”当成参数传给“回家函数”
function hj(a){
a();
};
function fxx(){
alert("亲,我已到家,爱你哟");
};
hj(fxx);
//2.回调函数练习1
function a(x,y){
return x+y;
};
function b(x,y){
return x/y;
};
function fn(x,y,m){
return m(x,y);
};
var re=fn(12,4,b);
alert(re);
//3.回调函数练习2
//(1)函数A执行函数B,函数B是回调函数
function a(x,y,z,m){
var re=x+y;
return m(re,z);
};
function b(x,y){
return x*y;
};
var c=a(2,3,4,b);
//(2)函数B执行函数A,函数A是回调函数
function a(x,y){
return x+y;
};
function b(x,y,z,m){
var re=m(x,y);
return re*z;
};
var c=b(2,3,4,a);
alert(c);
</script>
九、递归函数初识
递归函数:就是函数自己调用自己。注意:递归函数必须跳出条件,否则,就是死循环。
//例子
<script>
//1.例子一
var i=1;
function dg(){
alert("从前有座山,山里有座庙,庙里有个老和尚讲故事,讲的是:");
i++;
if(i<5){
dg();
};
};
dg();
//2.递归函数练习1,100以内连加
function lj(n){
if(n==1){
return n;
} else {
return n+lj(n-1);
};
};
var re=lj(100);
alert(re);
//3.递归函数练习2,任意数到任意数连加
function lj(m,n){
if(n==m){
return m;
} else {
return n+lj(m,--n); //注意:n--是错误的;
};
};
var a=prompt("输入最小的数");
var b=prompt("输入最大的数");
var re=lj(a,b);
alert(re);
</script>
十、内置功能函数
ECMAscript自带的函数,ECMAscript将我们常用的一些功能封装起来。我们不需要知道它是怎么实现的,只需要知道怎么调用即可。
1.Number()转换成数值类型;
2.String()转换成字符串类型;
3.Boolean()转换成布尔类型;
4.parseInt()将字符串转为整形;
//例子
alert();
prompt();
//(1)Number()
var a="123456";
var b=typeof Number(a);
alert(b);
//(2)String()
var a=123456;
var b=typeof String(a);
alert(b);
//(3)Boolean()
var a=0;
var b=typeof Boolean(a);
var c=Boolean(a);
alert(c)
//(4)parseInt()
var a="123px";
var b=typeof parseInt(a);
var c=parseInt(a);
alert(b);
alert(c);
对于函数,我们先掌握这些。后续进阶会继续补充。