三、函数高级（四）-闭包

最新推荐文章于 2023-06-21 09:42:03 发布
最新推荐文章于 2023-06-21 09:42:03 发布
阅读量290 收藏 1
点赞数
分类专栏： WEB基础-JS高级
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45602227/article/details/119863230
版权

一、函数对象隐含属性

	
	函数声明，就相当于创建函数对象。函数对象中有以下隐含属性:		
			
			1、arguments
						1) 在调用函数时,对函数数据预处理阶段进行初始化。
						   arguments赋值为实参列表，并将其添加为执行上下文对象的属性。	
						   
						2) 函数调用时以及调用完毕，arguments会自动初始化为undefined。
						   
			2、this
						1) this从广义上来说是函数对象隐藏的属性，
						   但是实质上this是执行上下文对象的属性，而不是函数的属性。
						
						2) 调用函数时,对函数数据预处理阶段初始化。
						   this属性赋值为调用函数的对象。

						   
						   						
			3、__proto__(显示原型)
						1) 默认指向构造函数隐式原型执行的原型对象,即Function.prototype


 			4、prototype(隐式原型)
						1) 默认指向构造函数隐式原型执行的原型对象,即Function.prototype

			
			5、 [[Scopes]](作用域链属性)
						1) 外部不能访问，只供JS引擎访问。
						
						2) 作用域链在函数编码时就已经确定。
						   作用域链是抽象的概念,而作用域链属性是作用域链具体的代码实现。
						
						3) 作用域链属性是个数组。从索引值0开始查找。
						   默认情况下,在函数声明，即函数对象创建时，索引值0 指向window对象。
						   在闭环函数中，
1.1 函数对象隐含属性
1）arguments、proto、prototype、[[Scopes]] 是函数对象隐含的属性
            function s(){
                var h="!23";
            }

            console.dir(s)

在这里插入图片描述

2）[[Scopes]] 也是是函数对象隐含的属性。但是只给JS引擎访问。

    function sss(){
        var s=12;
        console.log("123")
    }

    console.log("arguments" in sss)
    console.log("prototype" in sss)
    console.log("__proto__" in sss)
    console.log("[[Scopes]]" in sss)

在这里插入图片描述

3）this从广义上来说是函数对象隐含的属性，但是实质上this是函数对象对应的执行上下文对象的属性

    function sss(){
        var s=12;
        console.log("123")
    }

    console.log("arguments" in sss) //true
    console.log("prototype" in sss) //true
    console.log("__proto__" in sss) //true
    console.log("this" in sss)   //false

在这里插入图片描述

1.2 arguments属性
1）arguments属性在函数调用时，执行函数体代码前进行初始化的
2）arguments属性在函数调用完毕会自动初始化为null

    function sss(){
        console.log(arguments)
    }
    
    console.log(sss.arguments)
    sss("123");
    console.log(sss.arguments)

在这里插入图片描述

1.3 [[Scopes]] 属性（ 闭包之 [[Scopes]] 属性 ）

	   作用域链是一个抽象的概念，在函数硬编码阶段，作用域链就已经确定。
       作用域链属性是作用域链这个抽象概念的代码实现。

二、闭包


	
	+++ 闭包的由来
			1、函数执行完毕,函数内部的变量就会被释放。
				但是由于闭包，延长了闭包函数引用外部函数的变量的存储时间。
				
			2、函数作用域是独立的、封闭的，外部的执行环境是访问不了的。
			     但是由于闭包,函数可以访问另外一个函数作用域的变量。	
	
	
	+++ 闭包
			1) 从狭义上来说，闭包就是能够读取其他函数内部变量的函数。
			   函数嵌套,内部函数引用了外部函数的变量,则该内部函数叫做闭包函数。
			
			   
			2) 从广义上来说。闭包就是闭包作用域对象。它只保存闭包函数引用外部函数的变量。
			   该对象被闭包函数的作用域链属性所引用。
						
						
	+++ 产生闭包的条件
			1) 函数嵌套
			2) 内部函数引用了外部函数中的数据。
			3) 执行外部函数。
						即闭包函数被声明，闭包函数对象被创建。



	+++ 闭包的声明周期
			闭包函数定义执行，就会创建闭包。
			闭包创建后，闭包函数不被外部引用，就会死亡。



	+++ 闭包的作用
			1、延长了函数局部变量的生命周期。
					使函数内部的变量在函数执行完毕后，仍然存活在内存中。
					
			2、在函数外部可以直接操作到函数内部的数据。
1.1 闭包
1）创建闭包的条件
>>>>>> 内部函数必须引用外部函数的变量，才会创建闭包作用域对象

内部函数没有引用外部函数的变量则不会创建闭包作用域对象

   
        function s(){
            var a=12;

            function ss(){
               console.log("123")
            }

            return ss;
        }

        var h=s();
        h();

在这里插入图片描述
内部函数引用了外部函数的变量才会创建闭包作用域对象

        function s(){
            var a=12;

            function ss(){
               a++;
               console.log("123")
            }

            return ss;
        }
        
        var h=s();
        h();

在这里插入图片描述

>>>>>> 闭包函数定义执行，才会创建闭包
2）闭包的生命周期
	
	闭包的生命周期：
	
		产生: 闭包函数定义执行，就会创建闭包。 
		死亡: 闭包函数对象不被外部引用就会死亡。
>>>>>> 闭包函数定义执行时，才会创建闭包

在调用ff函数后，首先会初始化ff函数数据，
由于变量提升与函数提升。此时闭包函数f定义执行，就会创建闭包。

    function ff(){
        //在执行该行代码时，就已经产生了闭包。
        var a=1;

        function f(){
            a++;
            console.log(a)
        }

        return f;
    }

    var f=ff();

在调用ff函数后，首先会初始化ff函数数据，
由于变量提升与函数提升。变量a与变量f会被提升，但是f的初始化没有被提升。
所以在执行f的初始化时，才会创建闭包。

    function ff(){
        var a=1;
		
		//在执行该行代码时，才会产生闭包。
        var f=function (){
            a++;
            console.log(a)
        }

        return f;
    }

    var f=ff();
>>>>>> 闭包函数对象不会外部引用，就会死亡
    function ff(){
        //在执行该行代码时，就已经产生了闭包。
        var a=1;

        function f(){
            a++;
            console.log(a)
        }

        return f;
    }

    var f=ff();
    f();
	
	//设置f为null。此时闭包函数不被外界访问，成为垃圾对象
	//此时闭包就会死亡。
	f=null;
3）闭包的作用
	
	闭包的作用:	
		1、延长了函数局部变量的生命周期。
				使函数内部的变量在函数执行完毕后，仍然存活在内存中。
				
		2、在函数外部可以直接操作到函数内部的数据。
>>>>>> 闭包的由来

a、函数在调用完后，其内部定义的变量就会被释放。
b、外部不能访问函数内部定义的变量。


        function s(){
            var a=12;
            console.log(a++)
        }

        //函数在调用后，其内部定义的变量就会被释放
        s();

        //外部不能访问函数内部变量
        console.log(a);//报错
>>>>>> 闭包的作用

1）延长了函数局部变量的生命周期
2）在函数外部可以直接操作

        
        function s(){
            var a=12;

            function ss(){
                a++;
                console.log(a);
            }

            return ss;
        }

        var h=s();
        h();
        h();

在这里插入图片描述

1.2 闭包的应用
1）利用闭包定义JS模块
	
	1、JS模块是具有特定功能的JS文件。
	2、所有的数据和函数封装到一个函数中。
	3、只向外暴露一个具有包含n个方法的对象。
>>>>>> 方式一

index.js


function myModel(){

    var msg="abc"

    function doSomething(){
        console.log(msg.toUpperCase())
    }


    function doSomething2(){
        console.log(msg.toLocaleLowerCase())
    }


    return {
        "doSomething":doSomething,
        "doSomething2":doSomething2
    }
}

index.html

	 <script type="text/javascript" src="a.js" ></script>
    
    <script>

       var model=myModel();
       model.doSomething();
       model.doSomething2();


    </script>

在这里插入图片描述

>>>>>> 方式二（典型封装）

index.js



(function(){
    var msg="abc"

    function doSomething(){
        console.log(msg.toUpperCase())
    }


    function doSomething2(){
        console.log(msg.toLocaleLowerCase())
    }

	
	//向外暴露
    window.myModel={
        "doSomething":doSomething,
        "doSomething2":doSomething2
    }
})();

index.html

	 <script type="text/javascript" src="a.js" ></script>
    
    <script>

       myModel.doSomething();
       myModel.doSomething2();


    </script>

在这里插入图片描述

3）利用闭包循环添加监听事件
>>>>>> 方式一：普通添加

    var divs=document.getElementsByTagName("div");
    for(var i=0;i<divs.length;i++){

        divs[i].index=i;
        divs[i].onclick=function(){
           console.log("这是第"+this.index+"个按钮")
        }

    }
>>>>>> 方式二：利用闭包来实现

    var divs=document.getElementsByTagName("div");
    for(var i=0;i<divs.length;i++){
        (function(i){
            divs[i].onclick=function(){
                console.log("这是第"+i+"个按钮")
            }
        })(i);
    }
1.3 作用域链属性 – [[Scopes]] 属性 【闭包的本质】


	1) 作用域链是一个抽象的概念，在函数硬编码阶段，作用域链就已经确定。
       作用域链属性是作用域链的代码实现。在函数定义执行时确定。
       
	2) 作用域链属性是内部属性，外部无法访问。只供JS内部调用。

	3) 作用域链属性一个指向变量对象的指针列表，它只引用但不实际包含变量对象。
				a、普通函数中作用域链属性只有一个全局执行上下文对象,即window对象。 
	   			
	   			b、闭包函数中作用域链属性从索引值0开始依次是闭包作用域对象、全局执行上下文。	
						1) 闭包作用域对象是我自己定义的概念。
						   闭包作用域对象存储的是闭包函数引用上一级函数的变量。
						
						2) 闭包作用域对象只有在闭包函数引用外部函数变量时才会形成，否则不会。
	
	4) 闭包作用域对象
			a、闭包作用域对象是我自己定义的概念。
			   它只保存闭包函数引用的外部函数的变量。
			
			b、闭包作用域对象只有在内部函数引用外部函数变量时才会形成。
							
	5) 作用域链属性的作用:
			查找变量时，首先在自身作用域对应的执行上下文对象中查找变量，
	   		如果找不到，就到作用域链属性中从索引值0开始依次向上查找。
1）作用域链属性是函数的内部函数，只给JS引擎访问

        function s(){
            var h=12;
        }

        console.dir(s)

在这里插入图片描述

2）作用域链属性一个指向变量对象的指针列表
>>>>>> 普通函数的作用域链属性中只有一个window对象
        function s(){
            var h=12;
        }

        console.dir(s)

在这里插入图片描述

>>>>>> 闭包函数的作用域链属性中从索引值0开始依次是闭包作用域对象、全局执行上下文。


        function s(){
            var h=12;

            function s2(){
                h++;
            }

            return s2;
        }

        var m=s();

        console.dir(m)

在这里插入图片描述


        function s(){
            var h=12;

            function s2(){
                var a=12;
                function s3(){
                    a++;
                    h++;
                }

                return s3;
            }

           return s2();
        }

        var m=s();

        console.dir(m)

在这里插入图片描述

3）闭包作用域对象
>>>>>> 闭包作用域对象只保存闭包函数引用外部函数的变量，外部函数的其他变量不会保存。
        function s(){
            var h=12;
            var s=122;
            function s2(){
               h++;
            }

           return s2;
        }

        var m=s();

        console.dir(m)

在这里插入图片描述

>>>>>> 闭包作用域对象只在内部函数引用外部时才会创建。
  function s(){
            var h=12;
            var s=122;
            function s2(){
              console.log("!23")
            }

           return s2;
        }

        var m=s();

        console.dir(m)

在这里插入图片描述

4）作用域链属性的作用
	
	作用域链是在编码时就已经确定的，而作用域链属性是作用域链的代码实现。

	查找变量：
			1、沿着作用域链查找变量
					查找变量时，首先在自身作用域对象的执行上下文对象查找，
					找不到，就到函数的作用链属性中查找,从0开始依次查找。
					
			2、沿着原型链查找对象的属性
1.5 常见的闭包
>>>>>> 将函数对象作为另外一个函数的返回值
    function ff(){
        var a=1;

        function f(){
            a++;
            console.log(a)
        }

        return f;
    }
	
	//创建了一个闭包函数，即产生一个闭包作用域对象
    var f=ff();
    f(); //2
    f();//3

	//又创建了一个闭包函数，即产生一个闭包作用域对象
    var f2=ff();
    f2();//2
    f2();//3

在这里插入图片描述

>>>>>> 将函数作为实参传递给另一个函数调用
  function showDelay(msg,time){
        setTimeout(function(){
            alert(msg)
        },time)
  }

  showDelay("213",2000)
1.6 闭包的缺点
	
	闭包的缺点:
			闭包的作用就是延长了局部变量的生命周期。
	   		但是如果闭包函数执行完，如果没有释放闭包函数，容易造成内存泄露。
		
	

       
    function s(){
        var a=new Array(10000);

        function ss(){
            console.log(a.length)
        }

        return ss;
    }

    var h=s();
    h();

    h=null; //让闭包函数成为垃圾对象，被回收

三、内存泄露与内存溢出

	
	+++ 内存溢出与内存泄漏
			内存溢出:
					内存溢出是一种程序运行的错误。
					当程序的运行内存超过剩余内存时，就会抛出内存溢出的报错。
			
			内存泄露：
					内存泄露是指占用的内存没有及时释放
					内存泄露积累多了容易造成内存溢出。
							内存泄露是量变，内存溢出是质变。
	
			
	+++ 常见的内存泄露:
			1) 意外的全局变量
			2) 没有及时清理的定时器
			3) 没有及时清理闭包函数
3.1 直视JS运行占用的内存
        var obj={};
        for(var i=0;i<1000;i++){
                obj[i]=new Array(1000000)
        }

        console.log(obj.length)

运行上述代码，查看内存，会发现内存一直向上飙升
在这里插入图片描述

3.2 内存泄露与内存溢出
1) 内存泄露是一种程序运行的错误

在这里插入图片描述

2) 内存溢出是指占用的内存没有及时释放

闭包函数在运行完后，没有及时释放，就会造成内存溢出

        function  f(){
            var a=1;

            function f2(){
                a++;

            }
            return f2;
        }
        var h=f();
        h();
3) 内存溢出与内存泄露的关系
	
	内存溢出是量变，内存泄露是质变。
	内存溢出积累多了，就会造成内存泄露。
3.3 常见的内存溢出（解决方案）
1）意外的全局变量
        //1.意外的全局变量
        function s(){
            a=new Array(10000)
            console.log(a.length)
        }
		
		//解决方案
        // a=null;
2）没有及时清理定时器

        //2.没有及时清理定时函数
        var id=setInterval(function s(){
            console.log("!23")
        },3000)

		//解决方案
        // clearInterval(id)
3）没有及时清理闭包函数

        //3.闭包
        function  f(){
            var a=1;

            function f2(){
                a++;

            }
            return f2;
        }
        var h=f();
        h();
        
		//解决方案
        // h=null;
二旬、
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
函数的闭包
llmjhg的博客
08-19 459
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、内部函数二、函数的闭包1.闭包的定义2.闭包的应用2 闭包的应用计时器3 闭包的总结总结 前言 本文主要介绍函数的闭包 提示：以下是本篇文章正文内容，下面案例可供参考 一、内部函数 #内部函数 ‘’’ 特点: 1.可以访问外部的函数的变量 2.内部函数可以修改外部函数的可变类型的变量例如:list1 3.内部函数修改全局的不可变变量时，需要在内部函数声明global 变量名 内部函数修改外部函数的不可变的变量时，需要在
什么是闭包函数
mnilz的博客
02-08 2万+
什么是闭包函数 1、定义和用法：当一个函数的返回值是另外一个函数，而返回的那个函数如果调用了其父函数内部的其它变量，如果返回的这个函数在外部被执行，就产生了闭包。(关于概念博主摘抄以上几点,详情查看   百度百科) 2、表现形式：使函数外部能够调用函数内部定义的变量。 案例1:根据作用域链的规则，底层作用域没有声明的变量，会向上一级找，找到就返回，没找到就一直找，直到...
十、函数、闭包
coderxsj
12-14 3302
函数是对象，函数名是指向函数对象的指针。 实现一个函数有函数声明、函数表达式和new Function() New Function()接受任意多个字符串作为参数，最后一个字符串作为函数体。这段代码会被解释两次，一次是普通的JS代码，一次是解释传给构造函数的字符串。 一、箭头函数 1.只有一个参数，可以不写括号；多个参数必须有括号 2.只有一行代码的函数体可以省略{}，省略时默认返回这行代码的返回值 3.箭头函数不能使用arguments、super和new.target，也没...
函数之闭包的解释
weixin_44494803的博客
04-05 1387
可参考自己廖雪峰python从零开始（五） 函数式编程之闭包 关于函数闭包的代码解释 闭包指延伸了作用域的函数，其中包含函数定义体中引用、但是不在定义体中定义的非全局变量。拿下图的装 饰器作为例子，内层函数averager的函数体中series就是一个列表的引用，但这个列表定义在了averager函数体外面，所以这就是个闭包，而变量series就是一个自由变量。自由变量指未在本地作用域中绑定的变量 #在Python中，只有模块（module），类（class）以及函数（def、lambda）才会引入新的作
理解Python闭包概念
weixin_34123613的博客
11-07 841
闭包并不只是一个python中的概念，在函数式编程语言中应用较为广泛。理解python中的闭包一方面是能够正确的使用闭包，另一方面可以好好体会和思考闭包的设计思想。 1.概念介绍 首先看一下维基上对闭包的解释： 在计算机科学中，闭包（英语：Closure），又称词法闭包（Lexical Closure）或函数闭包（function closures），是引用了自由变量的函数。这个被引用的...
什么是闭包？（详解闭包）
我只是个很菜的前端
06-21 1万+
什么是闭包？ 闭包的优点。 闭包的缺点。 闭包的作用。 闭包
javascript高级编程之函数表达式 递归和闭包函数
10-23
主要介绍了javascript高级编程之函数表达式 递归和闭包函数的相关资料,需要的朋友可以参考下
js高级函数之闭包
12-17
js高级中的函数之闭包函数全解与应用场景(循环闭包,定时器,面试题)
谈谈JavaScript中的函数与闭包
10-27
JavaScript的函数和闭包是实现许多高级编程技巧的基础，如模块化、数据封装、异步控制和函数式编程。理解和熟练运用闭包能帮助开发者编写更高效、可维护的代码。在实际开发中，应谨慎处理闭包，因为它们可能会导致...
Javascript闭包与函数柯里化浅析
10-22
闭包和函数柯里化都是JavaScript中的高级技巧，它们提供了对函数更精细的控制，帮助我们构建更高效、更易于理解和维护的代码。闭包让函数能够访问和修改外部作用域的状态，而柯里化则允许我们提前绑定参数，创建具有...
python闭包函数
weixin_42375937的博客
02-12 2502
""" 1.什么是闭包函数：一个函数的返回值是另外一个函数，返回的函数调用父函数内部的变量，如果返回的函数在外部被执行，就产生了闭包 2.闭包函数的作用：使函数外部能够调用函数内部放入属性和方法 3.闭包函数的优缺点： 优点：使函数外部能够调用函数内部放入属性和方法 缺点：闭包操作导致整个函数的内部环境被长久保存，占用大量内存 """ #函数内部属性在外部被访问 def fun1(): name = 'python' def inner(): print(n.
详解闭包函数
weixin_69031161的博客
02-06 128
概念：定义在函数内部，被 return 出去，在函数外部使用。 特点：在闭包函数中使用的局部变量的空间会被系统保存至闭包结束。 用途：可以读取到整个父级作用域中的变量，让这些变量始终保持在内存中。 注意事项：由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在浏览器中可能导致内存泄露。 解决方法: 在退出函数之前，将不使用的局部变量全部删除。如将当前变量的值设置“null”，将变量的引用解除，当垃圾回收启动时，会自动对这些值为“null”的变
如果闭包内部函数没有访问外部函数的变量,还算闭包吗?
AK Zzz的博客
03-01 143
如果内部函数没有访问外部函数的变量，如下面的代码所示，那么这个函数虽然是一个函数，但它不符合闭包的定义：在上面的例子中，内部函数 sayHello 没有访问外部函数 greet 的变量，因此它不是一个闭包。
Spring 入门详解scope属性
林觉眠的博客
03-16 2167
文章目录一、scope属性二、scope分类二、scope取值1.singleton2.prototype总结 一、scope属性 spring中scope是一个非常关键的概念，简单说就是对象在spring容器（IOC容器）中的生命周期，也可以理解为对象在spring容器中的创建方式。 二、scope分类 目前，scope的取值有5种取值： 在Spring 2.0之前，有singleton和prototype两种； 在Spring 2.0之后，为支持web应用的ApplicationContext，增强另
对函数闭包的简单理解
YXXXYX的博客
05-07 863
文章目录引言闭包概念闭包理解总结 引言 go语言支持函数闭包，之前没有了解过，第一次接触感觉挺神奇的，简单记录一下自己的理解； 闭包概念 引用网上的解释：Go语言中闭包是引用了自由变量的函数，被引用的自由变量和函数一同存在，即使已经离开了自由变量的环境也不会被释放或者删除，在闭包中可以继续使用这个自由变量，因此，简单的说： 函数 + 引用环境 = 闭包； 这里主要提到有两点：自由变量和函数； 在go语言中闭包一般通过匿名函数实现，所以这个函数就是指匿名函数，而自由变量就是可以简单理解为匿名函数中调用的变量，
闭包，看这一篇就够了——带你看透闭包的本质，百发百中
热门推荐
一只小绵羊
04-22 20万+
理解闭包，原来可以如此简单
函数闭包
kannizhuangbi的博客
10-16 449
函数闭包 闭包的形成：一个函数的返回值是另一个函数，且返回函数调用定义函数的变量，返回函数在其他地方调用就会形成闭包 <script type="text/javascript"> function fn(){ var a = 0; function fn1(){ console.log(a) } return f...
JavaScript 学习-24.函数闭包(closure)
qq_27371025的博客
05-28 522
前言 闭包是面试最喜欢问的一个问题了，面试官最喜欢问： 1.什么是闭包？2.闭包的作用是什么？ 什么是闭包？ 闭包(closure)是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰，即形成一个不销毁的栈环境。 闭包的特性： 函数嵌套函数 内部函数可以访问外部函数的变量 参数和变量不会被回收。 先看一个典型的闭包, 实现计数器的功能 function myCounter() { var counter = 0; function add()
闭包和高级函数的区别
最新发布
08-31
闭包和高级函数是两个不同的概念。 闭包是指函数可以访问并操作其外部作用域中的变量，即使在函数执行完毕后，这些变量仍然可以被访问和使用。闭包在函数内部创建一个封闭的作用域，将外部变量绑定到该作用域中，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值