JavaScript闭包理解及常见的应用场景

最新推荐文章于 2024-04-18 00:26:44 发布

菜鸡爱上编程

最新推荐文章于 2024-04-18 00:26:44 发布

阅读量378

点赞数

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_43205326/article/details/109791593

版权

Javascript 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

闭包理解及常见的应用场景

文章目录

闭包理解及常见的应用场景
前言
一、通常面试的时候一句话总结什么是闭包
二、实现一个最简单的闭包
三、应用场景
- 1、闭包的用途
- 2、闭包的应用场景（重点）

前言

本片文章主要总结了闭包相关的知识，以及常见的应用场景

一、通常面试的时候一句话总结什么是闭包

1、闭包就是能够读取其他函数内部变量的函数,或者子函数在外调用，函数所在的父函数的作用域不会被释放。
2、其实一句最简短的话就是：
闭包是指有权访问另一个函数作用域中的变量的函数

二、实现一个最简单的闭包

function f1(){
    var a = 1;
    function f2(){    //f2是一个闭包
        alert(a);
    }    
    return f2;
}

1、js函数外部是不能够读取函数内部的变量的，但是闭包为什么可以。

2、原因：
f1是f2的父函数，f2被赋给了一个全局变量，f2始终存在内存中，f2的存在依赖f1，因此f1也始终存在内存中，不会在调用结束后，被垃圾回收机制回收。

三、应用场景

1、闭包的用途

（1）读取函数内部的变量
（2）让这些变量的值始终保持在内存中。不会再f1调用后被自动清除。

2、闭包的应用场景（重点）

发现一篇不错的文章：
转载自：https://blog.csdn.net/weixin_44862325/article/details/104444849
1.可以做缓存

function version() {
    var food = '';
    var obj = {
        eat : function(){
            console.log('我正在吃'+food);
            food = "";
        },
        abb : function (myFood){
            food = myFood;
        }
    }
    return obj;
}
var eater = version();
eater.abb('apple');
eater.eat();//我正在吃apple

2.实现公有变量
函数累加器

function add(){
    varcount = 0;
    function demo(){
        count++;
        console.log(count);
    }
    return demo;
}
var counter = add();
//每次调用一次就会在原有基础上加一;
counter();
counter();
counter();

3.模块化开发防止污染全局变量

function test(){
    var arr = [];
    for(var i = 0;i<10;i++){
        (function(j){
            arr[j]=function(){
                console.log(j+",");
            }
        })(i)
    }
    return arr;
}
var myArr = test();
for (var j = 0 ; j < 10 ; j++){
    myArr[j]();
}
//打印0,1,2,3,4,5,6,7,8,9

闭包的缺点
当内部函数被保存到外部时就会生成闭包闭包会导致原有作用域链不释放造成能存泄露
闭包的应用场景

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>

<body>

    <p>hello world</p>
    <button>12</button>
    <button>14</button>
    <button>16</button>

    <script>
        document.querySelectorAll('button')[0].onclick = changeSize(12);
        document.querySelectorAll('button')[1].onclick = changeSize(14);
        document.querySelectorAll('button')[2].onclick = changeSize(16);
        function changeSize(size) {
            return function () {
                document.body.style.fontSize = size + 'px';
            };
        }

    //我们定义行为，然后把它关联到某个用户事件上（点击或者按键）。我们的代码通常会作为一个回调（事件触发时调用的函数）绑定到事件上
    </script>
</body>

</html>

循环绑定事件

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

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

<body>

    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>

    <script>
        var btns = document.querySelectorAll('button')

        for (var i = 0; i < btns.length; i++) {
            (function loop(num) {
                btns[num].onclick = function () {
                    console.log(num)
                }
            })(i)
        }

    </script>
</body>

</html>

菜鸡爱上编程

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript闭包理解及常见的应用场景

闭包理解及常见的应用场景文章目录闭包理解及常见的应用场景前言一、通常面试的时候一句话总结什么是闭包二、实现一个最简单的闭包三、应用场景1、闭包的用途2、闭包的应用场景（重点）前言本片文章主要总结了闭包相关的知识，以及常见的应用场景一、通常面试的时候一句话总结什么是闭包1、闭包就是能够读取其他函数内部变量的函数,或者子函数在外调用，函数所在的父函数的作用域不会被释放。2、其实一句最简短的话就是：闭包是指有权访问另一个函数作用域中的变量的函数二、实现一个最简单的闭包function f1
复制链接

扫一扫