JS中的闭包问题——对象模式，函数模式、内存泄漏

最新推荐文章于 2022-07-29 08:12:25 发布
最新推荐文章于 2022-07-29 08:12:25 发布
阅读量94 收藏
点赞数
分类专栏： javascript jquery es6 文章标签： javascript 前端 es6 vue.js reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h_jQuery/article/details/118552598
版权
javascript 同时被 3 个专栏收录
123 篇文章 0 订阅
订阅专栏
es6
73 篇文章 0 订阅
订阅专栏
jquery
18 篇文章 1 订阅
订阅专栏

闭包

闭包的概念：函数A里面有一个子函数B，函数B可以访问函数A中定义的变量或者数据，此时形成了闭包（通俗的说：函数里面嵌套一个函数(或者对象)，里层的函数可以用外层函数的数据或方法）

闭包的模式：

1.函数模式的闭包：在一个函数中有一个函数

function fn(){
	//声明变量
	var num=10
	//函数的声明
	function f2(){
		console.log(num)
	}
	//函数调用，调用fn的同时也会调用f2
	f2();
}
fn()

2.对象模式的闭包：在一个函数中有一个对象

function fn() {
	var num = 30
	var obj = {
   		age: num
   }
console.log(obj.age);
}
fn()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 随对象式的闭包：在一个函数中有一个函数
        /* function fn() {
            // 变量的声明
            var num = 10
// 函数的声明，
            function f2() {
                console.log(num);       10
            }
            // 函数调用，调用fn的同时也调用f2
            f2()
        } */
        // 对象模式的闭包：函数中有一个对象
        /* function fn() {
            var num = 30
            var obj = {
                age: num
            }
            console.log(obj.age); //30
        } */
        // 函数模式的闭包（简写）
        /* function fn() {
            var num = 20
                // 调用fn，会返回一个匿名函数
            return function() {
                console.log(num);
                return num
            }
        }
        // ff获取到的就是fn中return的一个匿名函数
        var ff = fn()
            // 调用匿名函数
            // ff()     20
            // res获取到的是fn中的匿名函数return的数据：num，这里得到的是数据而不是函数，所以不能调用，只能输出
        var res = ff()
        console.log(res); //20 */
        // 对象模式的闭包（简写）
        function fn() {
            var num = 30
                // 调用fn，返回的是一个对象
            return {
                age: num
            }
        }
        // 获取到是一个对象
        var res = fn()
        console.log(res.age); //30
    </script>
</body>

</html>

特点**：

1.让外部访问函数内部变量成为可能

2.局部变量会常驻内存中

3.可以避免使用全局变量，防止全局变量污染

4.造成内存泄漏（缺点）

内存泄漏：有一块内存空间被长期占用，而不被释放

闭包的作用：可以缓存数据，可以延长作用域链

缓存数据是闭包的优点也是缺点，因为数据没有得到及时的释放，会一直占用内存空间

局部变量是在函数的作用域内有效，放函数执行结束，局部变量就会自动的释放

而使用闭包后。函数里面的局部变量的使用作用域链就会得到延长

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // function fn() { 
        // var num = 10
        // function fn2() { 
        // console.log(num); 
        // } 
        // fn2()
        // }
        // function fn() { 
        // var num = 20 
        // var obj = { 
        // num: num 
        // }
        // console.log(obj.age)
        // } 
        /* function fn() { var num = 20 
                                // 返回的是一个方法 
                                return function()
        {
            console.log(num) return num
        }
        } 
        // fn()执行的是fn这个函数 
        // fn()()是调用fn里面的匿名函数
         var aa=fn() aa() //20*/
        /* function fn() { 
            var num = 100 
            return { age: num } }
             console.log(fn().age) 100*/
        /* function fn() { 
                   var num =100
        num++
        return num
        }
         // 函数一执行完，就释放了,后面调用的都是重新从初始化开始执行，所以结果都是11
          console.log(fn()) //11
           console.log(fn()) //11
            console.log(fn()) //11 */
        /* function fn() {
            var num = 10
            return function() {
                num++
                return num
            }
        }
        var ff = fn() */

        function fn() {
            // num在fn方法的作用域里面是全局的
            var num = 10
                // 只要这个匿名函数不消失，fn函数也不消失，但是页面一刷新，函数就被重置
            return function() {
                num++
                return num
            }
        }
        var f = fn()
            // f()调用的是fn里面匿名函数
        console.log(f()); //11
        console.log(f()); //12
        console.log(f()); //13
    </script>
</body>

</html>

闭包案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 普通函数
        /* function fn() {
            var num = 20
            num++
            // 调用fn就返回num
            return num
        }
        // 普通函数一执行完就释放内存，所以结果都初始值21
        console.log(fn()); //21
        console.log(fn()); //21
        console.log(fn()); //21 */
        // 函数模式的闭包
        function fn() {
            // 这个num只在fn的作用域内有效
            var num = 30
                // 调用fn就返回一个匿名函数
                // 调用匿名函数后，这个num就被缓存在内存中（闭包的作用：缓存数据）
            return function() {
                num++
                return num
            }
        }
        // res是fn返回的匿名函数
        var res = fn()
            // 输出的是调用fn中的匿名函数所返回的结果，这里匿名函数中的num是缓存中num，而不是调用fn函数得到的num，而页面一刷新，缓存就没了，num也成立初始值30
        console.log(res()); //31
        console.log(res()); //32
        console.log(res()); //33，到这里，
    </script>
</body>

</html>

变量只定义未赋值，输出就是undefined，不声明就使用会报错

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function randNum() {
            // 获取1-10的随机数
            var num = parseInt(Math.random() * 10 + 1) //0-9，再加1，就是1-10
            console.log(num);
        }
        // randNum()
        // 刷新一次，就会重新获取
        function fn() {
            var num = parseInt(Math.random() * 10 + 1)
            return function() {
                console.log(num);
            }
        }
        // ff得到的是一个匿名函数
        var ff = fn()
            // 下面的都是调用fn里面的匿名函数，并没有调用fn，所以num值不变
        ff()
        ff()
        ff()
        ff()
    </script>
</body>

</html>

闭包案例-产生随机数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 普通函数方式
        /* function showNum() {
            // Math.random()随机得到的是[0,1)之间的小数(包括0，不包括1)
            // parseInt(Math.random() * 10)：随机[0,10)之间的整数
            // 再加1，就是随机得到[1,10]
            var num = parseInt(Math.random() * 10) + 1
            console.log(num);
        }
        // 得到的四个数都是不同的
        showNum();
        showNum();
        showNum();
        showNum(); */
        // 闭包的方式，多次调用函数的到的随机数都是相同的
        function showNum() {
            var num = parseInt(Math.random() * 10) + 1
                // 闭包将num放入缓存
            return function() {
                // 这里输出的是缓存中的num
                console.log(num);
            }
        }
        // res是showNum中的匿名函数
        var res = showNum()
            // 得到的随机数都是相同的，都是缓存中num
        res()
        res()
        res()
        res()
    </script>
</body>

</html>

闭包点赞小案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul {
            list-style-type: none;
        }
        
        li {
            float: left;
            margin-left: 10px;
        }
        
        div {
            width: 200px;
            height: 180px;
            background-color: dodgerblue;
        }
        
        input {
            margin-left: 30%;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div></div><br/><input type="button" id="one" value="赞1"></li>
        <li>
            <div></div><br/><input type="button" value="赞1"></li>
        <li>
            <div></div><br/><input type="button" value="赞1"></li>
        <li>
            <div></div><br/><input type="button" value="赞1"></li>
    </ul>
    <script>
        // 获取到input
        var btns = document.querySelectorAll('input')
            // 循环
        for (let i = 0; i < btns.length; i++) {
            //写的是fn()，所以已经调用了fn函数，所以点击时，触发的是fn里面的匿名函数
            btns[i].onclick = fn()
        }

        function fn() {
            var num = 1
            //使用闭包，将num放入缓存，点击是匿名函数
                // 这里面num一旦使用就一直存在内存里面，一刷新会释放，而重新从1开始
            return function() {
                num++
                this.value = "赞(" + num + ")"
            }
        }
    </script>
</body>

</html>
h_jQuery
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS面向对象之闭包
缚己
10-26 221
作用域链 作用域链就是父级作用域中的变量可以在子级作用域、孙子级作用域…中使用的情况。如下代码： function f1(){ var a = 'f1作用域' function f2(){ var b = 'f2作用域' function f3(){ var c = 'f3作用域' console.log(a) console.log(b) console.log(
react.js函数组件解决内存泄漏警告
GguanWei的博客
11-27 627
为大家分享一个警告信息 devScripts.js:5836 Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup functi
【JS高级】js之闭包对象_04
青春木鱼的博客
07-29 355
何时使用闭包？只要希望给一个函数保护一个可反复使用的专属变量，又防止这个变量被外界篡改时，都用闭包。闭包是如何形成的？外层函数调用后，由于内层函数的作用域链引用着外层函数得作用域对象，无法释放，形成了闭包！即外层函数的作用域对象，被内层函数的作用域链引用着，无法释放，形成了闭包！...............
js面向对象 —— 闭包
mocoll的博客
08-23 192
一、变量作用域 变量根据作用域的不同分为两种:全局变量和局部变量。 1.函数内部可以使用全同变星。 2.函数外部不可以使用局部变量。 3.当函数执行完毕,本作用域内的局部变量会销毁。 二、什么是闭包 闭包( closure )指有权访问另一个函数作用域中变量的函数。---- JavaScript 高级程序设计。 简单理解就是, 一个作用域可以访问另外一个函数内部的局部变量。 闭包的主要作用:延伸了变量的作用范围。 三、闭包案例 3.1、面试-----循环注册点击事件。 立即执行函数也称为小闭包，因为看立
JS创建对象的三种方式和闭包的两种常用场景
大雪的博客
09-23 1930
对象创建的三种方式 ①通过new关键字创建对象 var obj = new Object(); obj.name = 'daxue'; obj.age = 28; obj.fun = function(){ } alert(obj.age); ②简单字面量 var obj2 = {}; obj2.name = "ben"; obj2.sex = "女";...
DOC-JS-Leaked-Memory:一些关于javascript泄漏内存调试的免费文档
07-04
JavaScript是Web开发中不可或缺的一部分，但在使用过程中，开发者可能会遇到一个棘手的问题——内存泄漏。内存泄漏是指程序在分配内存后无法释放不再使用的内存空间，这会导致应用性能下降，甚至崩溃。本文将深入...
Javascript 中的即时函数和初始化分支
04-14
本文将深入探讨两个重要的JavaScript概念——即时函数（Immediate Function）和初始化分支（Init-time Branching）。理解并熟练运用这两个概念，能够帮助开发者编写更高效、更模块化的代码。 ### 即时函数 ...
JavaScript：块范围的变量和函数
04-07
在块作用域中，闭包可以更好地控制变量的生命周期，防止内存泄漏，并提供更灵活的模块化设计。 此外，块作用域还对错误处理有积极影响。在处理异步操作时，例如`try...catch`语句，块作用域可以确保捕获的异常仅...
RV8:Javascript V8 函数
06-05
JavaScript V8引擎是Google开发的一款高性能的JavaScript和WebAssembly虚拟机，它被广泛应用于Chrome浏览器以及Node.js服务器环境中。V8引擎以其卓越的执行速度和内存管理能力而著名，其核心设计目标是使JavaScript...
IE内存泄漏检测工具 Drip-0.5
06-05
为了帮助开发者定位和解决这一问题，诞生了专门针对IE的内存泄漏检测工具——Drip-0.5。 Drip（Detection of Recursive Leaks in IE，IE递归泄漏检测）是由Microsoft员工Steve Sounders开发的一个轻量级工具，用于...
js闭包到底是什么，是函数，还是对象？
DragonWWWW的博客
07-22 819
js闭包到底是什么，这个问题一直困惑着我，感觉总想不明白，也弄不清楚。 其实闭包就是在函数运行时，本应该被释放的执行上下文对象（更准确说应该叫变量对象或活动对象）被保留了下来，这时这个变量对象或活动对象，就叫做闭包，所以闭包应该是一个对象。 概念理解 在更加详细理解闭包之前，我们先来理解一下以下几个概念： 1. 变量对象/活动对象 我们知道，在函数执行时，会创建一个函数的执行上下文，在函数的执行上下文中，就存着一个变量对象，在变量对象中就会存储正在执行的函数中所定义的变量和函数，以及执行时创建的变量如thi
JS day16—闭包和函数对象
qq_48991522的博客
10-11 183
1.匿名函数： 匿名函数的概念：没有名字的函数就是匿名函数。当某个函数，function 关键字后面没有标识符的时候，那么它就是一个匿名函数。 匿名函数的四种写法：<1>定义一个函数，把函数名赋给事件的属性。 <2>定义一个匿名函数，直接赋给事件的属性。 <3>定义一个匿名函数赋给一个变量，然后把变量赋给事...
JS 面向对象与闭包
woi123的专栏
10-06 214
函数类型 function 函数名称(参数表) { 函数执行部分; } 注意： 1.参数列表直接写行参名即可，不用写var，不用指定类型 2.return 返回函数的返回值并结束函数运行。 3.函数可以当做参数进行传递。 //函数当做参数传递 &lt;script type="text/javascript" charset="UTF-8"&gt; func...
JavaScript闭包和模块模式[译]
weixin_30855099的博客
05-09 114
翻译原文 在JavaScript中一个最广泛使用的设计模式是模块的模式。模块模式使用了JavaScript中的一个很棒的特性-闭包- 用来给你方法中的隐私一些控制这样的第三方应用程序不能访问私有数据或覆盖它。在这篇文章中，我会教你什么是闭包，它是如何工作的，以及如何利用它在你的JavaScript代码中实现模块模式。 什么是闭包？ 闭包是JavaScript语言的一种构造。在Ja...
js函数闭包 对象
cxuyuanLch的博客
03-05 480
什么是函数闭包？ 简单来说：闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。 一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。 function init() { var name = "zuoyonyu"; // name 是一个被 init 创建的局部变量 function displayName()
JavaScript闭包-闭包中的变量和this对象
飞鹰的专栏
10-21 1810
在JavaScript中作用域链的机制会引发一些副作用：闭包只能够获取包含函数中任何变量的最后一个值。在使用闭包的时候，我们一定要注意变量值的问题，因为这是经常会出错的地方。 下面我们以一个非常极端的例子来说明这个问题，在实际开发中我们一般不会这样编写代码。这个例子的代码如下： function fn1(){   var arr = new A
js之闭包
seimeii的博客
10-10 63
一.什么是闭包 高级程序设计三中:闭包是指有权访问另外一个函数作用域中的变量的函数.可以理解为(能够读取其他函数内部变量的函数) 闭包的作用: 正常函数执行完毕后,里面声明的变量被垃圾回收处理掉,但是闭包可以让作用域里的 变量,在函数执行完之后依旧保持没有被垃圾回收处理掉 闭包最⼤的作⽤就是隐藏变量 可以实现私有变量、特权变量、储存变量等 function Person(){ var name = 'cxk'; this.getName = function(){ return name; } .
4类 JavaScript 内存泄露及如何避免
05-24 2337
原文：4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them笔记：涂鸦码龙 译者注：本文并没有逐字逐句的翻译，而是把我认为重要的信息做了翻译。如果您的英文熟练，可以直接阅读原文。 本文将探索常见的客户端 JavaScript 内存泄露，以及如何使用 Chrome 开发工具发现问题。 简介 内存泄...
函数中的闭包过多会导致什么问题
最新发布
05-26
函数中过多的闭包会导致内存占用过大，可能会导致内存泄漏和性能下降等问题。闭包是一种引用了自由变量的函数，当函数执行完成后，如果闭包中引用的变量没有被释放，那么这些变量会被一直保留在内存中，占用内存资源...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值