【JS】Chapter4-函数

最新推荐文章于 2024-07-08 16:22:29 发布

江湖人称菠萝包

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量48

点赞数

分类专栏：【HTML & CSS & JS】相关文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/github_38647413/article/details/134106098

版权

【HTML & CSS & JS】相关专栏收录该内容

33 篇文章 1 订阅

订阅专栏

站在巨人的肩膀上

黑马程序员前端JavaScript入门到精通全套视频教程，javascript核心进阶ES6语法、API、js高级等基础知识和实战教程

（四）函数

1. 函数

1.1 为什么需要函数

函数：
- function，是被设计为执行特定任务的代码块。
说明：
- 函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用。
- 比如我们前面使用的 alert() 、 prompt() 和 console.log()都是一些 js 函数，只不过已经封装好了，我们直接使用的。

1.2 函数使用

函数的声明语法
```
function 函数名() {
    函数体
}
```

例子：

function sayHi() {
    document.write('hai~~')
}

函数名命名规范
- 和变量命名基本一致
- 尽量小驼峰式命名法
- 前缀应该为动词
- 命名建议：常用动词约定
动词含义
can 判断是否可执行某个动作
has 判断是否含义某个值
is 判断是否为某个值
get 获取某个值
set 设置某个值
load 加载某些数据
函数的调用语法
```
// 函数调用，这些函数体内的代码逻辑会被执行
函数名()
```
- 注意：声明（定义）的函数必须调用才会真正被执行，使用 () 调用函数
- 函数一次声明可以多次调用，每一次函数调用函数体里面的代码会重新执行一次。
- 我们曾经使用的 alert() , parseInt() 这种名字后面跟小括号的本质都是函数的调用。
函数体
- 函数体是函数的构成部分，它负责将相同或相似代码“包裹”起来，直到函数调用时函数体内的代码才会被执行。函数的功能代码都要写在函数体当中。

动词	含义
can	判断是否可执行某个动作
has	判断是否含义某个值
is	判断是否为某个值
get	获取某个值
set	设置某个值
load	加载某些数据

1.3 函数传参

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

声明语法

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

参数列表
- 传入数据列表
- 声明这个函数需要传入几个数据
- 多个数据用逗号隔开
调用函数时，需要传入几个数据就写几个，用逗号隔开

例子：

function getSum(num1, num2) {
    document.write(num1 + num2)
}

getSum(10, 20)

形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）
实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）
形参可以理解为是在这个函数内声明的变量（比如 num1 = 10）实参可以理解为是给这个变量赋值
开发中尽量保持形参和实参个数一致
我们曾经使用过的 alert(‘打印’), parseInt(‘11’), Number(‘11’) 本质上都是函数调用的传参

1.3.1 函数传参——参数默认值

形参：可以看做变量，但是如果一个变量不给值，默认是什么？
- undefined。但是如果做用户不输入实参，刚才的案例，则出现 undefined + undefined 结果是什么？
- NaN。我们可以改进下，用户不输入实参，可以给形参默认值，可以默认为 0, 这样程序更严谨，可以如下操作：
```
function getSum(x = 0, y = 0) {
    document.write(x + y)
}
```
- 说明：这个默认值只会在缺少实参参数传递时才会被执行，所以有参数会优先执行传递过来的实参, 否则默认为 undefined

1.4 函数返回值

当函数需要返回数据出去时，用return关键字。

例子：

function getSum(x, y) {
    return x + y
}
let num = getSum(10, 30)

细节：
- 在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
- return 后面代码不会再被执行，会立即结束当前函数，所以 return 后面的数据不要换行写
- return函数可以没有 return，这种情况函数默认返回值为 undefined
- return后面不接数据或者函数内不写return，函数的返回值是undefined
断点调试：进入函数内部看执行过程 F11
函数细节补充
- 两个相同的函数后面的会覆盖前面的函数
- 在Javascript中，实参的个数和形参的个数可以不一致
  - 如果形参过多，会自动填上undefined (了解即可)
  - 如果实参过多，那么多余的实参会被忽略(函数内部有一个arguments,里面装着所有的实参)
- 函数一旦碰到return就不会在往下执行了，函数的结束用return

1.5 作用域

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。
作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。
全局作用域（全局有效）：作用于所有代码执行的环境(整个 script 标签内部) 或者一个独立的 js 文件。
局部作用域（局部有效）：作用于函数内的代码环境，就是局部作用域。因为跟函数有关系，所以也称为函数作用域。
在JavaScript中，根据作用域的不同，变量可以分为：
- 全局变量：函数外部 let 的变量。全局变量在任何区域都可以访问和修改。
- 局部变量：函数内部 let 的变量。局部变量只能在当前函数内部访问和修改。
变量有一个坑，特殊情况：
- 如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐
- 但是有一种情况，函数内部的形参可以看做是局部变量。
变量的访问原则
- 只要是代码，就至少有一个作用域
- 写在函数内部的局部作用域
- 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
- 访问原则：在能够访问到的情况下，先局部，局部没有再找全局
作用域链：采取就近原则的方式来查找变量最终的值

1.6 匿名函数

函数可以分为：

具名函数

// 声明
function fn()
{}

// 调用
fn()

匿名函数
```
function() {}
```

匿名函数：没有名字的函数, 无法直接使用。使用方式：
- 函数表达式
- 立即执行函数

1.6.1 函数表达式

将匿名函数赋值给一个变量，并且通过变量名称进行调用。我们将这个称为函数表达式。

语法：

let fn = function() {
    // 函数体
}

// 调用
fn()    // 函数名()

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

使用场景：后期 web API 会使用：

<body>
    <button>点击我</button>
    <script>
        let btn = document.querySelector('button');
        btn.addEventListener(function() {
            alert('弹出')
        })
    </script>
</body>

1.6.2 立即执行函数

场景介绍: 避免全局变量之间的污染

语法：

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

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

// 无需调用，立即执行，其实本质已经调用了

注意：多个立即执行函数要用 ; 隔开，要不然会报错

2. 综合案例

2.1 逻辑中断：

开发中，还会见到以下的写法：

function getSum(x, y) {
    x = x || 0
    y = y || 0
    console.log(x + y)
}

其实类似参数的默认值写法

2.1.1 逻辑运算符里的短路

短路：只存在于 && 和 || 中，当满足一定条件会让右边代码不执行

符号短路条件
&& 左边为false就短路
|| 左边为true就短路
原因：通过左边能得到整个式子的结果，因此没必要再判断右边
运算结果：无论 && 还是 ||，运算结果都是最后被执行的表达式值，一般用在变量赋值

符号	短路条件
`&&`	左边为false就短路
`\|\|`	左边为true就短路

例子：

(function flexible(window, document) {
    // window.devicePixelRatio 获取当前设备的 dpr
    // 获取不到，则默认取值为 1
    // 移动端获取为 2，则执行 2
    var dpr = window.devicePixelRatio || 1
}(window, document))

2.1.2 转换为Boolean型

显示转换：

Boolean(内容)
- 记忆： ‘’、0、undefined、null、false、NaN 转换为布尔值后都是false, 其余则为 true

例子：

console.log(false && 20)        // false
console.log(5 < 3 && 20)        // false
console.log(undefined && 20)    // undefined
console.log(null && 20)         // null
console.log(0 && 20)            // 0
console.log(10 && 20)           // 20

console.log(false || 20)        // 20
console.log(5 < 3 || 20)        // 20
console.log(undefined || 20)    // 20
console.log(null || 20)         // 20
console.log(0 || 20)            // 20
console.log(10 || 20)           // 20

隐式转换：

有字符串的加法 “” + 1 ，结果是 “1”
减法 -（像大多数数学运算一样）只能用于数字，它会使空字符串 “” 转换为 0
null 经过数字转换之后会变为 0
undefined 经过数字转换之后会变为 NaN

例子：

console.log('' - 1)             // -1
console.log('pink老师' - 1)     // NaN
console.log(null + 1)           // 1
console.log(undefined + 1)      // NaN
console.log(NaN + 1)            // NaN

console.log(null == undefined)  // true
console.log(null === undefined) // false

江湖人称菠萝包

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JS】Chapter4-函数

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。全局作用域（全局有效）：作用于所有代码执行的环境(整个 script 标签内部) 或者一个独立的 js 文件。局部作用域（局部有效）：作用于函数内的代码环境，就是局部作用域。运算结果：无论 && 还是 ||，运算结果都是最后被执行的表达式值，一般用在变量赋值。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。作用域链：采取就近原则的方式来查找变量最终的值。
复制链接

扫一扫