当前位置：首页 > news >正文

JavaScript 基础学习笔记（五）：函数、作用域、匿名函数

news 2025/11/9 5:22:51

一、函数

1.1 声明和调用

1.2 形参和实参

1.3 返回值

二、作用域

2.1 全局作用域

2.2 局部作用域

三、匿名函数

3.1 函数表达式

3.2 立即执行函数

一、函数

理解函数的封装特性，掌握函数的语法规则

1.1 声明和调用

函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用。

声明（定义）一个完整函数包括关键字、函数名、形式参数、函数体、返回值5个部分

调用

声明（定义）的函数必须调用才会真正被执行，使用 () 调用函数。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 声明和调用</title>
</head>
<body><script>// 声明（定义）了最简单的函数，既没有形式参数，也没有返回值function sayHi() {console.log('嗨~')}// 函数调用，这些函数体内的代码逻辑会被执行// 函数名()sayHi()// 可以重复被调用，多少次都可以sayHi()</script>
</body>
</html>

参数

通过向函数传递参数，可以让函数更加灵活多变，参数可以理解成是一个变量。

声明（定义）一个功能为打招呼的函数

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 函数参数</title>
</head>
<body><script>// 声明（定义）一个功能为打招呼的函数// function sayHi() {//   console.log('嗨~')// }// 调用函数// sayHi()// 这个函数似乎没有什么价值，除非能够向不同的人打招呼// 这就需要借助参数来实现了function sayHi(name) {// 参数 name 可以被理解成是一个变量console.log(name)console.log('嗨~' + name)}// 调用 sayHi 函数，括号中多了 '小明'// 这时相当于为参数 name 赋值了sayHi('小明')// 结果为 小明// 再次调用 sayHi 函数，括号中多了 '小红'// 这时相当于为参数 name 赋值了sayHi('小红') // 结果为 小红</script>
</body>
</html>

总结：

声明（定义）函数时的形参没有数量限制，当有多个形参时使用 , 分隔
调用函数传递的实参要与形参的顺序一致

1.2 形参和实参

形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）

实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）

形参可以理解为是在这个函数内声明的变量（比如 num1 = 10）实参可以理解为是给这个变量赋值

开发中尽量保持形参和实参个数一致

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 函数参数</title>
</head>
<body><script>// 声明（定义）一个计算任意两数字和的函数// 形参 x 和 y 分别表示任意两个数字，它们是两个变量function count(x, y) {console.log(x + y);}// 调用函数，传入两个具体的数字做为实参// 此时 10 赋值给了形参 x// 此时 5  赋值给了形参 ycount(10, 5); // 结果为 15</script>
</body>
</html>

1.3 返回值

函数的本质是封装（包裹），函数体内的逻辑执行完毕后，函数外部如何获得函数内部的执行结果呢？要想获得函数内部逻辑的执行结果，需要通过 return 这个关键字，将内部执行结果传递到函数外部，这个被传递到外部的结果就是返回值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 函数返回值</title>
</head>
<body><script>// 定义求和函数function count(a, b) {let s = a + b// s 即为 a + b 的结果// 通过 return 将 s 传递到外部return s}// 调用函数，如果一个函数有返回值// 那么可将这个返回值赋值给外部的任意变量let total = count(5, 12)</script>
</body>
</html>

总结：

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

二、作用域

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。

作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

2.1 全局作用域

作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件

处于全局作用域内的变量，称为全局变量

2.2 局部作用域

作用于函数内的代码环境，就是局部作用域。因为跟函数有关系，所以也称为函数作用域。

处于局部作用域内的变量称为局部变量

如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐

但是有一种情况，函数内部的形参可以看做是局部变量。

三、匿名函数

函数可以分为具名函数和匿名函数

匿名函数：没有名字的函数,无法直接使用。

3.1 函数表达式

// 声明
let fn = function() { console.log('函数表达式')
}
// 调用
fn()

3.2 立即执行函数

(function(){ xxx  })();
(function(){xxxx}());

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

多个立即执行函数之间用分号隔开

JavaScript 基础学习笔记（五）：函数、作用域、匿名函数

目录一、函数 1.1 声明和调用 1.2 形参和实参 1.3 返回值二、作用域 2.1 全局作用域 2.2 局部作用域三、匿名函数 3.1 函数表达式 3.2 立即执行函数一、函数理解函数的封装特性，掌握函数的语法规则 1.1 声明和调用函数可以把具有相同或相似逻辑的代…...

编程日记 2024/2/29 14:00:50

Qt环境配置VTK

Qt与VTK的结合为开发者提供了强大的跨平台图形界面开发能力和三维可视化处理能力。本教程旨在详细介绍如何配置Qt环境以使用VTK库，从而为开发者打造高效、强大的三维可视化应用。一、准备工作在开始之前，确保您的开发环境中已经安装了Qt和CMake。Qt提…...

编程日记 2024/2/29 13:59:49

腾讯云最新活动_腾讯云促销优惠_代金券-腾讯云官网入口

腾讯云服务器多少钱一年？62元一年起，2核2G3M配置，腾讯云2核4G5M轻量应用服务器218元一年、756元3年，4核16G12M服务器32元1个月、312元一年，8核32G22M服务器115元1个月、345元3个月，腾讯云服务器网txyfwq.co…...

编程日记 2024/2/29 13:58:48

如何创建自己的Spring Boot Starter并为其编写单元测试

当我们想要封装一些自定义功能给别人使用的时候，创建Spring Boot Starter的形式是最好的实现方式。如果您还不会构建自己的Spring Boot Starter的话，本文将带你一起创建一个自己的Spring Boot Starter。快速入门创建一个新的 Maven 项目。第三方封装的…...

编程日记 2024/2/29 13:57:47

数据分析---常见处理逻辑

目录数据清洗数据转换数据聚合数据筛选增删改查（以查为例）数据清洗去除重复值：使用DISTINCT关键字去除重复行。//这将返回一个包含所有不重复城市的结果集 SELECT DISTINCT city FROM students;处理缺失值：使用IS NULL或IS NOT NULL判断是否为空值，并使用COALESCE或CASE…...

编程日记 2024/2/29 13:54:43

2024-02-26（金融AI行业概览与大数据生态圈）

1.最开始的风控是怎么做的？ 人审吃业务经验不能大批量处理，效率低下不适用于移动互联网的金融场景 2.建模的概念建模就是构造一个数学公式，能将我们手上有的数据输入进去，通过计算得到一些预测结果。比如初高中学习的…...

编程日记 2024/2/29 13:49:36

git忽略某些文件(夹)更改说明

概述在项目中，常有需要忽略的文件、文件夹提交到代码仓库中，在此做个笔录。一、在项目根目录内新建文本文件，并重命名为.gitignore，该文件语法如下 # 以#开始的行，被视为注释. # 忽略掉所有文件名是 a.txt的文件. a.txt # 忽略所有生成的 java文件, *.java # a.j…...

编程日记 2024/2/29 13:46:33

python爬虫实战：获取电子邮件和联系人信息

引言在数字时代，电子邮件和联系人信息成为了许多企业和个人重要的资源，在本文中，我们将探讨如何使用Python爬虫从网页中提取电子邮件和联系人信息，并附上示例代码。目录引言二、准备工作你可以使用以下命令来安装这些库&a…...

编程日记 2024/2/29 13:44:31

post请求同时上传文件并传递其他参数的前后端写法

最近有一需求，post请求从前端上传一个文件同时传递一个参数，多次实验后记录下两种写法： 方法一： 前端：重点是设置请求头代码如下： getfile(event) {//input框输入文件let file event.target.files[0];l…...

编程日记 2024/2/29 13:41:28

【数仓】基本概念、知识普及、核心技术

一、数仓基本概念数仓的定义： 数据仓库（Data Warehouse，简称DW或DWH）是一个面向主题的、集成的、相对稳定的、反映历史变化的数据集合，用于支持管理决策。简言之，它是一个大型存储库，用于存储来…...

编程日记 2024/2/29 13:40:27

离线安装脚本 # ---------------离线安装docker------------------- rpm -Uvh --force --nodeps *.rpm# 修改docker拉取源为国内 rm -rf /etc/docker mkdir -p /etc/docker touch /etc/docker/daemon.json cat >/etc/docker/daemon.json<<EOF{"registry-mirro…...

编程日记 2024/2/29 13:37:23

Linux的gdb调试

文章目录一、编译有调试信息的目标文件二、启动gdb调试文件1、查看内容list/l：l 文件名:行号/函数名，l 行号/函数名2、打断点b：b文件名:行号/函数名，b 行号/函数名与查看断点info/i：info b3、删除断点d：…...

编程日记 2024/2/29 13:36:22

IO多路复用-select模型

IO多路复用（IO Multiplexing）是一种高效的网络编程模型，可以同时监控多个文件描述符（包括套接字等），并在有数据可读或可写时进行通知。其中，select模型是最常用和最早引入的一种IO多路复用模型。…...

编程日记 2024/2/29 13:34:20

班级事务管理系统设计与实现

** 🍅点赞收藏关注 → 私信领取本源代码、数据库🍅 本人在Java毕业设计领域有多年的经验，陆续会更新更多优质的Java实战项目希望你能有所收获，少走一些弯路。🍅关注我不迷路🍅** 一、设计说明 1.1 选题…...

编程日记 2024/2/29 13:32:18

金三银四面试必问：Redis真的是单线程吗？

文章目录 01 Redis中的多线程1）redis-server：2）jemalloc_bg_thd3）bio_xxx： 02 I/O多线程03 Redis中的多进程04 结论▼延伸阅读由面试题“Redis是否为单线程”引发的思考作者：李乐来源：IT阅读…...

编程日记 2024/2/29 13:31:16

notejs+nvm+angular+typescript.js环境 Hertzbeat 配置

D:\Program Files\nodejs\ D:\Users\Administrator\AppData\Roaming\nvm nvm命令提示 nvm arch：显示node是运行在32位还是64位。 nvm install <version> [arch] ：安装node， version是特定版本也可以是最新稳定版本latest。可选参…...

编程日记 2024/2/29 13:30:15

docker安装单机版canal和使用

说明：我安装的组件架构如下： 1、准备一台虚拟机，192.168.2.223，我安装的时候，docker只支持canal1.1.6版本，1.1.7无法使用docker安装.还有一点要补充，就是1.1.6好像不支持es8.0以上版本&#x…...

编程日记 2024/2/29 13:28:12

qt_xml文件

文章内容简单介绍xml文件的增删改查写生成和读取xml文件的例子增删改查 Qt提供了QDomDocument类来操作XML文件。增加节点： QDomElement root = doc.createElement("root"); doc.appendChild(root);QDomElement element = doc.createElement("element"…...

编程日记 2024/2/29 13:25:08

【DAY05 软考中级备考笔记】线性表，栈和队列，串数组矩阵和广义表

线性表，栈和队列，串数组矩阵和广义表 2月28日 – 天气：阴转晴时隔好几天没有学习了，今天补上。明天发工资，开心😄 1. 线性表 1.1 线性表的结构首先线性表的结构分为物理结构和逻辑结构物理结构按照实…...

编程日记 2024/2/29 13:23:06

AutoGen Studio助力打造私人GPTs

微软最近在开源项目里的确挺能整活儿啊！这次我介绍的是AutoGen Studio，我认为这个项目把AutoGen可用性又拔高了一个层次的项目项目给自己的定义是交互式的多Agent workflow 项目地址：autogen/samples/apps/autogen-studio at main microsoft/autogen (github.com) 首先我…...

编程日记 2024/2/29 13:21:03

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇，在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下： 【Note】：如果你已经完成安装等操作，可以只执行第一篇博客中 2. 新建一个空白游戏项目章节操作，重…...

编程新知 2025/11/9 1:32:12

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令范围操作示例指定行范围处理复合命令示例实用技…...

编程新知 2025/10/18 13:49:11

龙虎榜——20250610

上证指数放量收阴线，个股多数下跌，盘中受消息影响大幅波动。深证指数放量收阴线形成顶分型，指数短线有调整的需求，大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技代表标的：御银股份、雄帝科技驱动…...

编程新知 2025/11/7 16:59:25

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石，设计模式在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类：一、创建型模式（5种） 1. 单例模式（Sing…...

编程新知 2025/8/10 21:01:28

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议（EPSFD 2025）将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会，EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2025/11/7 20:04:35

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名转换路径 …...

编程新知 2025/9/11 13:56:27

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置，使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2025/11/8 5:28:12

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

编程新知 2025/11/8 8:30:44