广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >详解JavaScript闭包问题
  • 693
分享到

详解JavaScript闭包问题

2024-04-02 19:04:59 693人浏览 八月长安
摘要

闭包是纯函数式编程语言的传统特性之一。通过将闭包视为核心语言构件的组成部分,javascript语言展示了其与函数式编程语言的紧密联系。由于能够简化复杂的操作,闭包在主流JavaSc

闭包是纯函数式编程语言的传统特性之一。通过将闭包视为核心语言构件的组成部分,javascript语言展示了其与函数式编程语言的紧密联系。由于能够简化复杂的操作,闭包在主流JavaScript库以及高水平产品代码中日益流行起来。

一、变量的作用域

在介绍闭包之前,我们先理解JavaScript的变量作用域。变量的作用域分为两种:全局变量和局部变量。

1、全局变量


var n = 999; //全局变量

    function f1() {
        a = 100; //在这里a也是全局变量
        alert(n);
    }
    console.log(a); //100

在这里,函数内外部可以直接取到变量的值——全局变量

2、局部变量


//局部变量
    function f2() {
        var b = 22;
    }
    console.log(b);   //报错

在这里,函数外部无法直接取到函数内部定义的值——局部变量

讲到这里,当我们想要从外部取到局部变量的值,这时候该怎么办呢?
请接着往下看:

二、如何从外部获取局部变量

接下来我们看一个例子:


var outer = 'Outer'; // 全局变量
var copy; 
function outerFn(){ // 全局函数
 var inner = 'Inner'; // 该变量只有函数作用域,无法从外部访问
 function innerFn(){ // outerFn()中的innerFn() 
 // 全局上下文和外围上下文都可以在这里使用,
 // 因此可以访问到outer和inner 
 console.log(outer); 
 console.log(inner); 
 } 
 copy=innerFn; // 保存innerFn()的引用
 // 因为copy是在全局上下文中声明的,所以在外部可以使用
} 
outerFn(); 
copy(); // 不能直接调用innerFn(),但是可以通过在全局作用域中声明的变量来调用

来分析一下上面的例子。在innerFn()中可以访问变量outer,因为它处于全局上下文中。

在执行完outerFn()之后,执行了innerFn(),这是通过将该函数的引用复制到一个全局变量
copy中来实现的。在利用变量copy调用函数innerFn()执行时,此刻已经不在outerFn()的作
用域中了。因此下面的代码不是应该失败吗?
console.log(inner);
变量inner的值应该是undefined吧?可是,上面代码片段的输出却是:
“Outer”
“Inner”

这就是JavaScript的链式作用域结构,子对象会一级一级的向上寻找所有父对象的变量。所以父对象的所有变量对子对象都是可见的,反之则不成立。

这样我们就可以获取到函数内部的局部变量了。

三、闭包的概念

上面代码块中的copy()函数就是闭包。在我的理解,闭包就是能够读取到函数内部变量的函数。
而在JavaScript中,可以通过函数内部的子函数获取到局部变量,因此可以把闭包理解为定义在函数内部的函数。
可以把它理解为一个将函数内部和外部连接起来的桥梁。

四、闭包的作用

在我看来,闭包的作用主要体现在两个方面:

1、可以读取函数内部的变量

这个作用在上个代码块已经表现得很清楚。

2、可以将局部变量的值一直保存在内存中

总所周知,局部变量只有当使用的时候才会在内存中开辟出暂时的存储空间,在函数运行结束后会自动释放空间。而闭包的出现可以使得局部变量可以像全局变量一样一致存储在内存中。


        function c1() {
            var z = 9999;
            nAdd = function() {
                z += 1;
            }

            function c2() {
                console.log(z);
            }
            return c2;
        }
        var result = c1();
        result(); //9999
        nAdd();
        result(); //10000

在上述代码中,先执行一次c1(),此时z=9999;再执行一次nAdd(),使z+1;在执行一次c1()输出此时z的值,z=10000。说明z的值一直存储在内存中,并没有在第一次调用c1()后背自动消除。

此时就要注意,闭包的使用会消耗很大的内存,不要滥用闭包。在退出函数之前,将不使用的局部变量全部删除。

到此这篇关于详解JavaScript闭包问题的文章就介绍到这了,更多相关JavaScript闭包问题内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 详解JavaScript闭包问题

本文链接: https://www.lsjlt.com/news/129559.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 详解JavaScript闭包问题
    闭包是纯函数式编程语言的传统特性之一。通过将闭包视为核心语言构件的组成部分,JavaScript语言展示了其与函数式编程语言的紧密联系。由于能够简化复杂的操作,闭包在主流JavaSc...
    99+
    2022-11-12
  • JavaScript闭包详解
    目录1.什么是闭包?1.2 闭包的记忆性:函数能够记住定义时所处的环境1.3 闭包现象:JS中每次创建函数时都会创建闭包2.闭包的功能:记忆性、模拟私有变量2.1 记忆性2.2 模拟...
    99+
    2022-11-12
  • 关于javascript解决闭包漏洞的一个问题详解
    目录解决闭包漏洞的一个问题问题原理:方法一:方法二:解决办法;解决方法二:总结解决闭包漏洞的一个问题 在不修改下面代码的情况下,修改obj的内容 var o = (()=>{ ...
    99+
    2022-11-13
    js解决闭包漏洞的方法 js解决闭包漏洞的方法有哪些 js闭包陷阱
  • JavaScript高级之闭包详解
    目录1. 闭包的概念知识点的补充:2. 闭包的作用:3. 闭包示例3.1 点击li,输出当前li的索引号总结1. 闭包的概念 来看一般函数的执行和启发: func...
    99+
    2022-11-12
  • 一文详解JavaScript中的闭包
    JavaScript 闭包是一种重要的概念,在 JavaScript 编程中被广泛使用。尽管它可能会让初学者感到困惑,但它是理解 JavaScript 语言核心的关键概念之一。本文将深入探讨 JavaScript 闭包,让你了解它是如何工作...
    99+
    2023-05-14
    闭包 前端 JavaScript
  • JavaScript中let避免闭包造成问题
    关于 let 避免闭包带来的问题 利用面向对象思想完成买家信息删除功能,每一条信息包含: 姓名 电话 电话号码 省份 实现以下要求: 不能借用任何第三方库,需要使用...
    99+
    2022-11-12
  • JavaScript闭包closure详述
    目录一、什么是闭包二、闭包的作用前言: 在JavaScript部分,闭包是很重要的东西,所以我们今天就闭包的相关知识做一总结。首先,在了解闭包前,我们先要知道作用域的相关知识,前面 ...
    99+
    2022-11-12
  • JavaScript闭包原理及作用详解
    目录简介闭包的用途柯里化实现公有变量缓存封装(属性私有化)闭包的原理垃圾收集简介实际开发中的优化简介 说明 本文介绍JavaScript的闭包的作用、用途及其原理。 闭包的定义 闭包...
    99+
    2022-11-12
  • python 闭包详解
    闭包(closure)是函数式编程的重要的语法结构。函数式编程是一种编程范式 (而面向过程编程和面向对象编程也都是编程范式)。在面向过程编程中,我们见到过函数(function);在面向对象编程中,我们见过对象(object)。函数和对象的...
    99+
    2023-01-31
    详解 python
  • 一文详解JavaScript闭包典型应用
    目录1.应用1.1 模拟私有变量1.2 柯里化1.3 偏函数1.4 防抖1.5 节流2.性能问题2.1 内存泄漏2.2 常见的内存泄漏3.闭包与循环体3.1 这段代码输出啥3.2 改...
    99+
    2022-11-13
  • 关于Javascript闭包与应用的详解
    目录前言一、什么是闭包?1.1闭包满足条件代码1.2闭包产生时机二、常见闭包示例2.1 子函数做为实参传递2.2 计数器使用(函数返回)三、闭包作用3.1 闭包作用四、闭包应用4.1...
    99+
    2022-11-12
  • ahooks解决React闭包问题方法示例
    引言 本文是深入浅出 ahooks 源码系列文章的第三篇,这个系列的目标主要有以下几点: 加深对 React hooks 的理解。学习如何抽象自定义 hooks。构建属于自己的 Re...
    99+
    2022-11-13
  • JavaScript内存管理与闭包实例详解
    目录1. 内存管理的理解1.1 认识内存管理1.2 JavaScript的内存管理2. 垃圾回收(GC)2.1 认识垃圾回收2.2 GC算法 – 引用计数2.3 GC算法...
    99+
    2022-11-13
  • Python闭包与闭包陷阱举例详解
    目录1 什么是闭包2 闭包示例代码3 什么是闭包陷阱4 闭包陷阱代码实例4.2 第二组代码实例总结1 什么是闭包 在 Python 中,闭包是一种特殊的函数,它能够记住它所在的环境(...
    99+
    2023-01-28
    python中闭包的概念 python闭包详解 Python闭包
  • 详解JavaScript中的闭包是如何产生的
    目录闭包的产生多个内部函数共享一个闭包对象结尾这次从内存管理的角度来看看,闭包是怎么产生的。 我们知道,在调用函数时,其实会产生临时的 调用栈。这些调用栈保存的是 执行上下本,并实际...
    99+
    2022-12-28
    JavaScript闭包如何产生 JavaScript闭包
  • JavaScript闭包怎么理解
    这篇文章主要介绍“JavaScript闭包怎么理解”,在日常操作中,相信很多人在JavaScript闭包怎么理解问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScri...
    99+
    2022-10-19
  • JavaScript闭包如何理解
    这篇“JavaScript闭包如何理解”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Jav...
    99+
    2022-10-19
  • 怎么理解javascript闭包
    本篇内容介绍了“怎么理解javascript闭包”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!第一梯队理解...
    99+
    2022-10-19
  • Javascript作用域与闭包详情
    目录1、作用域2、作用域链3、词法作用域5、闭包的应用6、闭包的缺陷7、高频闭包面试题1、作用域 简单来说,作用域是指程序中定义变量的区域,它决定了当前执行代码对变量的访问权限 在E...
    99+
    2022-11-12
  • JavaScript深入理解作用域链与闭包详情
    目录深入作用域链与闭包作用域链[[Environment]]完善环境记录闭包函数实例什么是闭包变量绑定同一个闭包总结深入作用域链与闭包 为什么要把作用域链和闭包放在一起讲呢,它们有什...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作