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

JavaScript（函数，作用域和闭包）

news 2025/9/16 18:43:57

目录

  • 一，什么是函数
    • 1.1，常用系统函数
    • 1.2，函数声明
  • 1.3，函数表达式
  • 二，预解析
    • 2.1，函数自调用
  • 2.2，回调函数
  • 三，变量的作用域
    • 3.1，隐式全局变量
  • 四，作用域与块级作用域
  • 五，作用域链
  • 六，闭包

一，什么是函数

类似于Java中的方法，是完成特定任务的代码语句块
特点
使用更简单
不用定义属于某个类，直接调用执行
分类
系统函数
自定义函数

1.1，常用系统函数

1.将字符串转换为整型数字

parseInt("字符串");<body><input type="button" value="求和" onclick="qiuhe()">
</body>
<script>var num1 = parseInt("56.64");      //返回值为56var num2 = parseInt("123abc");   //返回值为123var num3 = parseInt("hello999"); //返回值为NaNconsole.log(num1,num2,num3);function qiuhe(){var n1 = prompt("请输入第一个数")var n2 = prompt("请输入第二个数")var num1=parseInt(n1)var num2=parseInt(n2)if(isNaN(num1)||isNaN(num2)){alert("有一个不是数字");}else{document.write(num1+num2)}}
</script>

js示例1

在这里插入图片描述

从下标为0起，依次判断每个字符是否可以转换为一个有效数字
如果不是有效数字，则返回NaN，不再继续执行其他操作
如果是有效数字，则该函数将查看下标为1的字符，进行同样的测试，直到发现非有效数字的字符或全部检测完为止

2.将字符串转换为浮点型数字

parseFloat("字符串");var num1 = parseFloat("3.1415926");  //返回值为3.1415926
var num2 = parseFloat("123abc");       //返回值为123
var num3 = parseFloat("hello999");     //返回值为NaN
var num4 = parseFloat("52.18.97");     //返回值为52.18 如果有两个小数点则第二个小数点无效
console.log(num1,num2,num3);

在这里插入图片描述

3.检查其参数是否是非数字

isNaN(x);var num1=isNaN("20.5");       //返回值为false
var num2=isNaN("123abc");  //返回值为true
var num3=isNaN(48.98);       //返回值为false
console.log(num1,num2,num3);

在这里插入图片描述

通常，使用isNaN()函数检测parseInt()和parseFloat()的运算结果，判断它们表示的是否是合格的数字；也可以使用isNaN()函数检测
操作数是否有错误，例如：用0作为除数的情况

1.2，函数声明

由关键字function、函数名、一组参数及置于括号中的待执行的JavaScript语句组成

语法

		// JavaScript是弱数据类型，对于函数参数没有类型检查和类型限定function 函数名([参数1[, 参数2[, 参数3,…] ] ]) {//JavaScript语句;[return 返回值] // return可有可无}

调用函数

// 一般和表单元素的事件一起使用
事件名＝“函数名([参数值1[, 参数值2[, 参数值3,…] ])";

函数声明——调用无参函数

// 定义并调用无参函数，输出5次“你好”
<body>//单击此按钮时，调用函数func1( )，执行函数体中的代码<input type="button" value="点我执行" onclick="func1()">
</body>
<script>function func1(){for(var i=0;i<5;i++){document.write("<h1>你好"+i+"</h1>")}}
</script>

js示例2

函数声明——调用有参函数

	// 键盘接受“你好”输出行数，并按指定数字输出到网页<body><input type="button" value="点我执行" onclick="func1(prompt('请输入显示你好的次数：'))">
</body>
<script>function func1(count){for(var i=0;i<5;i++){document.write("<h1>你好"+i+"</h1>")}}
</script>

js示例3

1.3，函数表达式

将函数赋给变量
定义函数

var 变量 = function([参数值1[, 参数值2[, 参数值3,…] ]) {//JavaScript语句;
};

调用函数

变量([参数值1[, 参数值2[, 参数值3,…] ]);

函数表达式

 	// 使用函数声明的方式定义两个函数名都为f1()的函数f1();function f1(){var num3 = 100;console.log(num3)}function f1(){console.log("今天天气很好！")}f1();function f1(){console.log("今天天气好晴天，处处好风光");}f1();

在这里插入图片描述

	// 使用函数表达式方式定义两个函数名都为f2()的函数var f2 = function(){console.log("哇~");}f2();var f2 = function(){console.log("娃哈哈~");}f2();

在这里插入图片描述

使用函数声明方式定义两个同名的函数时，后面的函数将会覆盖前面的函数；
使用函数表达式方式定义同名的函数时，会从上到下，逐行执行代码，并输出结果

二，预解析

顾名思义就是提前解析代码
主要完成两项工作
其一，变量的声明会提前
其二，函数的声明也会被提前

// 预解析可以把变量的声明提前
console.log(num); //undefined
var num=10;// 预解析可以把函数的声明提前
f1();
function f1() {var num=100;console.log(num); //100
}

在这里插入图片描述

2.1，函数自调用

自定义函数分类
命名函数
匿名函数

语法

(function() {//函数体	    
})();

匿名函数的特点
函数没有名字，在声明的同时便直接调用
好处
同名函数之间不会有冲突

    (    function(){console.log("立即执行函数");})();

在这里插入图片描述

2.2，回调函数

注意
如果没有指定回调函数的名称，则称之为 匿名回调函数

    function f1(fn){console.log("f1");fn()};function f2(){console.log("f2");return 1};f1(f2); // 执行命名回调函数，注意f2后面不能加()

在这里插入图片描述

    function f1(fn){console.log("f1");fn()};f1(function(){ // 匿名函数console.log("我没有名字!");})

在这里插入图片描述

三，变量的作用域

根据变量作用范围不同，分类
局部变量
在函数内部声明的变量（必须使用var）
只能在函数内部访问它
可以在不同的函数中使用名称相同的局部变量
全局变量
在函数外声明的变量
网页的所有脚本和函数都能访问它

    var x = 10;function f1(){var y = 5;console.log(x); // 10console.log(y); // 5}f1();console.log(x); // 10console.log(y); // y is not defined

在这里插入图片描述

局部变量与全局变量的区别

区别局部变量全局变量
作用域仅作用在函数中作用在整个脚本
声明位置函数中使用之前的任何位置
生存期在函数运行以后被删除在页面关闭后被删除

3.1，隐式全局变量

如果变量声明时，没有使用关键字var，则被称为隐式全局变量

示例

var a1 = 1;  //全局变量
a2 = 2;        //隐式全局变量

如果在函数内部声明变量时，没有使用关键字var，则也是隐式全局变量

    function f1(){var num = 100;}f1();console.log(num); // 函数会报错

在这里插入图片描述

    function f1(){num = 100;}f1();console.log(num);

在这里插入图片描述

与解析：

1.会把全局变量的“声明”提前
2.提前声明函数，但是函数内部的代码是不执行的
局部变量：必须在函数内部使用var/let声明，如果不使用，则称为隐式全局变量
隐式全局变量：只有在执行后使用，
全局变量和局部变量可以重名，使用就近原则

四，作用域与块级作用域

作用域
是变量与函数的可访问范围
控制着变量与函数的可见性和生命周期
块级作用域
由花括号“ { } ”限定
所有的变量都定义在花括号内
变量从定义开始到花括号结束的范围内可以使用
使用场景
正常带有大括号的语句
条件语句
循环语句
函数

    正常带有大括号的语句{var num = 10;}console.log(num); // 10// 条件语句if(true){var num = 20;}console.log(num); // 20// 循环语句for(var i=0;i<5; i++){var num = 30;}console.log(num); // 30// 函数function f1(){var num  = 50;}f1();console.log(num); // num is not defined

五，作用域链

Scope Chain
是JavaScript内部一种变量、函数查找机制
决定了变量和函数的作用范围
当执行函数时，先从函数内部寻找局部变量
如果内部找不到，则向创建函数的作用域寻找，依次向上
如果最终没有找到，通常会报错

    var num = 10; // <script>里定义的变量，是0级作用域function f1(){var num = 20; // 1级作用域function f2(){var num = 30; // 2级作用域function f3(){var num = 50; // 3级作用域console.log(num);}f3();}f2();}f1()

在这里插入图片描述

六，闭包

如何在函数外部读取函数内的局部变量呢？
闭包（closure）
能够读取其他函数内部变量的函数
是将函数内部和函数外部链接起来的桥梁
实现步骤
在一个函数的内部，再定义一个函数
把内部的函数作为返回值
特性
函数嵌套
内部函数可以访问外部函数的变量
参数和变量不会被回收
最典型的应用
实现回调函数

    // 1.在函数内部定义一个函数// 2. 把内部函数作为外部函数的返回值// 原理：利用了内部函数可以调用外部函数的变量function f1(){var num = 20;function f2(){alert(num);}return f2;}var result = f1();result();

在这里插入图片描述

作用
可以读取函数内部的变量
让这些变量的值始终保存在内存中
缺点
在父函数外部，可以改变父函数内部变量的值
常驻内存，会增大内存使用量，使用不当很容易造成内存泄露

相关文章：

JavaScript（函数，作用域和闭包）

目录 一&#xff0c;什么是函数1.1&#xff0c;常用系统函数1.2&#xff0c;函数声明 1.3&#xff0c;函数表达式二&#xff0c;预解析2.1&#xff0c;函数自调用 2.2&#xff0c;回调函数三&#xff0c;变量的作用域3.1&#xff0c;隐式全局变量 四&#xff0c;作用域与块级作…...

编程日记 2023/8/31 14:32:39

C# 实现 国密SM4/ECB/PKCS7Padding对称加密解密

C# 实现 国密SM4/ECB/PKCS7Padding对称加密解密&#xff0c;为了演示方便本问使用的是Visual Studio 2022 来构建代码的 1、新建项目&#xff0c;之后选择 项目 鼠标右键选择 管理NuGet程序包管理&#xff0c;输入 BouncyCastle 回车 添加BouncyCastle程序包 2、代码如下&am…...

编程日记 2023/8/31 14:31:36

【docker-compose】【nginx】动态配置

需求&#xff1a;部署前端镜像时需要动态修改nginx反向代理的后端服务的ip地址 原.conf配置调整&#xff0c;改为嵌入变量的文件模版Dockerfile 修改&#xff0c;通过envsubst将换将变量注入模版后再运行nginxdocker-compose配置&#xff0c;通过environment动态修改变量 defau…...

编程日记 2023/8/31 14:30:35

ExpressLRS开源之接收机固件编译烧录步骤

ExpressLRS开源之接收机固件编译烧录步骤 1. 源由2. 编译步骤2.1 推荐源代码指定方案2.2 方法一&#xff1a;ELRS Configurator步骤一&#xff1a;下载ELRS Configurator工具步骤二&#xff1a;安装ELRS Configurator工具步骤三&#xff1a;使用ELRS Configurator工具进行配置步…...

编程日记 2023/8/31 14:29:34

提取视频文件里的音频和无声视频

一、提取视频文件里的音频&#xff1a; public static void generateMediaRadio(){// 视频提取器MediaExtractor extractor new MediaExtractor();try {//本地视频文件extractor.setDataSource("/storage/emulated/0/mjyyfep/alpha.mp4");//网络视频文件 // …...

编程日记 2023/8/31 14:28:33

SpringBoot原理

一、Bean原理 1、配置文件的优先级 SpringBoot项目当中支持的三类配置文件&#xff1a; ​ - application.properties - application.yml - application.yaml 配置文件优先级排名&#xff08;从高到低&#xff09;&#xff1a; 1. properties配置文件 2. yml配置文件 3. yaml…...

编程日记 2023/8/31 14:27:32

MySQL事务原理、MVCC详解

事务原理 1 事务基础 1). 事务 事务 是一组操作的集合&#xff0c;它是一个不可分割的工作单位&#xff0c;事务会把所有的操作作为一个整体一起向系 统提交或撤销操作请求&#xff0c;即这些操作要么同时成功&#xff0c;要么同时失败。 2). 特性 原子性&#xff08;Atomi…...

编程日记 2023/8/31 14:26:30

在Windows操作系统上安装Neo4j数据库

在Windows操作系统上安装Neo4j数据库 一、在Windows操作系统上安装Neo4j数据库 一、在Windows操作系统上安装Neo4j数据库 点击 MySQL可跳转至MySQL的官方下载地址。 在VUE3项目的工程目录中&#xff0c;通过以下命令可生成node_modules文件夹。 npm install&#xff08;1&am…...

编程日记 2023/8/31 14:25:29

国民八路参考文献：［８］许少辉．乡村振兴战略下传统村落文化旅游设计［Ｍ］北京：中国建筑工业出版社，２０２２．

国民八路参考文献&#xff1a;&#xff3b;&#xff18;&#xff3d;许少辉&#xff0e;乡村振兴战略下传统村落文化旅游设计&#xff3b;&#xff2d;&#xff3d;北京&#xff1a;中国建筑工业出版社&#xff0c;&#xff12;&#xff10;&#xff12;&#xff12;&#xff0…...

编程日记 2023/8/31 14:24:28

24 Linux高级篇-备份与恢复

24 Linux高级篇-备份与恢复 文章目录 24 Linux高级篇-备份与恢复24.1 安装dump和restore24.2 使用dump备份24.4 使用restore恢复 学习视频来自于B站【小白入门 通俗易懂】2021韩顺平 一周学会Linux。可能会用到的资料有如下所示&#xff0c;下载链接见文末&#xff1a; 《鸟哥的…...

编程日记 2023/8/31 14:23:26

微信小程序的图书馆预约系统设计与实现

摘 要 近年来随着社会竞争压力的不断加剧&#xff0c;人们需要不断充实自己的学识来提升自己的竞争力&#xff0c;对于在校的大学生而言需要利用在校期间实现考研考编的内容&#xff0c;职场的上班族需要通过考取职业技能资格证书来实现升职加薪&#xff0c;各行各业的人们都在…...

编程日记 2023/8/31 14:22:25

《2023年网信人才培训-网络安全从业人员能力素养提升培训》第一期成功举办

随着网络强国和数字中国建设的步伐加快&#xff0c;建设规模宏大、结构合理、素质优良的人才队伍成为一项重要工作。知了汇智作为数字产教融合基地&#xff0c;通过与高校、企业等多方合作&#xff0c;建立了完整的网络安全人才培养生态链。凭借自身技术优势和丰富的产业资源&a…...

编程日记 2023/8/31 14:21:24

WebGpu VS WebGL

推荐&#xff1a;使用 NSDT场景编辑器 助你快速搭建3D应用场景 WEBGPU VS. WEBGL 粗略地概述一下WebGPU与WebGL的不同之处是很有用的。在不涉及太多复杂的技术细节的情况下&#xff0c;两者的整体设计大致如下&#xff1a; WebGL和OpenGL一样&#xff0c;涉及许多单独的函数调…...

编程日记 2023/8/31 14:20:23

HTML ＜tfoot＞ 标签

实例 带有 thead、tbody 以及 tfoot 元素的 HTML 表格： <table border="1"><thead><tr><th>Month</th><th>Savings</th></tr></thead><tfoot><tr><td>Sum</td><td>$180<…...

编程日记 2023/8/31 14:19:21

VScode的PHP远程调试模式Xdebug

目录 第一步、安装VScode中相应插件 remote-ssh的原理 ssh插件&#xff1a; PHP相关插件&#xff1a; 第二步、安装对应PHP版本的xdebug 查看PHP具体配置信息的phpinfo页面 1、首先&#xff0c;打开php编辑器&#xff0c;新建一个php文件&#xff0c;例如&#xff1a;inde…...

编程日记 2023/8/31 14:18:19

HTML5-2-链接

HTML使用标签 <a>来设置超文本链接。 超链接可以是一个字&#xff0c;一个词&#xff0c;或者一组词&#xff0c;也可以是一幅图像&#xff0c;您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 默认情况下&#xff0c;链接将以以下形式出现在浏览器中&am…...

编程日记 2023/8/31 14:17:17

Java--常用jar命令

jar常用指令 jar命令参数&#xff1a; jar命令格式&#xff1a;jar {c t x u f }[ v m e 0 M i ][-C 目录]文件名... 其中{ctxu}这四个参数必须选选其一。[v f m e 0 M i ]是可选参数&#xff0c;文件名也是必须的。 -c 创建一个jar包 -t 显示jar中的内容列表 -x 解压jar包 …...

编程日记 2023/8/31 14:16:16

微服务中间件--多级缓存

多级缓存 多级缓存a.JVM进程缓存1) Caffeine2) 案例 b.Lua语法1) 变量和循环2) 条件控制、函数 c.多级缓存1) 安装OpenResty2) 请求参数处理3) 查询Tomcat4) Redis缓存预热5) 查询Redis缓存6) Nginx本地缓存 d.缓存同步1) 数据同步策略2) 安装Canal2.a) 开启MySQL主从2.b) 安装…...

编程日记 2023/8/31 14:15:15

clickhouse系列3：clickhouse分析英国房产价格数据

1.准备数据集 该数据集包含有关英格兰和威尔士自1995年起到2023年的房地产价格的数据，超过2800万条记录，未压缩形式的数据集大小超过4GB，在ClickHouse中需要约306MB。 2.clickhouse中建表 CREATE TABLE uk_price_paid (price UInt32,...

编程日记 2023/8/31 14:14:13

2023京东口腔护理赛道行业数据分析（京东销售数据分析）

近年来&#xff0c;口腔护理逐渐成为年轻人重视的健康领域&#xff0c;从口腔护理整体市场来看&#xff0c;牙膏和牙刷等基础口腔护理产品仍占据主导地位。不过&#xff0c;随着口腔护理市场逐步朝向精致化、专业化、多元化等方向发展&#xff0c;不少新兴口腔护理产品受到消费…...

编程日记 2023/8/31 14:13:11

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

编程新知 2025/7/14 21:22:23

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

编程新知 2025/9/9 14:55:19

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/9/12 10:25:58

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

编程新知 2025/8/30 16:47:37

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

编程新知 2025/9/11 5:41:27

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

编程新知 2025/9/13 19:32:45

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

编程新知 2025/8/12 19:32:55

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

编程新知 2025/8/26 17:36:58

项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

编程新知 2025/9/7 8:51:02

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/8/19 13:48:59