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

2023-11-20

一,什么是函数

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

1.1,常用系统函数

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

parseInt("字符串");

<body>
    <input type="button" value="求和" onclick="qiuhe()">
</body>
<script>
	var num1 = parseInt("56.64");      //返回值为56
	var num2 = parseInt("123abc");   //返回值为123
	var num3 = parseInt("hello999"); //返回值为NaN
	console.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); // 10
        console.log(y); // 5
    }
    f1();
    console.log(x); // 10
    console.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();

在这里插入图片描述

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript(函数,作用域和闭包) 的相关文章

  • 有没有办法在 React.render() 函数中渲染多个 React 组件?

    例如我可以这样做 import React from react import PanelA from panelA jsx import PanelB from panelB jsx React render
  • 如何按多个项目搜索/过滤列表?

    我正在寻找一个示例 或者可能是一个关于通过在文本框中输入的多个项目来过滤 搜索项目列表的方法的一点提示 假设我有一个列表 ul li Coffee li li Tea li li Milk li li Water li li Juice l
  • 按键对 JavaScript 对象进行排序

    我需要按键对 JavaScript 对象进行排序 因此 以下内容 b asdsad c masdas a dsfdsfsdf 会成为 a dsfdsfsdf b asdsad c masdas 这个问题的其他答案已经过时 与实施现实不符 并
  • 从 php 到 JavaScript 的数组

    我正在尝试使用 json 将数组列表从 php 传输到 javascript 但它不起作用 JS ajax url getProfilePhotos php type post post or get method data if you
  • 如何在bootstrap中默认隐藏侧边栏?

    我在这里有一个很好的参考 作为 Bootstrap 在设计 Web 表单应用程序时的侧边栏 http startbootstrap com template overviews simple sidebar http startbootst
  • 如何使用 JavaScript 选择预节点/块中的文本?

    我了解不允许 JS 将任意文本复制到剪贴板背后的安全原因 但是是否有一种方法可以通过单击按钮来选择预节点中的文本 类似于 select 函数在输入中的工作方式 我不是在寻找复制到剪贴板的 jQuery 插件 我只想突出显示预块中的文本 以便
  • Sonar 中的 javascript 代码覆盖率

    我是使用 Sonar 和插件进行 javascript 代码覆盖的新手 使用 Sonar 分析时 有哪些可能性可以找出 javascript 代码的质量 包括代码覆盖率 目前我正在使用 karma runner 它提供代码覆盖率报告 可以在
  • 如何强制折断不可折断的字符串?

    我有一个根据数据库中包含的数据生成的 HTML 页面 数据库有时包含浏览器无法分解的长字符串 因为这些字符串不包含可分解的字符 空格 点 逗号等 有没有办法使用 html css 甚至 javascript 来解决这个问题 看到这个link
  • 无法读取未定义的“触及”属性

    为什么我会收到此错误无法读取未定义的属性 为什么无法读取formName controls email touched但它能够阅读formName get custDetails touched
  • Angularjs 完整日历不显示事件

    我正在用那个https github com angular ui ui calendar https github com angular ui ui calendar在 Angularjs 中使用 FullCalendar 它显示日历并
  • window.open:是否可以打开一个新窗口并修改其 DOM

    我想打开一个新窗口 var my window open iframe html blank height 600 width 600 但当我打开它时 我想修改它的DOM 我尝试过 var div my document createEle
  • 带有 mkdocs 的本地 mathjax

    我想在无法访问互联网的计算机上使用 MathJax 和 Mkdocs 因此我不能只调用 Mathjax CDN Config mkdocs yml site name My Docs extra javascript javascripts
  • 将 onclick 事件应用于页面加载时不存在的元素

    我将列表样式设置为看起来像选择框 并且当用户单击列表中的元素时我想触发一个函数 但是该元素是通过加载的AJAX因此 当页面加载并且我无法绑定时不存在onclick事件到它onDomReady 如果我把它作为一个普通的选择列表 我可以只标记一
  • 有没有办法伪造同步 XHR 请求?

    我正在使用 Emscripten 系统将一堆 C 代码移植到 Javascript C 代码有很多调用fopen这是一个同步 IO 调用 在 Emscripten 中 我们使用对本地资源的 XHR 请求来模拟这一点however 在 Fir
  • 根据特定字符获取整个字符串或子字符串

    我有一个包含 MIME 类型的字符串 例如application json 现在我想将其与实际的 HTTP 标头进行比较 在本例中content type 如果标头包含 MIME 类型 那么就很简单 if mimeType contentT
  • Javascript onload 不起作用[关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我正在使用
  • 使用 AJAX 和 JQuery 按设定的时间间隔刷新 Rails 部分

    I have a page in my rails application that looks like 现在 我有另一个用 python 编码的人工智能应用程序 它处理视频 显示在 Rails 应用程序页面的左侧 并使用捕获的车辆及其相
  • 如何为 Imagus 悬停缩放扩展开发自定义过滤器?

    当我读到关于悬停缩放是邪恶的 http www reddit com r YouShouldKnow comments 1wjrc8 ysk that the hover zoom extension is spyware 哎呀 有两篇文章
  • AngularJS 在指令运行之前通过 AJAX 检索数据

    我正在使用 AngularUIuiMap http angular ui github com directives map实例化谷歌地图的指令 uiMap 指令非常适合处理硬编码数据 mapOptions and myMarkers 但是
  • p5 向量减法“sub”返回错误

    我一直在尝试将 p5 草图上传到 React 构建中 使用react p5 wrapper 我能够成功在屏幕上渲染画布 但是 某些矢量函数会导致错误 var distance this position dist ball position

随机推荐

  • kpca故障诊断matlab,关于用KPCA做故障检测,请教SPE控制图应该怎么做

    function qn kpca dtrain kernel q Fa Ca KPCA 核主成分分析 使用 trainFeat bj kpca data kernel p1 p2 输入 data 原始数据文件名 kernel 核函数 p1
  • eclipse导入外部项目后出现红叉解决方法

    eclipse开发工具中 在导入java项目时 有时会出现红叉 的现象 并且会发现里面的程序仍然能正常运行 原因 因为每个电脑上eclipse的环境都不太一样 导入项目后才回有红叉 这时只需要该变一下这个项目的环境就可以了 解决方法 第一步
  • nrm 切换 npm 源

    npm 配置仓库 查看当前仓库配置 npm config list 查看配置 npm config ls l 查看详细配置 可以看到 registry 配置 就是仓库地址 简述修改配置的 3 种方式 1 通过 config 配置 npm c
  • cesium for ue->CesiumUtility

    该模块共18个文件 3152行 含注释 截至2022年11月9日 剩下13个文件 1443行
  • 贝叶斯相关公式(Bayes)

    这里只是记录一下 非常推荐马同学高等数学 文末有原文 点击这里看里面的例一应该是理解贝叶斯公式最好的例子 如果你稍微有一些基础 我觉得文末第二个链接中的例一更加适合你 代数推导 1 贝叶斯公式 是根据条件概率推导的 P A B P AB P
  • 基于ssm+ajax实现的多条件带省略号分页

    ssm ajax layui实现的多条件分页源码 案列种包含数据库和前后台完整源码 演示地址 ssm ajax实现的多条件分页源码 前台核心代码 layui use form function var form layui form for
  • 一些论文审稿方面的体会

    本人小硕在读 老师也让帮忙审了论文 多是与自己领域相关的 老师让多学习学习 每次审论文都感觉诚惶诚恐 要是提的问题太多吧 感觉万一给拒了作者该多伤心啊 这挑的问题少吧 这明显对不起更多的人嘛 大体总结一下自己遇到的问题吧 一 现在论文提交量
  • Win10+CUDA8.0+Visual Studio2013安装、环境配置教程

    最近刚开始接触opencv的GPL编程 所以自己搜了下网上有关配置CUDA的过程 经过摸索整理 配置成功 现将教程整理如下 1 下载CUDA安装包 下载地址https developer nvidia com cuda downloads
  • 使用CUDA和CUFFT进行快速1D卷积的示例

    使用CUDA和CUFFT进行快速1D卷积的示例 在计算机视觉 数字信号处理和机器学习中 卷积是一种常见的操作 然而 卷积操作通常需要大量计算 因此需要一种高效的方法来完成 CUDA和CUFFT可以用于对使用FFT的快速1D卷积进行加速 在本
  • [Unity XLua]热更新XLua入门(一)-基础篇

    Aladdin XLua 前言 前段时间腾讯开源了一个内部热更框架XLua在Unity开发群里引起一阵热议 也受到广大开发者的热捧 然后我当然也抱着好奇的心去学习学习 后面也会将扩展之后的工程放在git上 大家一起学习交流 在此感谢XLua
  • c3p0数据库连接池死锁问题和mysql重连,连接丢失

    c3p0参数解释 最常用配置 initialPoolSize 连接池初始化时创建的连接数 default 3 取值应在minPoolSize与maxPoolSize之间 c3p0 initialPoolSize 10 minPoolSize
  • 敏捷项目管理ACP解析会笔记

    互联网时代企业环境现状 产品生命周期急剧缩短 市场环境变化太快 客户不满意 客户 团队 产品 产品需求界定不清 什么是敏捷项目管理 低成本 快速度 高质量 交付更高质量 敏捷宣言 个体和交互 重于过程和工具 可工作的软件 重于面面俱到的文档
  • Java高并发处理方案

    java高并发 如何解决 什么方式解决 一 什么是高并发 二 高并发解决思路 三 高并发解决方案 一 什么是高并发 1 1 高并发 High Concurrency 是互联网分布式系统架构设计中必须考虑的因素之一 它通常是指 通过设计保证系
  • 实现一个函数,判断一个数是不是素数

    include
  • Stream实现List和Map互转总结

    本文来说下Stream实现List和Map互转总结 文章目录 实体类 Map转List代码 List转Map代码 实体类 本篇介绍Stream流List和Map互转 同时在转换过程中遇到的问题分析 package cn wideth col
  • 找到专业的软件外包开发公司

    今天给大家分享怎么样找软件开发公司开发 而且找到的是既负责又专业的 那怎么去找呢 看哪些方面 北京木奇移动技术有限公司 专业的软件外包开发公司 欢迎交流合作 1 案例看实力 在选择软件定制开发公司时 必须要留意对方的案例如何 有否做过大型的
  • 理解HTTP headers之Expires、Cache-Control、IF-Modified-Since

    一 什么是Http headers 当你在浏览器地址栏里键入一个url 你的浏览器将会类似如下的http请求 GET tutorials other top 20 mysql best practices HTTP 1 1 Host net
  • Hive函数row_number实现

    需求 查询一批用户最后三次登陆时间 ip数据 理解需求是实现分组取前n个值 实现方式是先按照uid字段升序或倒序 时间字段倒序排序数据集合 然后遍历数据集合 用row number函数遍历uid字段 相同则row number值 1 取ro
  • el-table添加border边框线不显示

    el table添加border属性 使用作用域插槽 会不现实左边的边框线 或者右边的边框线 总结问题 1 固定了表格的高度 height 250 把高度去掉
  • JavaScript(函数,作用域和闭包)

    目录 一 什么是函数 1 1 常用系统函数 1 2 函数声明 1 3 函数表达式 二 预解析 2 1 函数自调用 2 2 回调函数 三 变量的作用域 3 1 隐式全局变量 四 作用域与块级作用域 五 作用域链 六 闭包 一 什么是函数 类似