JavaScript(函数,作用域和闭包)

目录

  • 一,什么是函数
    • 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();

在这里插入图片描述

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/113788.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AUTOSAR开发工具DaVinci Configurator里的Modules

DaVinci Configurator 里面有个Module这个概念。 如你所想&#xff0c;基本上跟AUTOSAR架构里面的Module相对应 从软件的Project菜单中的Basic Editor项可以打开 打开这个菜单后&#xff0c;会看到很多Modules项以及其相关配置项 这个Basic Editor显示出整个ECU配置中的所有…

ABeam×Startup | 德硕管理咨询(深圳)创新研究团队拜访微漾创客空间

近日&#xff0c;德硕管理咨询&#xff08;深圳&#xff09;&#xff08;以下简称&#xff1a;“ABeam-SZ”&#xff09;创新研究团队前往微漾创客空间&#xff08;以下简称&#xff1a;微漾&#xff09;拜访参观&#xff0c;并展开合作交流。会议上&#xff0c;双方相互介绍了…

Module not found: Error: Can‘t resolve ‘less-loader‘解决办法

前言&#xff1a; 主要是在自我提升方面&#xff0c;感觉自己做后端还是需要继续努力&#xff0c;争取炮筒前后端&#xff0c;作为一个全栈软阿金开发人员&#xff0c;所以还是需要努力下&#xff0c;找个方面&#xff0c;目前是计划学会Vue&#xff0c;这样后端有java和pytho…

Spring Security 超详细整合 JWT,能否拿下看你自己!

文章目录 1.JWT 入门1.1 JWT 概念1.2 JWT 应用场景1.3 为何选择 JWT基于 Session 的传统认证基于 JWT 的认证 1.4 JWT 的结构标头&#xff08;Header&#xff09;载荷&#xff08;Payload&#xff09;签名&#xff08;Signature&#xff09; 1.5 RBAC (Role-Based Access Contr…

day-01 Docker

一、docker简介 Docker 是一种开源的容器化平台&#xff0c;它可以帮助开发人员将应用程序及其依赖项打包成一个独立的、可移植的容器&#xff0c;而无需担心环境差异和依赖问题。通过使用 Docker&#xff0c;您可以更轻松地创建、分发和运行应用程序&#xff0c;无论是在开发、…

最新AI系统ChatGPT镜像源码+详细图文搭建教程/支持GPT4.0/AI绘画+MJ绘画/Dall-E2绘画/H5端/Prompt知识库/思维导图生成

一、AI系统 如何搭建部署AI创作ChatGPT系统呢&#xff1f;小编这里写一个详细图文教程吧&#xff01;SparkAi使用Nestjs和Vue3框架技术&#xff0c;持续集成AI能力到AIGC系统&#xff01; 1.1 程序核心功能 程序已支持ChatGPT3.5/GPT-4提问、AI绘画、Midjourney绘画&#xf…

uview ui 1.x ActonSheet项太多,设置滚动(亲测有效)

问题&#xff1a;ActionSheet滚动不了。 使用uview ui &#xff1a;u-action-sheet, 但是item太多&#xff0c;超出屏幕了&#xff0c; 查了一下文档&#xff0c;并没有设置滚动的地方。 官方文档&#xff1a;ActionSheet 操作菜单 | uView - 多平台快速开发的UI框架 - uni-a…

ChatGPT总结(持续更新)

目录 体验渠道 weTab CSDN-AI助手 其他插件 ChatGPT简介 ChatGPT主要用途 ChatGPT发展历程 GPT-4架构的特点和优势 ChatGPT的工作原理 神经网络和自然语言处理技术 Transformer模型 模型训练优化技巧 ChatGPT对程序员的帮助 与ChatGPT交互和提问技巧 ChatGPT未来…

Linux知识点 -- Linux多线程(三)

Linux知识点 – Linux多线程&#xff08;三&#xff09; 文章目录 Linux知识点 -- Linux多线程&#xff08;三&#xff09;一、线程同步1.概念理解2.条件变量3.使用条件变量进行线程同步 二、生产者消费者模型1.概念2.基于BlockingQueue的生产者消费者模型3.单生产者单消费者模…

Ansible学习笔记7

user模块&#xff1a; user模块用于管理用户账户和用户属性。 如果是windows要换一个win_user模块。 创建用户&#xff1a;present&#xff1a; [rootlocalhost ~]# ansible group1 -m user -a "nameaaa statepresent" 192.168.17.106 | CHANGED > {"ansi…

三、JVM监控及诊断工具-GUI篇

目录 一、工具概述二、jconsole&#xff08;了解即可&#xff09;1、基本概述2、启动3、三种连接方式4、作用 三、Visual VM 一、工具概述 二、jconsole&#xff08;了解即可&#xff09; 1、基本概述 从Java5开始&#xff0c;在JDK中自带的Java监控和管理控制台用于对JVM中内…

RabbitMQ工作模式-路由模式

官方文档参考&#xff1a;https://www.rabbitmq.com/tutorials/tutorial-four-python.html 使用direct类型的Exchange,发N条消息并使用不同的routingKey,消费者定义队列并将队列routingKey、Exchange绑定。此时使用direct模式Exchange必须要routingKey完成匹配的情况下消息才…

正中优配:什么叫融资融券

融资融券是股市中常见的一种买卖方法。融资是指投资者通过某些途径借到资金&#xff0c;用以购买股票。融券是指投资者借股票卖出&#xff0c;并承诺在未来某一时点将股票偿还。 融资融券的实质是一种杠杆买卖&#xff1a;投资者通过融资或融券&#xff0c;增加了自己的资金量…

【微服务部署】02-配置管理

文章目录 1.ConfigMap1.1 创建ConfigMap方式1.2 使用ConfigMap的方式1.3 ConfigMap使用要点建议 2 分布式配置中心解决方案2.1 什么时候选择配置中心2.2 Apollo配置中心系统的能力2.2.1 Apollo创建配置项目2.2.2 项目使用2.2.3 K8s中使用Apollo 1.ConfigMap ConfigMap是K8s提供…

深入理解Reactor模型的原理与应用

1、什么是Reactor模型 Reactor意思是“反应堆”&#xff0c;是一种事件驱动机制。 和普通函数调用的不同之处在于&#xff1a;应用程序不是主动的调用某个 API 完成处理&#xff0c;而是恰恰相反&#xff0c;Reactor逆置了事件处理流程&#xff0c;应用程序需要提供相应的接口并…

非科班菜鸡算法学习记录 | 代码随想录算法训练营第51天||309.最佳买卖股票时机含冷冻期 714.买卖股票的最佳时机含手续费 股票总结

309.最佳买卖股票时机含冷冻期 309. Best Time to Buy and Sell Stock with Cooldown(英文力扣连接) 知识点&#xff1a;动规 状态&#xff1a;看思路ok 思路&#xff1a; 四个状态需要想&#xff0c;持有/不持有且过了冷却期/当天卖/正处于冷却期&#xff1b; 具体看注释…

如何用Python爬虫持续监控商品价格

目录 持续监控商品价格步骤 1. 选择合适的爬虫库&#xff1a; 2. 选择目标网站&#xff1a; 3. 编写爬虫代码&#xff1a; 4. 设定监控频率&#xff1a; 5. 存储和展示数据&#xff1a; 6. 设置报警机制&#xff1a; 7. 异常处理和稳定性考虑&#xff1a; 可能会遇到的…

李跳跳下载-《告别广告困扰,让李跳跳助力打造清爽浏览体验》

大家好&#xff0c;&#x1f44b;今天我想向大家介绍一款非常好用的应用程序——李跳跳 App &#x1f680;。 随着智能手机的普及&#xff0c;应用程序已经成为了我们日常生活中必不可少的一部分。但是&#xff0c;随之而来的是各种各样的广告&#xff0c;这些广告不仅浪费我们…

交换机端口安全实验

文章目录 一、实验的背景与目的二、实验拓扑三、实验需求四、实验解法1. PC配置IP地址部分2. 在SW1上开启802.1X身份验证3. 创建一个用户身份验证的用户。用户名为wangdaye&#xff0c;密码为1234564.创建一个端口隔离组&#xff0c;实现三台PC无法互相访问 摘要&#xff1a; 本…

vue中使用window.open打开assets文件夹下的pdf文件

需求&#xff1a;系统有个操作手册&#xff0c;点击会在浏览器新开个窗口并打开pdf文件。这个pdf文件存储在本地assets文件夹中。 文件结构&#xff1a; 注&#xff1a;直接使用window.open(文件路径)不能打开&#xff0c;需要在vue.config.js中配置所需文件 引入图中红框中的…