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.mzph.cn/news/64996.shtml

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

相关文章

TDengine函数大全-转换函数

以下内容来自 TDengine 官方文档 及 GitHub 内容 。 以下所有示例基于 TDengine 3.1.0.3 TDengine函数大全 1.数学函数 2.字符串函数 3.转换函数 4.时间和日期函数 5.聚合函数 6.选择函数 7.时序数据库特有函数 8.系统函数 转换函数 TDengine函数大全CASTTO_ISO8601TO_UNIXTIM…

Seaborn绘制热力图的子图

Seaborn绘制热力图的子图 提示&#xff1a;如何绘制三张子图 绘制的时候&#xff0c;会出现如下问题 &#xff08;1&#xff09;如何绘制1*3的子图 &#xff08;2&#xff09;三个显示条&#xff0c;如何只显示最后一个 提示&#xff1a;下面就展示详细步骤 Seaborn绘制热力…

您的计算机已被.makop勒索病毒感染?恢复您的数据的方法在这里!

引言&#xff1a; 近年来&#xff0c;网络犯罪日益猖獗&#xff0c;各种恶意软件不断涌现&#xff0c;其中一种备受关注的就是勒索病毒。 .Makop 勒索病毒&#xff08;也被称为 Makop Ransomware &#xff09;是其中的一种&#xff0c;它以其恶意加密用户文件并勒索赎金的手法&…

HTTP请求超时:问题、原因与解决方案

引言 在互联网应用程序中&#xff0c;HTTP请求是实现数据传输和请求响应的核心过程。然而&#xff0c;有时候这个过程可能会因为各种原因而出现超时&#xff0c;导致用户无法及时获取所需信息&#xff0c;甚至引发系统崩溃。本文将深入探讨HTTP请求超时的原因&#xff0c;并提…

vue 根据数值判断颜色

1.首先style样式给两种颜色 用:class 三元运算符判断出一种颜色 第一步&#xff1a;在style里边设置两种颜色 .green{color: green; } .orange{color: orangered; }在取数据的标签 里边 判断一种颜色 :class"item.quote.current >0 ?orange: green"<van-gri…

单片机-控制按键点亮LED灯

1、按键电路图 定义四个按键引脚 1、按键按下 为 输入为低电平 2、按键不按下 IO有上拉电阻&#xff0c;为高电平 // 定义 按键的 管教 sbit KEY1 P3^1; sbit KEY2 P3^0; sbit KEY3 P3^2; sbit KEY4 P3^3; 2、LED灯电路图 LED 输出高电平为亮 // 定义LED灯 管教 sbit LED1…

bazel相关资料来源

bazel官方中文文档 bazel官方中文文档网址2 Bazel学习笔记 如何评价 Google 开源的 Bazel &#xff1f; Bazel使用了解 编译构建工具-bazel 如何挖掘 Bazel 的极致性能 如何挖掘 Bazel 的极致性能_其它网站 Bazel入门(4. Remote Cache) Google Open Source Live "B…

【运维】hadoop 集群安装(三)hdfs、yarn集群配置、nodemanager健康管理讲解

文章目录 一. 配置说明1. hadoop各进程环境配置2. hadoop各进程配置2.1. etc/hadoop/core-site.xml2.2. etc/hadoop/hdfs-site.xml2.2.1. NameNode2.2.2. datanode 2.3. etc/hadoop/yarn-site.xml2.3.1. ResourceManager and NodeManager2.3.2. ResourceManager2.3.3. NodeMana…

pycharm 打开Terminal时报错activate.ps1,因为在此系统上禁止运行脚本,并因此无法进入虚拟环境

pycharm 打开Terminal时报错activate.ps1&#xff0c;因为在此系统上禁止运行脚本&#xff0c;并因此无法进入虚拟环境 如下图所示&#xff1a; 网上说可以set_restrictFalse什么的&#xff0c;虽然也可但可能会降低电脑安全性&#xff0c;可以将下面的终端改为cmd.exe即可

使用candump+grep查看CAN报文

在Linux系统中观察看CAN报文&#xff0c;我们一般使用candump&#xff0c;但是有时候会发现总线上CAN报文太多&#xff0c;例如开启了好几个PDO&#xff0c;这就导致想看的报文被夹杂到报文的海洋里&#xff0c;然后再去找&#xff0c;非常麻烦。 candump也提供了只观察某个报…

ImageSharp.Web实战:轻松搭建高效图片服务

很多情况下&#xff0c;在开发如PC、H5、小程序等综合平台的时候&#xff0c;图片的展示是个比较头疼的问题。尤其是有会员功能&#xff0c;会员可以上传图片的平台&#xff0c;更是一件麻烦事。 平台展示图片的地方&#xff0c;尺寸是定义好的。但用户不配合&#xff0c;上传的…

uni-app:监听数据变化(watch监听、@input事件)

方法一&#xff1a;文本框监听,使用input事件 <template><view><input type"text" v-model"wip_entity_name" input"handleInputChange" /></view> </template><script> export default {data() {return {…

开发总结:webpack

webpack官网webpack | webpack 中文文档 | webpack 中文网 一、什么是webpack webpack 可以看做是模块打包机&#xff0c;它所做的事情是&#xff1a;分析你的项目结构&#xff0c;找到JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言&#xff08;Scss&#xff0…

python tcp server client示例代码

功能&#xff1a; 实现基本的tcp server端、client端&#xff0c;并引入threading, 保证两端任意链接、断链接&#xff0c;保证两端的稳定运行 IP说明&#xff1a; server不输入IP&#xff0c;默认为本机的IP&#xff0c;client需要输入要链接的server端的IP 端口说明&#x…

Mysql /etc/my.cnf参数详解(二)

#buffer相关 #buffer pool根据实际内存大小调整,标准为物理内存的50% innodb_buffer_pool_size15996M //默认值128M&#xff0c;innodb_buffer_pool_size | 134217728 key_buffer_size 33554432 #根据物理内存大小设置 确保每个instance内的内存2G左右 <5000 1,>5000 &…

Ubuntu无法加载exfat的USB存储设备

当接入设备USB存储设备提示&#xff1a; 不能挂在63GB 卷 Error mounting /dev/sdb1 at /media/ubuntu/83C9-26F4: Command-line mount -t "exfat" -o "uhelperudisks2,nodev,nosuid,uid1000,gid1000,iocharsetutf8,namecase0,errorsremount-ro,umask0077"…

Segment Routing原理

以上内容均属原创&#xff0c;如有不详或错误&#xff0c;敬请指出。本文作者&#xff1a; 坏坏 本文链接&#xff1a; http://t.csdn.cn/2fUE5 版权声明&#xff1a; 本博客所有文章除特别声明外&#xff0c;如需转载&#xff0c;请联系作者注明出处并附带本文链接&#xf…

处理时延降低24倍,联通云粒数据引擎优化实践

*作者&#xff1a;郑扬勇&#xff0c;云粒星河数据中台产品负责人 云粒智慧科技有限公司成立于 2018 年 6 月&#xff0c;是中国联通集团混改以来成立的首家合资公司&#xff0c;是中国智慧城市数智化建设者。一直以来&#xff0c;云粒智慧以数字化、智能化、集约化产品为核心&…

CS144(2023 Spring)Lab 0:networking warmup(环境搭建 webget bytestream)

文章目录 前言其他笔记相关链接 1. Set up GNU/Linux on your computer2. Networking by hand3. Writing a network program using an OS stream socket3.1 Linux配置3.2 C规范3.3 Writing webget3.3.1 实现3.3.2 测试 4. An in-memory reliable byte stream4.1 思路分析4.2 代…

HTTPS安全通信和SSL Pinning

随着互联网的迅速发展&#xff0c;网络通信安全问题日益凸显。在这一背景下&#xff0c;HTTPS作为一种加密通信协议得到了广泛应用&#xff0c;以保障用户的数据隐私和信息安全。本文将介绍HTTPS的基本原理、发展历程&#xff0c;以及与之相关的中间人攻击和防护方法。 1. HTT…