详解JavaScript闭包问题

闭包是纯函数式编程语言的传统特性之一。通过将闭包视为核心语言构件的组成部分，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闭包问题内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • js闭包和垃圾回收机制示例详解

    前言 闭包和垃圾回收机制常常作为前端学习开发中的难点,也经常在面试中遇到这样的问题,本文记录一下在学习工作中关于这方面的笔记. 正文 1.闭包 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现.作为一个JavaScript开发者,理解闭包十分重要. 1.1闭包是什么? 闭包就是一个函数引用另一个函数的变量,内部函数被返回到外部并保存时产生,(内部函数的作用域链AO使用了外层函数的AO) 因为变量被引用着所以不会被回收,因此可以用来封装一个私有

  • js闭包的9个使用场景

    js闭包的9个使用场景

    1.返回值(最常用) //1.返回值 最常用的     function fn(){         var name="hello";         return function(){             return name;         }     }     var fnc = fn();     console.log(fnc())//hello 这个很好理解就是以闭包的形式将 name 返回. 2.函数赋值 var fn2; function fn(){   

  • 关于Javascript闭包与应用的详解

    关于Javascript闭包与应用的详解

    前言 Javascript闭包在学习过程中一般较难理解,本文从什么是闭包,常见闭包示例,闭包作用,闭包应用及闭包问题等方面来介绍闭包,希望能给大家带来更深层次的认识,有不恰当之处请指出,谢谢. 一.什么是闭包? 闭包是指一个嵌套的内部(子)函数引用了父函数作用域中数据的函数,这就产生了闭包. 关键理解: 1. 产生闭包必须要有嵌套函数 2. 闭包是函数,并是嵌套的内部函数 3. 闭包内部函数必须要引用父函数作用域中数据 如果不满足以上条件,则不能产生闭包,接下来示例说明. 1.1闭包满足条件代码

  • JS闭包原理及其使用场景解析

    闭包定义 可以通过内层函数访问外层函数的作用域的组合叫做闭包. 闭包使用场景 使用闭包来实现防抖 function debounce(callback, time) { var timer; return function () { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { callback() }, time) } }<br data-filtered="filtered"><b

  • javascript中闭包closure的深入讲解

    简介 闭包closure是javascript中一个非常强大的功能.所谓闭包就是函数中的函数,内部函数可以访问外部函数的作用域范围,从而可以使用闭包来做一些比较强大的工作. 今天将会给大家详细介绍一下闭包. 函数中的函数 我们提到了函数中的函数可以访问父函数作用域范围的变量,我们看一个例子: function parentFunction() { var address = 'flydean.com'; function alertAddress() { alert(address); } al

  • 详解JavaScript闭包问题

    闭包是纯函数式编程语言的传统特性之一.通过将闭包视为核心语言构件的组成部分,JavaScript语言展示了其与函数式编程语言的紧密联系.由于能够简化复杂的操作,闭包在主流JavaScript库以及高水平产品代码中日益流行起来. 一.变量的作用域 在介绍闭包之前,我们先理解JavaScript的变量作用域.变量的作用域分为两种:全局变量和局部变量. 1.全局变量 var n = 999; //全局变量 function f1() { a = 100; //在这里a也是全局变量 alert(n);

  • 一文详解JavaScript闭包典型应用

    一文详解JavaScript闭包典型应用

    目录 1.应用 1.1 模拟私有变量 1.2 柯里化 1.3 偏函数 1.4 防抖 1.5 节流 2.性能问题 2.1 内存泄漏 2.2 常见的内存泄漏 3.闭包与循环体 3.1 这段代码输出啥 3.2 改造方法 4.总结 1.应用 以下这几个方面是我们开发中最为常用到的,同时也是面试中回答比较稳的几个方面. 1.1 模拟私有变量 我们都知道JS是基于对象的语言,JS强调的是对象,而非类的概念,在ES6中,可以通过class关键字模拟类,生成对象实例. 通过class模拟出来的类,仍然无法实现传

  • 详解JavaScript匿名函数和闭包

    概述 在JavaScript前端开发中,函数与对其状态即词法环境(lexical environment)的引用共同构成闭包(closure).也就是说,闭包可以让你从内部函数访问外部函数作用域.在JavaScript,函数在每次创建时生成闭包.匿名函数和闭包可以放在一起学习,可以加深理解.本文主要通过一些简单的小例子,简述匿名函数和闭包的常见用法,仅供学习分享使用,如有不足之处,还请指正. 普通函数 普通函数由fucntion关键字,函数名,() 和一对{} 组成,如下所示: function

  • 详解JavaScript作用域 闭包

    JavaScript闭包,是JS开发工程师必须深入了解的知识.3月份自己曾撰写博客<JavaScript闭包>,博客中只是简单阐述了闭包的工作过程和列举了几个示例,并没有去刨根问底,将其弄明白! 现在随着对JavaScript更深入的了解,也刚读完<你不知道的JavaScript(上卷)>这本书,所以乘机整理下,从底层和原理上去刨一下. JavaScript并不具有动态作用域,它只有词法作用域.词法作用域是在写代码或者说定义时确定的,而动态作用域是在运行时确定的.了解闭包前,首先我

  • 详解JavaScript作用域、作用域链和闭包的用法

    1. 作用域 作用域是指可访问的变量和函数的集合. 作用域可分为全局作用域和局部作用域. 1.1 全局作用域 全局作用域是指最外层函数外面定义的变量和函数的集合. 换言之,这些最外层函数外面定义的变量和函数在任何地方都能访问. 举个例子: // 最外层定义变量 var a = 1; console.log(a); // 最外层可以访问 function fnOne() { // 最外层函数 console.log(a); // 函数内可以访问 function fnTwo() { // 子函数

  • js对象实例详解(JavaScript对象深度剖析,深度理解js对象)

    js对象实例详解(JavaScript对象深度剖析,深度理解js对象)

    这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕. 平时发的文章基本都是开发中遇到的问题和对最佳解决方案的探讨,终于忍不住要写一篇基础概念类的文章了. 本文探讨以下问题,在座的朋友各取所需,欢迎批评指正: 1.创建对象 2.__proto__与prototype 3.继承与原型链 4.对象的深度克隆 5.一些Object的方法与需要注意的点 6.ES6新增特性 下面反复提到实例对象和原型对象,通过构造函数 new

  • 详解JavaScript自定义函数

    一.定义方法:在Javascript中必须用function关键字 function funcName(arg1,arg2...) { statements; return "变量值"; //返回值可以根据函数的需要 } 函数名是函数自身的一个引用.此种方式创立的函数引用是独立存在的,无法删除. 1.调用函数:函数名(参数列表). 传递的参数不必与函数定义的参数个数一致,并且可以设定函数参数的默认值. function example(a,b){ var a = arguments[0

  • 详解JavaScript中的链式调用

    链模式 链模式是一种链式调用的方式,准确来说不属于通常定义的设计模式范畴,但链式调用是一种非常有用的代码构建技巧. 描述 链式调用在JavaScript语言中很常见,如jQuery.Promise等,都是使用的链式调用,当我们在调用同一对象多次其属性或方法的时候,我们需要多次书写对象进行.或()操作,链式调用是一种简化此过程的一种编码方式,使代码简洁.易读. 链式调用通常有以下几种实现方式,但是本质上相似,都是通过返回对象供之后进行调用. this的作用域链,jQuery的实现方式,通常链式调用

  • 详解JavaScript的this指向和绑定

    注意: 本文属于基础篇,请大神绕路.如果你不够了解,或者了解的还不完整,那么可以通过本文来复习一下. this 指向的类型 刚开始学习 JavaScript 的时候,this 总是最能让人迷惑,下面我们一起看一下在 JavaScript 中应该如何确定 this 的指向. this 是在函数被调用时确定的,它的指向完全取决于函数调用的地方,而不是它被声明的地方(除箭头函数外).当一个函数被调用时,会创建一个执行上下文,它包含函数在哪里被调用(调用栈).函数的调用方式.传入的参数等信息,this

  • 详解JavaScript私有类字段和TypeScript私有修饰符

    JavaScript私有类字段和隐私需求 在过去,JavaScript 没有保护变量不受访问的原生机制,当然除非是典型闭包. 闭包是 JavaScript 中许多类似于私有模式(如流行的模块模式)的基础.但是,近年来 ECMAScript 2015 类被使用后,开发人员感到需要对类成员的隐私进行更多控制. 类字段提案(在撰写本文时处于第 3 阶段)试图通过引入私有类字段来解决问题. 让我们看看它们是什么样子的. 一个 JavaScript 私有类字段的例子 这是一个带有私有字段的 JavaScr

随机推荐