JavaScript 基础第四天

时间：2021-09-14 14:45:52

一、前言　　

　　昨天我们了解了Js的很重要的一个概念叫做函数，函数就是对于冗余和垃圾代码的一种封装机制。简单的讲就是为了能让程序更好更快的执行我们将一些重复性的代码提取，封装成一个有名字的小盒子，等到我们需要的时候我们可以直接将盒子拿出来使用。

 

二、引入

　　无论是在前端还是后台语言中函数都是一个个成功程序的最小封装模块，就像搭积木一样你需要不同的种的模块来组成一个成品。那么对于函数来说每一个就应该有它自己的特性以。

三、重点内容

　　㈠  函数的四种形式

　　　　① 有参数，无返回值（一般没有返回值的时候默认的返回值都是undefined）

function fun(a,b){
    console.log(a+b);
}

　　　　② 无参数，无返回值（一般用于有代码复用或者功能性代码段）

function fun(){
    console.log("Hello World");
}

　　　　③ 有参数，有返回值（推荐函数可以这么写）

function fun(a,b){
return a+b;
}

　　　　④ 无参数，有返回值

　　　　

function fun(a,b){
    console.log(a+b);
}
　　㈡ 函数的重载

　　

　　　　与后台语言不同，JS的函数中是没有函数重载的。说到重载我们就要稍微了解一下重载是什么意思了。

　　　　重载：即函数的命名相同，但是函数的形参个数或者数据类型的不同就会引起不同。简单的说就是在点名的时候有两个一模一样的名字，但是体型确实一胖一瘦。这两个人都是这个班的同学所以都是存在的。

　　　　在Js当中就没有重载这一个感念，那么很多人会问，如果如果我在工作的命名不小心相同了怎么办，那么请看下面的这段代码

 

function fun(a,b){
return a+b;
}
function fun(a,b,c){
    a = a||0;
    b = b||0;
    c = c||0;
return a+b+c;
}
console.log(fun(1,2));

　　　　我相信很多人去测试这段代码的时候输出的结果是3所以认为我上面说错了。但其实不然如果我们打开测试着工具的一步步调试的时候会发现，函数调用的时候是调用的参数3个函数。那么为什么又会等于3呢？因为我在这里面添加了短路运算来避免错误的出现。(不懂短路运算的请翻看Js第3天内容)。在Js中是没有重载的，像上面一样的定义第一次定义的就会被后面的所覆盖。

 

　　㈢ 选择结构

　　　　作用域：即变量所作用的区域；　

　　　　　　1) 全局作用域：全局作用域的变量就是全局变量。即在整个页面的任何位置都可以访问到到。（注意：在函数中不使用var定义的变量也是全局变量）。

　　　　　　2) 局部作用域：局部作用域的变量就是局部变量。只在函数中可以访问的。

　　㈣ 匿名函数与函数表达式方式

　　　　 在昨天的介绍中我们知道了函数定义的方式是function函数名([参数列表]){函数体}；其实还有一中定义的方式就是利用函数表达式命名

var fun = function(){
return 0;
}

 

　　　　这种方式类似于变量的定义，而其后面的函数没有名字就被称作匿名函数。它前面的变量名就可以看做是函数名。

　　　　

　　　　函数表表达式方式和函数命名方式的区别：

    1. 函数的声明中的函数有名字
    2. 函数表达式中的函数没有名字，是匿名函数，前面的变量的名字可以看做是函数的名字
    3. 在函数预解析的时候，会先将函数声明提前到作用域的最前面，而函数表达式不会提升
    4.  函数声明中的函数，可以在声明之前调用，但是函数表达式的函数必须在函数表达式之后调用
　　㈤ 函数的预解析

　　　　在程序真正执行之前，会将所有的代码扫描一遍，将变量的声明，参数提升到当前作用域的最前面。

function fun(a,b){
    console.log(c);
    console.log(a);
    console.log(b);
var c = 100;
}
fun(1,2);

　　　　在当前代码中console.log(c)会打印什么值呢，我想很多人跟我开始的想法一样，因为在下面定义了局部变量c为100，所以输出的时候应该是100.但其实我们都错了，因为函数要做预解析，所以会把变量的声明提到当前作用域的最前面如下所示：

 

function fun(a,b){
var c;
    console.log(c);
    console.log(a);
    console.log(b);
    c = 100;
}
fun(1,2);

 

 

 

　　　　所以c是不会有值得，因为它只有声明没有赋值所以返回的是undefined。

　　㈥ 自执行函数　　　　
var fun = function(){
    console.log("你好")
};

fun();
(function(){
console.log("你好");

}());

(function(){
    console.log("你好");

})();

 

　　　　因为我们利用了函数表达式的方式定义函数，所以当调用的时候我们可以把小括号前面的部分用赋值符号右面的部分代替，再将代替的部分用小括号括起来这样就形成了自执行函数。

　　　　特点：自执行函数是没有名字的，定以后马上调用。多用于一次性使用中。

　　㈦ 回调函数 
    var fun = function(a,b,ff){
return ff(a,b);
}
    console.log(fun(10,20,function(a,b){return a+b ;}))

 

 

　　　　

　　　　是不是看蒙了，那我们稍微分解一下

 function fn(a,b){
return a+b;
    }
var fun = function(a,b,ff){
return ff(a,b);
}
    console.log(fun(10,20,fn));

 

 

　　　　其实回调函数的本质就是把函数当做参数来传递。

 

四、总结

　　　　对于函数还是需要多加练习才可以绕明白，我觉得其中最终的一点就是一定要记住每个函数都是有返回值的，有时可能会打印但有时也不会打印。你需要多多的自己判断。

 

 

 

 

 

 

 

标签：

相关文章