JS高级教程知识整理——11闭包

最新推荐文章于 2022-05-18 22:46:27 发布
最新推荐文章于 2022-05-18 22:46:27 发布
阅读量178 收藏 1
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20464593/article/details/105915084
版权

00 引入闭包的概念

需求:点击某个按钮,提示弹出的是第n个按钮.

实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>测试一</button>
    <button>测试二</button>
    <button>测试三</button>
    <script>

        //第一种实现方法(不能实现,因为i循环后才执行onclick)
        // var btn = document.getElementsByTagName('button')
        // for(var i = 0, length = btn.length; i < length ; i++) { //i是全局变量,i只有一个
        //     var btns = btn[i]
        //     btns.onclick = function () {  //i循环后才执行onclick
        //         alert('第'+(i+1)+'个')    //i = 4
        //     }
        // }

        //第二种实现方法
        // var btn = document.getElementsByTagName('button')
        // for(var i = 0,length = btn.length; i < length ; i++){
        //     var btns = btn[i]
        //     btns.index = i  //给出每个按钮对应的下标
        //     btns.onclick = function(){
        //         alert('第'+(this.index+1)+'个')
        //     }
        // }

        //使用闭包的实现方法
        var btn = document.getElementsByTagName('button')
        for(var i = 0, length = btn.length; i < length ; i++) { 
            (function(i) {    //i是局部变量 全局i传给局部i,i就进入闭包
                var btns = btn[i] //i是局部变量
                btns.onclick = function () {  
                    alert('第'+(i+1)+'个')    
                }
            })(i)  //i是全局变量
        }
    </script>
</body>
</html>

01理解闭包

1.如何产生闭包
*当一个嵌套的内部函数(子)引用了嵌套的外部函数(父) 的 变量(函数)时,就产生了闭包
2.闭包到底是什么
* 使用chrome调试查看
* 理解一: 闭包是嵌套的内部函数(绝大部分人)
* 理解二: 包含被引用变量(函数)的对象(极少数人) 即a
* 注意: 闭包存在于嵌套的内部函数中
3.产生闭包的条件
*函数嵌套
*内部函数引用了外部函数的数据(变量/函数)
*函数调用

实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function fn1(){
            var a = 2
            var b = 'abc'
            function fn2() {  //执行函数定义,调用发fn1就执行函数定义,而不需要调用函数fn2  //执行函数定义就会产生闭包,不需要调用内部函数
                console.log(a)  
            }
        }
        fn1()
    </script>
</body>
</html>

闭包的两种理解(附图解释):

* 理解一: 闭包是嵌套的内部函数(绝大部分人) 
* 理解二: 包含被引用变量(函数)的对象(极少数人) 即a

在这里插入图片描述

02常见的闭包

常见的闭包形式:
1.将函数作为另一个函数的返回值
2.将函数作为实参传递给另一个函数调用
产生多少个闭包:外部函数调用几次,产生多少个内部函数对象

实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1.将函数作为另一个函数的返回值
        function fn1() {
            var a = 2
            function fn2() {
                a++
                console.log(a)
            }
            return fn2
        }
        var f = fn1() //存返回值fn2函数
        f() //3 //调用内部函数fn2  //操作内部函数的变量
        f() //4 //再执行一遍 //调用内部函数fn2 //操作内部函数的变量

        //因为执行外部函数才会创建内部函数对象,跟内部函数执行几次没有关系
        fn1() //执行fn1()就把内部函数又创建了一遍 //看外部函数执行几次就创建几个闭包

        // 2.将函数作为实参传递给另一个函数调用 
        function showDelay(msg, time) {
            setTimeout(function () {
                alert(msg)  //用到了外部函数变量msg
            }, time)
        }
        showDelay('kate', 2000)
    </script>
</body>
</html>

03.闭包的作用

1.使用函数内部的变量在函数执行完后,仍然存活在内存中(延长了局部变量的生命周期)
2.让函数外部可以操作(读写)到函数内部的数据(变量/函数) 存在才可以操作
问题:
1.函数执行完后,函数内部声明的局部变量是否还存在? 一般是不存在,存在于闭包中的变量才可能存在
2.在函数外部能直接访问函数内部的局部变量吗 不能,但可以通过闭包让外部操作它

实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>闭包的作用</title>
</head>
<body>
    <script>
        function fn1() {
            var a = 2
            function fn2() {  //fn2和fn3都是内部变量,执行完后会被释放
                a++
                console.log(a)
            }
            function fn3() {  //fn2和fn3都是内部变量,执行完后会被释放,fn3没有成为垃圾对象,因为f引用着
                a--  //a被fn3函数引用了,所以进入闭包的是a
                console.log(a)
            }
            return fn3 
        }
        var f = fn1()  //f指向函数对象,把返回值存起来了,函数对象关联着闭包,闭包里有a  //让内部函数中的变量存活在内存
        f() //1 //操作内部函数的变量
        f() //0 //操作内部函数的变量
    </script>
</body>
</html>

04.闭包的生命周期

1.产生: 在嵌套内部函数定义执行完时就产生了(不是在调用的时候产生)
2.死亡: 在嵌套的内部函数成为垃圾对象时

实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function fn1() {
            //调用fn1,闭包就已经产生了(因为函数提升,内部函数对象已经创建了)
            var a = 2
            // function fn2() {
            //     a++
            //     console.log(a)
            // }
            var fn2 = function() {
                a++
                console.log(a)
            }
            //产生闭包,函数定义执行,前面是函数执行
            return fn2
        }
        var f = fn1()
        f() // 3
        f() // 4
        f = null //闭包死亡(包含闭包的函数对象成为了垃圾对象)
    </script>
</body>
</html>

05.闭包的应用

闭包的应用: 定义js模块
* 具有特定功能的js文件
* 将所有的数据和功能都封装在一个函数内部(私有的)
* 只向外暴露一个包含n个方法的对象或函数
* 模块的使用者,只需要通过模块暴露的对象调用方法来实现对应的功能

实现代码:
myModule.js

function myModule() {
    //私有的数据
    var msg = 'bigface'
    //操作数据的函数
    function doSomething() {
        console.log('doSomething()'+ msg.toUpperCase())
    }
    function doOtherthing() {
        console.log('doOtherthing()'+ msg.toLowerCase())
    }
    //向外暴露对象(给外部使用的方法)
    return {
        doSomething: doSomething,
        doOtherthing: doOtherthing
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="myModule.js"></script>
    <script>
        // var fn = myModule()
        // fn()

        //要先执行myModule(),返回对象,对象再调用方法
        var module = myModule()
        module.doSomething()
        module.doOtherthing()
    </script>
</body>
</html>

实现代码2:
myModule2.js

(function () {
    //私有的数据
    var msg = 'bigface'
    //操作数据的函数
    function doSomething() {
        console.log('doSomething()'+ msg.toUpperCase())
    }
    function doOtherthing() {
        console.log('doOtherthing()'+ msg.toLowerCase())
    }

    //要暴露的东西添加为window的属性
    window.myModule2 = {
        doSomething: doSomething,
        doOtherthing: doOtherthing
    }
})()

// // 好处:代码压缩,如window可以压缩成w
// (function (window) {  //+window
//     //私有的数据
//     var msg = 'bigface'
//     //操作数据的函数
//     function doSomething() {
//         console.log('doSomething()'+ msg.toUpperCase())
//     }
//     function doOtherthing() {
//         console.log('doOtherthing()'+ msg.toLowerCase())
//     }

//     //要暴露的东西添加为window的属性
//     window.myModule2 = {
//         doSomething: doSomething,
//         doOtherthing: doOtherthing
//     }
// })(window)  //+window

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 第一种方式需要先执行myModule(),第二种直接使用 两种方式都有闭包-->
    <script src="myModule2.js"></script>
    <script>
        myModule2.doSomething()
        myModule2.doOtherthing()
    </script>
</body>
</html>

06.闭包的缺点及解决

1.缺点
* 函数执行完后,函数内的局部变量没有释放,占用内存时间会变长
*容易造成内存泄露
2.解决:
*能不用闭包就不用
*及时释放

实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>闭包的缺点及解决</title>
</head>
<body>
    <script>
        function fn1() {
            var arr = new Array[100000]
            function fn2() {
                console.log(arr.length)
            }
            return fn2
        }
        var f = fn1()  //必须让f指向内部函数对象,不然fn1执行完arr局部变量就被释放掉了
        f()

        f = null //让内部函数成为垃圾对象-->回收闭包
    </script>
</body>
</html>

07.面试题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07_面试题1</title>
</head>
<body>
    <script>
        // 代码片段一
        //没有闭包
        var name = "the window"
        var object = {
            name: "my object",
            getNameFunc: function() {
                return function() {
                    return this.name
                }
            }
        }
        alert(object.getNameFunc()()) //the window    //object.getNameFunc() 是return 的fun,然后fun(),所以this是指window
    
        // 代码片段二
        //有闭包:函数嵌套 和 内部函数引用外部函数变量
        var name2 = "the window"
        var object2 = {
            name: "my object",
            getNameFunc: function() {
                var that = this  //object2
                return function() {
                    return that.name2
                }
            }
        }
        alert(object2.getNameFunc()()) //my object
    </script>
</body>
</html>

补充:内存溢出与内存泄露

1.内存溢出
* 一种程序运行出现的错误
* 当程序运行需要的内存 超过了 剩余的内存时,就出抛出内存溢出的错误
2.内存泄露
*占用的内存没有及时释放
*内存泄露积累多了就容易导致内存溢出
*常见的三种内存泄露:
**意外的全局变量
**没有及时清理的计时器或回调函数
**闭包

实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内存溢出与内存泄露</title>
</head>
<body>
    <script>
        // 1.内存溢出
        var obj = {}
        for (var i = 0;i < 10000; i++) {
            obj[i] = new Array(10000000)
            console.log('------')
        }

        // 2.内存泄露
            // 意外的全局变量
        function fn() {
            a = 3  //用var去定义变量
            console.log(a)
        }
        fn()

            // 没有及时清理的计时器或回调函数
        var intervalId = setInterval(function () {
            console.log('------')
        },1000)
        clearInterval(intervalId)

            // 闭包
        function fn1() {
            var a = 4
            function fn2() {
                console.log(++a)
            }
            return fn2
        }
        var f = fn1()
        f()

        f = null
    </script>
</body> 
</html>
我是一个脸
关注
专栏目录
Android学习笔记——归纳整理
Yawn
04-21 9017
Android入门笔记——归纳总结
JS基础知识
qq_41876456的博客
09-13 925
Day1： 获取元素方式 document.getXX 事件三要素 事件源 按钮 事件类型 点击 事件处理程序 函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt
JS高级---闭包（一看就懂）
一个前端小学生的博客
05-27 1066
js
js高级之闭包
一只前端小白的博客
01-22 282
首先，我们要清楚什么是闭包？ 闭包的概念： 函数a中有一个函数b,而这个函数b可以访问函数a的变量，此时就形成的闭包 即 闭包就是能够读取其他函数的内部的变量 闭包就是函数内部和函数外部链接起来的桥梁 function f1(){ var num=100; function f2() { console.log(num); ...
找到一个讲的很详细的js的原型闭包的教程
故乡的良宵风花的博客
10-12 243
作者：王福朋； 链接：http://www.cnblogs.com/wangfupeng1988/p/4001284.html； 记住js中函数是对象很重要
JS 闭包详解
05-18 2278
一、闭包预备知识 1. 举个栗子分析执行上下文 let a = 3 function addTwo(x) { let ret = x + 2 return ret } let b = addTwo(a) console.log(b); // 5 为了理解JavaScript是如何工作的，让我们详细分析一下： 在第1行，我们在全局执行上下文中声明了一个新变量a，并将其赋值为3 接下来，就变得棘手了，第2行到第5行实际上是在一起的，这里发生了什么？ 我们在全局执行上下文中声明了一个名为a
图解JS闭包
qq_45768871的博客
03-28 1267
欢迎大家的交流，相互学习 关注。 文章目录图解JS闭包一、基础概念1、什么是闭包2、为什么需要闭包呢3、特点4、何时使用5、如何使用6、函数生命周期7、例子实战二、JS中的作用域链(scope chain)概念：1、定义2、作用3、应用三、后记 图解JS闭包 一、基础概念 1、什么是闭包 简单来说，闭包是指可以访问另一个函数作用域变量的函数，一般是定义在外层函数中的内层函数。 2、为什么需...
JavaScript整理
04-29
这篇“JavaScript不就这么回事(Javascript基础知识整理)”文档将深入浅出地介绍JavaScript的核心概念，帮助你全面理解和掌握这一强大的脚本语言。 1. **变量与数据类型**：JavaScript支持动态类型，这意味着你不...
前端开发核心知识进阶
GitChat
07-02 4284
Java Script相关知识点整理
m0_47469819的博客
06-21 738
计算机系统结构学习笔记
JS 闭包 详细说明（教程）
qq_17627195的博客
10-30 1365
首先，闭包是一个高阶函数，高阶函数除了可以接受函数作为参数外，还可以把函数作为结果值返回。（不知道高阶函数是啥，点击链接） 先通过一个例子来了解一下如何把函数作为结果值返回： 通常情况下，求和的函数是这样定义的： function sum(arr) { return arr.reduce(function (x, y) { return x + y; }); } sum([1, 2, 3, 4, 5]); // 15 但是，如果不需要立刻求和，而是在后面的代码中，根据需要
js中将函数传递给另一个函数的解析（非常容易理解）
weixin_30507269的博客
11-17 449
$(document).ready(function(){ //JS中关于把函数作为函数的参数来传递的问题的小总结//第一，最简单的形式无参函数，直接形式函数的函数名放到括号中，再在执行部分这个函数即可。//当然调用另一个真正的定义好的函数/*function test1(Func){ 　　Func();}function test2(){ 　　alert("我是test2");} test1(...
深入理解JS闭包
热门推荐
cauchy6317的博客
07-23 6万+
闭包的理解
关于将函数的地址作为参数传递给另一个函数调用
c_flybird的博客
10-26 8612
1.在讲这个问题之前，我们要明白一个问题。就是我们为什么要把一个函数的地址作为参数传递给另一个参数。要知道在C语言中，一个函数内部是可以直接调用其他函数的，既然可以直接调用，为什么还要用这么麻烦的办法去把函数当做参数来传递呢。下面我举个例子。 例如我们设计一个estimate() 的函数计算一个程序运行的时间，但不同的人估算时间的时候可能算法有所不同，算出的时间也应该不同。但我们都调用同一个es
JAvaScript之闭包按钮点赞案例
qq_41320857的博客
08-02 1102
Scriprt代码： //获取所有的按钮 //根据标签名字获取元素 function my$(tagName) { return document.getElementsByTagName(tagName); } //闭包缓存数据 function fn() { var value=2; return fu...
JS-闭包详解
每天进步一点点
05-23 4438
闭包是JS中的一块硬骨头-不好啃，需要我们慢慢去咀嚼才能体会出其中的味道，嚼的不好，一不小心还容易崩牙！今天就让我们好好来咀嚼下这块硬骨头把！！！ 1.什么是闭包？ 所谓闭包：在一个函数作用域中 保留 它上级作用域的局部变量，这些局部变量不会随着上级函数的执行完毕而被销毁（个人理解）。 简单的理解闭包：子函数可以使用父函数的局部变量（包括参数，因为参数也是局部变量）；  function
闭包
Vodka的博客
02-06 108
1.利用闭包 for(var i = 0 , length = btns.length; i < length ; ++i ){ (function(i){ var btn = btns[i]; btn.onclick = function(){ alert('第'+(i+1)+'个按钮'); } })(i) } 2.如何产生闭包？ *当一个嵌套
javaScript系列教程之闭包从闭包如何产生理解闭包
点燃火柴的博客
08-13 197
闭包的形成过程 1. 外层函数中受保护的变量在内层函数使用 2. 内层函数被外层函数通过return返回 3. 使用全局变量接住被外层函数返回的内层函数 4. 使用全局变量调用返回的函数，调用结束后，由于内层函数中的变量还被接函数的全局变量引用，所以无法释放内存无法释放，闭包形成 内层函数返回方式主要有三种 1. return function(){...} 2. 直接给全局变量赋值一个内部function 3. 将内部函数保存在一个对象的属性或数组元素中一次返回
深入探索JavaScript高级教程：BOM与DOM解析
在实际应用中，JavaScript高级教程还会涵盖其他主题，如AJAX（异步JavaScript和XML）、闭包、原型链、模块化、性能优化等。通过深入学习这些内容，开发者可以更好地掌握JavaScript，构建更加高效、交互性更强的Web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值