JavaScript基础学习四
前面三个章节主要学习了在开发项目过程中,JS脚本语言常常会用到的基本语法及语句,而对于一个项目开发而言,单凭这些是完全不够的;在实现前端交互功能的过程中,需要大量带有逻辑语句的结构体和变量;既然是大量需要,那么在开发的过程中如果不进行规范化的处理,就会造成代码大量冗余,甚至是程序逻辑的执行错误,面对这种问题,其相应的解决方式也就是今天所要介绍的 函数 ,那什么是函数呢?
函数:是由事件驱动的或者当它被调用时执行的可重复使用的代码块
由概念中得知,是执行可重复使用的代码块,可重复使用的意义就是在于减少了代码的冗余量;因此,函数使用的最大价值就是 提高代码的复用能力;
简单理解:函数可以把具有相同或相似逻辑的代码 “包裹” 起来,通过函数调用执行这些被 “包裹” 的代码逻辑,从而达到精简代码方便复用的目的
所以今天主要介绍的内容有:
一、函数的使用
二、函数的传参
三、函数返回值
四、作用域
五、匿名函数
一、函数的使用
在使用函数的同时,最重要的就是先要学会封装函数,封装函数简单理解就是将一个函数结构体打包,就像送外卖一样,只有将产品打包好了以后才能送出去;同样道理,只有在函数封装完成之后,才能被调用;而在封装的过程中,也往往存在 取 、装 两个过程,其中所谓的【取】指的就是 抽取 ,含义抽取文档中相同或相似的的代码;而【装】就是指 封装;
1. 函数声明
那么对于封装函数的过程中,首当其要的就是要声明函数,也就是所谓的创造所需要的函数逻辑;
基本语法结构:
function 函数名() {
函数体
}
函数名命名规范:
- 和变量命名基本一致;
- 尽量小驼峰式命名法;
- 前缀应该为动词;
- 命名建议:常用动词约定;
动词 | 含义 |
---|---|
can | 判断是否可执行某个动作 |
has | 判断是否含有某个值 |
is | 判断是否为某个值 |
get | 获取某个值 |
set | 设置某个值 |
load | 加载某些数据 |
例如:
//声明一个以getUserName为函数名的函数
function getUserName() {}
2. 函数调用
函数的调用俗称也就是正式使用所声明的函数,这也是函数使用的过程中极其重要的环节;
基本语法结构:
//函数调用,这些函数体内的代码逻辑会被执行
函数名()
//当函数名称很长的时候,往往是通过声明变量,然后直接调用变量即可
let 变量名 = 函数名()
在函数的调用过程中,函数的一次声明是可以被多次调用的,而且每一次调用都会将函数体中的代码逻辑重新执行一遍,譬如 alert()
、parseInt()
;
⭐注意:在函数的使用过程中,光声明函数,不调用的话是不能正常使用的,只有调用,函数才会执行,否则在程序的运算顺序上是直接跳过的;
3. 函数体
有了函数声明,也有了函数的调用,那么函数所要实现的逻辑结构就是整个函数的内容,这部分内容的代码块就被称为函数体;当然,更官方的概念就是:
函数体 是函数的构成部分,它负责将相同或相似代码 “包裹” 起来,直到函数调用时函数体内的代码才会被执行;函数的功能代码都要写在函数体当中;
4. 函数使用的意义
函数的使用从实质上讲就是对部分代码块的复用,一个项目的开发过程中,有效的代码复用会大大提高开发效率,那么 代码复用 和之前学到的 循环代码 到底有什么样的区别呢?
区别:
- 循环代码写完便立即执行,不能很方便的控制执行的位置;
- 代码复用是可以随时调用的,随时执行的,并且可重复调用;
二、函数的传参
函数的声明和使用,其目的就是为了方便代码的复用,但是方便代码复用的同时,往往也会遇到方法结构体一样,但是参数不同的情况,这种只能实现唯一功能的问题,就需要使用函数的传参来解决了;
为什么需要有参数的函数?
① 若函数完成功能需要调用者传入数据,那么就需要用有参数的函数;
② 可以极大提高函数的灵活性;
1. 含参数的函数声明
在含有参数的函数中,和普通函数的最大区别就是,含有一个 参数列表
在函数名后面的()
中;
基本语法结构:
function 函数名(参数列表) {
函数体
}
参数列表:
① 传入数据列表
② 声明这个函数需要传入几个数据
③ 多个数据用 逗号
隔开
代码样例:
//单个参数
function getUserName(a) {
函数体
}
//多个参数
function getUserName(a,b,c,...) {
函数体
}
2. 含参数的函数调用
对含有参数的函数进行调用时,一定要注意的就是同样也应具备参数列表,那么调用时的写法如下;
基本语法结构
函数名(传递参数列表)
调用函数时,如果需要传入多个数据,那么就将多个数据一并写出,并用逗号隔开,实现原理是:
代码样例:
//单个参数
getUserName(1)
//多个参数
getUserName(1,2,3,...)
3. 参数类别
在函数传参过程中,这其中的参数也是有很大区别的;在函数声明的过程里,因为要保证函数代码的复用,那么其灵活性就不能因为固定的参数而被限制,所以在函数声明的过程中通常使用到的参数都称为 形参;而相反,在函数调过程中,因为是属于已经开始使用函数的范畴了,所以这个过程这种所需要的参数是一定要具体的,且固定的;那么这种参数就被称为 实参;
① 形参:声明函数时写在函数名右边小括号里的叫形参(形式上的参数);
② 实参:调用函数时写在函数名右边小括号里的叫实参(实际上的参数);
③ 形参可以理解为是在这个函数内声明的变量,实参可以理解为是给这个变量赋值;
④ 开发中尽量保持形参和实参个数一致;
⑤ 曾经使用过的 alert('打印')
、parseInt('11')
、Number('11')
本质上都是函数调用的传参;
注意:形参如果不被赋值,就是
undefined
,undefined
和任何数据类型求和都是NAN
,但唯独和字符串
求和,会存在隐式转换的将undefined转换成字符串,然后叠加;
三、函数返回值
概念:一个函数的函数名既是该函数的代表,也是一个变量。由于函数名变量通常用来把函数的处理结果数据返回给调用函数,即递归调用,所以一般把函数名变量称为返回值,函数的返回值类型是在定义函数时指定的;
简单理解:当调用某个函数,这个函数会返回一个结果出来,所返回的结果就叫做返回值;
其实,在此之前就有一些有返回值函数,譬如:prompt()
、parseInt()
等,只是这些函数是JS底层内置的,是直接就可以使用的;当然也有一些是属于无返回值函数,譬如:alert()
;
而这些函数对于JS的开发来说都是特别重要的,所以要根据需求,来设定需不需要返回值;
1. 有返回值函数
函数很多情况下都是需要返回值的,那么实现有返回值函数的关键就是在于有没有 return
一个值;
基础语法结构:
return 数据
注意:
① 在函数体中使用 return
关键字能将内部的执行结果交给函数外部使用;
② 函数内部只能出现 1 次 return
,并且 return 后面代码不会再被执行,所以 return
后面的数据不要换行写;
③ return
会立即结束当前函数;
④ 函数可以没有 return
,这种情况函数默认返回值为 undefined
;
2. 有返回值的作用
① 函数执行后得到结果,结果是调用者想要拿到的(一句话,函数内部不需要输出结果,而是返回结果);
② 对执行结果的 扩展性更高 ,可以让其他的程序使用这个结果;
注意:如何同返回多个值?
return
只能返回一个值,但是数组
可以拥有多个值,所以可以返回一个数组,用数组存放多个值,然后调用方法之后,采用 数组名.[i] 的方式返回需要的具体值
四、作用域
通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的 可用性的代码范围 就是这个名字的作用域;作用域 的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突;
简单理解:代码在某个范围内是可用的,即为作用域;
主要分为三种类别的作用域:全局作用域 、局部作用域 和 块级作用域;
- 全局作用域:全局有效,作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的js文件;
- 局部作用域:局部有效,作用于函数内的代码环境,就是局部作用域,因为跟函数有关系,所以也称为函数作用域;
- 块级作用域:{} 内有效,块作用域由 { } 包括,
if语句
和for语句
里面的{ }
等;
1. 变量的作用域
在JavaScript中,根据作用域的不同,变量可以分为全局变量 、局部变量 和 块级变量;
- 全局变量:函数外部
let
的变量,全局变量在任何区域都可以访问和修改; - 局部变量:函数内部
let
的变量,局部变量只能在当前函数内部访问和修改; - 块级变量:
{}
内部的let变量,let定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问;
⭐注意:【变量其实有一个坑, 特殊情况】
① 如果函数内部或者块级作用域内部,变量没有声明,直接赋值,也当全局变量看,但是强烈不推荐,例:num = 10
;
②函数内部的形参可以看做是局部变量;
2. 控制台查看
检查断点,任何查看变量的作用域,如图:
① 全局变量:Global
② 局部变量:Local
③ 块级变量:Block
3. 作用域链
在面对不同的作用域下,很大可能会存在变量命名冲突的情况,那么执行的顺序是怎样的就需要考虑到 作用域链 的问题了;
注意:不同的作用域下的同名变量是不会执行报错的,因为作用域是不同的;
特点:
① 只要是代码,就至少有一个作用域;
② 写在函数内部的局部作用域;
③ 如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域;
④ 根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,就称作 作用域链 ;
变量访问原则:就近原则,先从变量本身所处在的作用域进行查找,如果没有,在返回外层作用域进行查找,否则就返回 undefined
;
五、匿名函数
在函数的范畴中,可以大体分为 具名函数 和 匿名函数,如图所示:
在写法上面,通常采用函数表达式来书写匿名函数:
那么所谓的 函数表达式 就是将匿名函数赋值给一个变量,并且通过变量名称进行调用 我们将这个称为函数表达式;
语法:
let 变量名 = function () {}
调用:
变量名()
⭐注意:其中函数的形参和实参使用跟具名函数一致。
1. 立即执行函数
概念:立即执行函数就是无需调用直接执行的函数;
作用: 避免全局变量之间的污染,因为立即执行函数是没有全局变量的,只有局部变量;
基本语法结构:
//方式1
(function () { console.log(11) })();
//方式2
(function () { console.log(11) } () );
参数构成:
① 第一个小括号放形参,第二个小括号放实参;
注意:
① 即使他改成有名字的函数,也依然还是立即执行函数,因为它遵循了这个立即执行函数的结构(例如flexible.js);
②多个立即执行函数要用;隔开,要不然会报错;
六、参数个数
在函数传参的过程中,异常情况主要分为两类;
- 实参个数少于形参个数,那么函数所返回的结果就是
NaN
; - 实参个数多于形参个数 那么多余的实参将会被忽略掉了,返回值正常返回;
拓展:【伪数组】
arguments
只有在函数内有效,所以属于局部变量的范畴,之所以称为伪数组,就是因为它也可以返回像数组一样的返回值,但是比真数组少了一些pop()
、push()
等方法;
总结
今天又是继续学习JS的一天,内容不多,但练习极为重要,今天所总结出来的所有知识,希望对大家有用,同时也希望这篇文章可以有一个好的展现量和得到更多人的支持,谢谢每一位浏览文章的人,要相信小柴码文,必是好文,欢迎各位 点赞+收藏+关注 啦! ! !
以上就是所要介绍的JavaScript基础学习的第四节内容,后续即将更新移动Web的学习目标。感谢关注和支持,让我们一起成长!
有兴趣可回顾一下Java系列技术之JavaScript基础(从入门开始)②的文章内容,再结合之前所介绍的CSS基础学习以及HTML基础学习,大脑里的内容会更加丰富而充实的,毕竟综合性复习和学习是更会加深印象的哟!!!