JavaScript闭包函数

JavaScript闭包函数JavaScript闭包函数1概述2词法作用域3闭包1概述一个函数和对其周围状态(词法环境)的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包(closure)。也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域。在JavaScript中,每当创建一个函数,闭包就会在函数创建的同时被创建出来。2词法作用域请看这段代码:functioninit(){varname=”Mozilla”;//name是一个被init创建的局部变量

大家好,又见面了,我是你们的朋友全栈君。

1 概述

一个函数和对其周围状态(词法环境)的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包(closure)。也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域。

在 JavaScript 中,每当创建一个函数,闭包就会在函数创建的同时被创建出来。

2 词法作用域

请看这段代码:

function init() { 
   
    var name = "Mozilla"; // name 是一个被 init 创建的局部变量
    function displayName() { 
    // displayName() 是内部函数,一个闭包
        console.log(name); // 使用了父函数中声明的变量
    }
    displayName();
}
init();

结果是:Mozilla

init() 创建了一个局部变量 name 和一个名为 displayName() 的函数。displayName() 是定义在 init() 里的内部函数,并且仅在 init() 函数体内可用。displayName() 没有自己的局部变量,然而,因为它可以访问到外部函数的变量,所以 displayName() 可以使用父函数 init() 中声明的变量 name 。

运行该代码后发现, displayName() 函数内的 console.log() 语句成功显示出了变量 name 的值(该变量在其父函数中声明)。这个词法作用域的例子描述了分析器如何在函数嵌套的情况下解析变量名。

**词法(lexical)**一词指的是,词法作用域根据源代码中声明变量的位置来确定该变量在何处可用。嵌套函数可访问声明于它们外部作用域的变量。

3 闭包

function makeFunc() { 
   
    var name = "Mozilla";// 定义局部变量 name
    function displayName() { 
   // 定义函数 displayName()
        console.log(name);
    }
    return displayName;
}
var myFunc = makeFunc();
myFunc();

结果是:Mozilla

运行这段代码的效果和之前 init() 函数的示例完全一样。其中不同的地方在于内部函数 displayName() 在执行前,从外部函数返回。

这段程序的大致过程如下:

1、第8行代码中,makeFunc()表示调用这个函数,调用过程中又调用了displayName这个函数,displayName函数执行了console.log()语句,最后将displayName作为返回值返回。
2、因此第8行代码中makeFunc()将返回值displayName赋给了myFunc,所以可以看作myFunc就是displayName这个函数。
3、最后使用myFunc进行函数调用,输出了Mozilla。

在一些编程语言中,一个函数中的局部变量仅存在于此函数的执行期间。一旦 makeFunc() 执行完毕,你可能会认为 name 变量将不能再被访问。然而,因为代码仍按预期运行,所以在 JavaScript 中情况显然与此不同。

原因在于,JavaScript中的函数会形成了闭包。== 闭包是由函数以及声明该函数的词法环境组合而成的。==该环境包含了这个闭包创建时作用域内的任何局部变量。在本例子中,myFunc 是执行 makeFunc 时创建的 displayName 函数实例的引用。displayName 的实例维持了一个对它的词法环境(变量 name 存在于其中)的引用。因此,当 myFunc 被调用时,变量 name 仍然可用,其值 Mozilla 就被传递到console.log()中。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/150539.html原文链接:https://javaforall.net

(0)
上一篇 2022年6月22日 下午11:00
下一篇 2022年6月22日 下午11:00


相关推荐

  • 数十款代码编辑器,PyCharm为何如此优秀?

    数十款代码编辑器,PyCharm为何如此优秀?这两年被 Python 初学小白问到最多的问题就是 该用什么代码编辑工具 说实话 我个人是用 JupyterNoteb 最多 主要是经常做数据可视化 方便些 但对于初学者来说 PyCharm 仍是不二的选择 甚至我建议你只用 PyCharm 从当前所有主流 PythonIDE 来看 PyCharm 是最适合做 Python 开发的 特别对新手而言 可以节省很多不必要的时间成本 我也常用 PyCharm 写脚本 偶尔开发一些 web 应用 PyCharm 的完善程度可以说没有一个 IDE 能达到 其他 IDE 相比 PyCha

    2026年3月27日
    1
  • jedis和jediscluster_java coroutine

    jedis和jediscluster_java coroutine1.JedisCluster类结构JedisCluster是针对RedisCluster的java客户端,它封装了java访问redis集群的各种操作,包括初始化连接、请求重定向等。我们先来看下JedisCluster的类结构:jedisCluster.pngJedisCluster初始化时,所有的集群连接信息都是封装在JedisClusterInfoCache里,由于jedis本身不是线程安全…

    2022年10月15日
    5
  • 谷歌揭秘nano-banana模型:Gemini 2.5 Flash Image!

    谷歌揭秘nano-banana模型:Gemini 2.5 Flash Image!

    2026年3月13日
    1
  • JAVA的除法计算

    JAVA的除法计算我们都知道在JAVA中”/“是取整,”%”是取余,那么我们要是想算类似1÷10=0.1怎么算?方法一DecimalFormat //定义方法 publicstaticStringChufa(inta,intb){ //“0.00000000”确定精度 DecimalFormatdF=newDecimalFormat(“0.00000000”); …

    2022年5月24日
    58
  • OpenClaw Sub-Agent vs Skill 选型指南

    OpenClaw Sub-Agent vs Skill 选型指南

    2026年3月13日
    4
  • 100行Html5+CSS3+JS代码实现元旦倒计时界面

    一、前言二、圣诞树效果展示:三、步骤如果之前看过我这篇文章的1.下载VSCode下载链接:VSCode在Hbuilder、idea运行也是可以的,这里推荐使用VSCode2.配置插件三个插件对应的功能:改写标签后自动完善 切换成中文页面 让代码在网页中打开,默认键Alt+B3.构建三个文件在桌面新建一个空的文件夹,用VSCode打开 在VSCode新建三个文件index.htmldomtree….

    2022年4月7日
    47

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号