闭包的理解和应用场景

1.什么是闭包??

在了解闭包之前,我们要清楚js的另一个知识,那就是作用域链。什么是作用域链,比如一个函数里面包含着另一个函数,里面的函数在使用一个变量的时候会在函数自己的作用域内去查找这个变量,如果没有,就会沿着作用域链向上级函数的作用域去查找,这样的一个过程我们就叫做作用域链。

作用域链是可以有函数内部向外部去查找使用需要的变量,但是无法从上到下去查找函数内部的变量,所以这时候就出现了闭包,闭包就是解决这一问题。简单来说,闭包就是一个可以访问另一个函数内部变量的函数。

 1  function f1(){
 2             var n = 100
 3             function f2(){
 4                 n=n+100
 5                 console.log(n);
 6             }
 7             return f2
 8         }
 9         var temp = f1()
10         temp() // 200

在上述代码中创建了一个函数f1(),并在其内部创建了一个函数f2(),在正常情况下,在f2中可以访问f1中的变量n,但是f1不能访问f2中定义的变量,但是通过return将f2作为参数返回给f1,通过f2闭包来建立起与f1的联系,这样就可以访问f1中的变量

例子2.

 var aaa = (function(){
        var a = 1;
        function bbb(){
                a++;
                console.log(a);
        }
        function ccc(){
                a++;
                console.log(a);
        }
        return {
                b:bbb,             //json结构
                c:ccc
        }
    })();
    console.log(aaa.a);//undefined
    aaa.b();     //2
    aaa.c()      //3

在上述代码中,由于闭包的作用,变量在函数使用后并没有被回收,而是继续存在内存中,当第二次使用该变量的时候,它的值应该是第一次试用后改变后的值,因此,aaa.c(),的值是在aaa.b()使用后的值得举出上在加1,最后输出的结果是3

2.闭包的应用场景

当我们使用计时器的时候setTimeout(function(){},1000)的时候,第一个参数是一个函数,或者是一段执行的js代码,第二参数是第一个参数执行的时间间隔。

当我们需要往第一个参数(这里针对第一个参数是一个函数的情况)是一个函数,需要往这个哈数传递参数的时候,这时就可以使用闭包:

 1  function f1(name) {
 2             var Name = name
 3             function f2() {
 4                 console.log(Name);
 5             }
 6             return f2
 7         }
 8         var arr = [1, 2]
 9         for (let i = 0; i < arr.length; i++) {
10             let num = arr[i]
11             var func = f1(num)
12             setTimeout(func, 1000);
13         }

上述代码输出结果为:1,2

闭包应用场景之封装变量:

 1  var counter = (function(){
 2         var privateCounter = 0; //私有变量
 3         function change(val){
 4             privateCounter += val;
 5         }
 6         return {
 7             increment:function(){   //三个闭包共享一个词法环境
 8                 change(1);
 9                 console.log(privateCounter);
10
11             },
12             decrement:function(){
13                 change(-1);
14                 console.log(privateCounter);
15
16             },
17             value:function(){
18                 return privateCounter;
19             }
20         };
21     })();
22
23     console.log(counter.value());//0
24     counter.increment();//1
25     counter.increment();//2

闭包总结:

1.闭包是一个可以访问另一个函数内部变量的函数

2.一般的函数在使用完后,内部的变量会被回收,而闭包不会,变量依旧存在于内存中,不会消失。

3.频繁的使用闭包会占用内存,降低CPU性能,但是可以释放内存(在使用完闭包后,手动使变量为null)

原文地址:https://www.cnblogs.com/1825224252qq/p/11782348.html

时间: 2024-08-28 20:37:44

闭包的理解和应用场景的相关文章

个人对js闭包的理解

闭包算是前端面试的基础题,但我看了很多关于闭包的文章博客,但感觉很多对于闭包的理想还是有分歧的,现在网上对闭包的理解一般是两种: 有些文章认为闭包必须要返回嵌套函数中里面用到外面函数局部变量的方法才叫闭包,有两个条件:1).函数嵌套,内部函数要用到外部函数的局部变量 2).内部函数必须返回 有些文章认为只要函数嵌套内部函数用到了外部局部变量就是闭包,不要返回内部函数 我们先看看闭包的定义到底是什么,然后在来分析我在学习js的时候不同阶段对闭包的误解.在<javascript高级程序设计中>对闭

我对JavaScript闭包的理解

一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. Js代码 var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. Js代码 function f1(){ var n=999; } alert(n); // error 这里有一个地方需要注意,函数

Javascript之旅——第十站:为什么都说闭包难理解呢?

原文:Javascript之旅--第十站:为什么都说闭包难理解呢? 研究过js的朋友大多会说,理解了js的原型和闭包就可以了,然后又说这些都是js的高级内容,然后就又扯到了各种神马的作用域...然后不少 人就会被忽悠的云里雾里...下面我也试着来说说闭包,看我说的这个是否浅显易懂... 一:闭包含义 闭包是个专业词汇,这样才能显得在js中是高大上的货色,官方定义我这里就不敢修改它,定义如下:就是有权访问另一个函数作用域的变量的函数. 二:一个简单的场景 上面的定义大概也能看得懂,但是不知道为什么

闭包的理解

闭包的理解, wondow.onload=function  aaa(){   //父函数 var a=12;//局部变量 function  bbb(){   //子函数 alert(a);  //子函数可以使用父函数的局部变量,这种现象叫做闭包,是变量作用域的一种形式. } bbb() }

javascript中重要概念-闭包-深入理解

在上次的分享中javascript--函数参数与闭包--详解,对闭包的解释不够深入.本人经过一段时间的学习,对闭包的概念又有了新的理解.于是便把学习的过程整理成文章,一是为了加深自己闭包的理解,二是给读者提供学习的途径,避免走弯路. 在javascript--函数参数与闭包--详解这篇文章中,我详细介绍了闭包的概念.以下的分享对闭包的基本概念只会稍稍带过.如果对闭包的概念不熟悉的同学,请移步至javascript--函数参数与闭包--详解. 以下的分享会分为如下内容: 1.let命令 2.闭包特

关于闭包的理解

发表一下关于闭包的理解:首先把每一个函数看成一个一个的"小黑屋"小黑屋里面可以看到外面的东西,但外面却看不到小黑屋里面的东西,就好比是函数可以访问外面全局变量,但是外面却访问不了"小黑屋"里面的变量:变量分为全局变量和局部变量:列:函数可以访问外面全局变量 var a=1; function fun1(){ alert(a); }fun1(); // 1 列:外面却访问不了"小黑屋"里面的变量 function fun2(){ var a=2;

javascript 闭包的理解

看过很多谈如何理解闭包的方法,但大多数文章,都是照抄或者解释<Javascript高级程序设计(第三版)>对于闭包的讲解,甚至例程都不约而同的引用高程三181页‘闭包与变量’一节的那个“返回数组各个项,结果各个项的值都相同”的例程,还有些文章的讲解过程上一步与下一步之间的跨度简直就是一步登天,让人反复看半天都无法理解. 闭包的理解需要很多概念做铺垫,包括变量作用域链.执行环境.变量活动对象.引用式垃圾内存收集机制等,如果对本文涉及的这些概念不理解,可以去找本<Javascript高级程序

作用域+闭包+this理解

函数预解析过程   函数会覆盖同名变量 也就是var  他的优先级高   如果是同名函数则后者覆盖前者   逐行解读代码的时候 表达式 和参数 会改变预解析仓库里面的值..也就是表达式能干掉函数   域和域之间的关系 <script>标签存在上下文关系   走完上下文标签的变量  下面的可以用上面的   自上而下  函数  json等 子级作用域到父级作用域的过程 叫作用域链        由里到外 当子级找不到变量 会到父级找  如果有表达式的话就会更改全局变量 也就是函数里面没有var  

闭包的理解学习

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 下面就是我的学习笔记,对于Javascript初学者应该是很有用的. 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外