Web前端系列技术之JavaScript基础（从入门开始）④

JavaScript基础学习四

前面三个章节主要学习了在开发项目过程中，JS脚本语言常常会用到的基本语法及语句，而对于一个项目开发而言，单凭这些是完全不够的；在实现前端交互功能的过程中，需要大量带有逻辑语句的结构体和变量；既然是大量需要，那么在开发的过程中如果不进行规范化的处理，就会造成代码大量冗余，甚至是程序逻辑的执行错误，面对这种问题，其相应的解决方式也就是今天所要介绍的 函数 ，那什么是函数呢？

函数：是由事件驱动的或者当它被调用时执行的可重复使用的代码块

由概念中得知，是执行可重复使用的代码块，可重复使用的意义就是在于减少了代码的冗余量；因此，函数使用的最大价值就是 提高代码的复用能力；

简单理解：函数可以把具有相同或相似逻辑的代码 “包裹” 起来，通过函数调用执行这些被 “包裹” 的代码逻辑，从而达到精简代码方便复用的目的

所以今天主要介绍的内容有：
一、函数的使用
二、函数的传参
三、函数返回值
四、作用域
五、匿名函数

---

一、函数的使用

在使用函数的同时，最重要的就是先要学会封装函数，封装函数简单理解就是将一个函数结构体打包，就像送外卖一样，只有将产品打包好了以后才能送出去；同样道理，只有在函数封装完成之后，才能被调用；而在封装的过程中，也往往存在 取 、装 两个过程，其中所谓的【取】指的就是 抽取 ，含义抽取文档中相同或相似的的代码；而【装】就是指 封装；

1. 函数声明

那么对于封装函数的过程中，首当其要的就是要声明函数，也就是所谓的创造所需要的函数逻辑；

基本语法结构：

function 函数名() {
     函数体
}
1
2
3

函数名命名规范：

1. 和变量命名基本一致；
2. 尽量小驼峰式命名法；
3. 前缀应该为动词；
4. 命名建议：常用动词约定；

例如：

//声明一个以getUserName为函数名的函数
function getUserName() {}
1
2

2. 函数调用

函数的调用俗称也就是正式使用所声明的函数，这也是函数使用的过程中极其重要的环节；

基本语法结构：

//函数调用，这些函数体内的代码逻辑会被执行
函数名()

//当函数名称很长的时候，往往是通过声明变量，然后直接调用变量即可
let 变量名 =  函数名()
1
2
3
4
5

在函数的调用过程中，函数的一次声明是可以被多次调用的，而且每一次调用都会将函数体中的代码逻辑重新执行一遍，譬如 alert() 、parseInt()；

⭐注意：在函数的使用过程中，光声明函数，不调用的话是不能正常使用的，只有调用，函数才会执行，否则在程序的运算顺序上是直接跳过的；

3. 函数体

有了函数声明，也有了函数的调用，那么函数所要实现的逻辑结构就是整个函数的内容，这部分内容的代码块就被称为函数体；当然，更官方的概念就是：

函数体 是函数的构成部分，它负责将相同或相似代码 “包裹” 起来，直到函数调用时函数体内的代码才会被执行；函数的功能代码都要写在函数体当中；

4. 函数使用的意义

函数的使用从实质上讲就是对部分代码块的复用，一个项目的开发过程中，有效的代码复用会大大提高开发效率，那么 代码复用 和之前学到的 循环代码 到底有什么样的区别呢？

区别：

1. 循环代码写完便立即执行，不能很方便的控制执行的位置；
2. 代码复用是可以随时调用的，随时执行的，并且可重复调用；

---

二、函数的传参

函数的声明和使用，其目的就是为了方便代码的复用，但是方便代码复用的同时，往往也会遇到方法结构体一样，但是参数不同的情况，这种只能实现唯一功能的问题，就需要使用函数的传参来解决了；

为什么需要有参数的函数?

① 若函数完成功能需要调用者传入数据，那么就需要用有参数的函数；
② 可以极大提高函数的灵活性；

1. 含参数的函数声明

在含有参数的函数中，和普通函数的最大区别就是，含有一个 参数列表 在函数名后面的（）中；

基本语法结构：

function 函数名(参数列表) {
     函数体
}
1
2
3

参数列表：
① 传入数据列表
② 声明这个函数需要传入几个数据
③ 多个数据用 逗号 隔开

代码样例：

//单个参数
function getUserName(a) {
     函数体
}

//多个参数
function getUserName(a,b,c,...) {
     函数体
}
1
2
3
4
5
6
7
8
9

2. 含参数的函数调用

对含有参数的函数进行调用时，一定要注意的就是同样也应具备参数列表，那么调用时的写法如下；

基本语法结构

函数名(传递参数列表)
1

调用函数时，如果需要传入多个数据，那么就将多个数据一并写出，并用逗号隔开，实现原理是：

代码样例：

//单个参数
getUserName(1)

//多个参数
getUserName(1,2,3,...)
1
2
3
4
5

3. 参数类别

在函数传参过程中，这其中的参数也是有很大区别的；在函数声明的过程里，因为要保证函数代码的复用，那么其灵活性就不能因为固定的参数而被限制，所以在函数声明的过程中通常使用到的参数都称为 形参；而相反，在函数调过程中，因为是属于已经开始使用函数的范畴了，所以这个过程这种所需要的参数是一定要具体的，且固定的；那么这种参数就被称为 实参；

① 形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）；
② 实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）；
③ 形参可以理解为是在这个函数内声明的变量，实参可以理解为是给这个变量赋值；
④ 开发中尽量保持形参和实参个数一致；
⑤ 曾经使用过的 alert('打印') 、parseInt('11')、Number('11') 本质上都是函数调用的传参；

注意：形参如果不被赋值，就是undefined，undefined 和任何数据类型求和都是NAN，但唯独和 字符串 求和，会存在隐式转换的将undefined转换成字符串，然后叠加；

---

三、函数返回值

概念：一个函数的函数名既是该函数的代表，也是一个变量。由于函数名变量通常用来把函数的处理结果数据返回给调用函数，即递归调用，所以一般把函数名变量称为返回值，函数的返回值类型是在定义函数时指定的；

简单理解：当调用某个函数，这个函数会返回一个结果出来，所返回的结果就叫做返回值；

其实，在此之前就有一些有返回值函数，譬如：prompt()、parseInt() 等，只是这些函数是JS底层内置的，是直接就可以使用的；当然也有一些是属于无返回值函数，譬如：alert() ；

而这些函数对于JS的开发来说都是特别重要的，所以要根据需求，来设定需不需要返回值；

1. 有返回值函数

函数很多情况下都是需要返回值的，那么实现有返回值函数的关键就是在于有没有 return 一个值；

基础语法结构：

return 数据
1

注意：
① 在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用；
② 函数内部只能出现 1 次 return，并且 return 后面代码不会再被执行，所以 return 后面的数据不要换行写；
③ return 会立即结束当前函数；
④ 函数可以没有 return，这种情况函数默认返回值为 undefined；

2. 有返回值的作用

① 函数执行后得到结果，结果是调用者想要拿到的（一句话，函数内部不需要输出结果，而是返回结果）；
② 对执行结果的 扩展性更高 ,可以让其他的程序使用这个结果；

注意：如何同返回多个值？

return 只能返回一个值，但是数组可以拥有多个值，所以可以返回一个数组，用数组存放多个值，然后调用方法之后，采用 数组名.[i] 的方式返回需要的具体值

---

四、作用域

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的 可用性的代码范围 就是这个名字的作用域；作用域 的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突；

简单理解：代码在某个范围内是可用的，即为作用域；

主要分为三种类别的作用域：全局作用域 、局部作用域 和 块级作用域；

1. 全局作用域：全局有效，作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的js文件；
2. 局部作用域：局部有效，作用于函数内的代码环境，就是局部作用域，因为跟函数有关系，所以也称为函数作用域；
3. 块级作用域：{} 内有效，块作用域由 { } 包括，if语句 和 for语句 里面的 { } 等；

1. 变量的作用域

在JavaScript中，根据作用域的不同，变量可以分为全局变量 、局部变量 和 块级变量；

1. 全局变量：函数外部 let 的变量，全局变量在任何区域都可以访问和修改；
2. 局部变量：函数内部 let的变量，局部变量只能在当前函数内部访问和修改；
3. 块级变量：{} 内部的let变量，let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问；

⭐注意：【变量其实有一个坑， 特殊情况】
① 如果函数内部或者块级作用域内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐，例：num = 10 ；
②函数内部的形参可以看做是局部变量；

2. 控制台查看

检查断点，任何查看变量的作用域，如图：

① 全局变量：Global

② 局部变量：Local

③ 块级变量：Block

3. 作用域链

在面对不同的作用域下，很大可能会存在变量命名冲突的情况，那么执行的顺序是怎样的就需要考虑到 作用域链 的问题了；

注意：不同的作用域下的同名变量是不会执行报错的，因为作用域是不同的；

特点：
① 只要是代码，就至少有一个作用域；
② 写在函数内部的局部作用域；
③ 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域；
④ 根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作 作用域链 ；

变量访问原则：就近原则，先从变量本身所处在的作用域进行查找，如果没有，在返回外层作用域进行查找，否则就返回 undefined ；

---

五、匿名函数

在函数的范畴中，可以大体分为 具名函数 和 匿名函数，如图所示：

在写法上面，通常采用函数表达式来书写匿名函数：

那么所谓的 函数表达式 就是将匿名函数赋值给一个变量，并且通过变量名称进行调用 我们将这个称为函数表达式；

语法：

let 变量名 = function () {}
1

调用：

变量名()
1

⭐注意：其中函数的形参和实参使用跟具名函数一致。

1. 立即执行函数

概念：立即执行函数就是无需调用直接执行的函数；

作用： 避免全局变量之间的污染，因为立即执行函数是没有全局变量的，只有局部变量；

基本语法结构：

//方式1
(function () { console.log(11) })();
//方式2
(function () { console.log(11) } () );
1
2
3
4

参数构成：
① 第一个小括号放形参，第二个小括号放实参；

注意：
① 即使他改成有名字的函数，也依然还是立即执行函数，因为它遵循了这个立即执行函数的结构（例如flexible.js）；
②多个立即执行函数要用；隔开，要不然会报错；

---

六、参数个数

在函数传参的过程中，异常情况主要分为两类；

1. 实参个数少于形参个数，那么函数所返回的结果就是 NaN ；
2. 实参个数多于形参个数 那么多余的实参将会被忽略掉了，返回值正常返回；

拓展：【伪数组】arguments只有在函数内有效，所以属于局部变量的范畴，之所以称为伪数组，就是因为它也可以返回像数组一样的返回值，但是比真数组少了一些 pop() 、push() 等方法；

---

总结

今天又是继续学习JS的一天，内容不多，但练习极为重要，今天所总结出来的所有知识，希望对大家有用，同时也希望这篇文章可以有一个好的展现量和得到更多人的支持，谢谢每一位浏览文章的人，要相信小柴码文，必是好文，欢迎各位 点赞+收藏+关注 啦! ! !

---

以上就是所要介绍的JavaScript基础学习的第四节内容，后续即将更新移动Web的学习目标。感谢关注和支持，让我们一起成长！

有兴趣可回顾一下Java系列技术之JavaScript基础（从入门开始）②的文章内容，再结合之前所介绍的CSS基础学习以及HTML基础学习，大脑里的内容会更加丰富而充实的，毕竟综合性复习和学习是更会加深印象的哟！！！