初识js中的闭包

简介:

今天看了关于js闭包方面的文章,还是有些云里雾里,对于一个菜鸟来说,学习闭包确实有一定的难度,不说别的,能够在网上找到一篇优秀的是那样的不易。

  当然之所以闭包难理解,个人觉得是基础知识掌握的不牢,因为闭包牵扯到一些前面的东西,比如作用域\等等,如果连基本的作用域都没有弄清楚,自然不可能搞懂闭包,还有就是对js的实践比较少,因为你根本就不知道什么时候要用这东西,自然谈不上对闭包的深刻理解。

  今天我就简单的说说我目前所理解的闭包,当然可能不完全正确,但是我相信会给你一定的启发。

 

  首先我们来谈谈js中的变量,如果你不知道我为什么要说这些,那么你根本没有掌握js的基础,建议回头复习。

js中分:全局变量 和 局部变量

  全局变量:可以在任意位置访问的量就叫全局变量

    

1 var age = 20;
2 function a(){
3     console.log(age); >>20
4 }
5 a();

  局部变量:函数中用var定义的变量,只能在函数中访问这个变量,函数外部访问不了。

1 function a(){
2     var age = 20;
3 }
4 a();
5 console.log(age); >> Uncaught ReferenceError: age is not defined

 

注意点1:在函数中如果不使用var定义变量那么js引擎会自动添加成全局变量。

注意点2:全局变量从创建的那一刻起就会一直保存在内存中,除非你关闭这个页面,局部变量当函数运行完以后就会销毁这个变量,假如有多次调用这个函数它下一次调用的时候又会重新创建那个变量,既运行完就销毁,回到最初的状态,简单来说局部变量是一次性的,用完就扔,下次要我再重新创建。

 

函数的相关知识点:

        1. 一个函数内可以嵌套多个函数

    2. 函数里面的子函数可以访问它上级定义的变量,注意不只是一级,如果上级没有会继续往上级找,直到找到为止,如果找到全局变量到找不到就会报错。

     

复制代码
1 function a(){
2     var name = "追梦子";
3     function b(){
4         console.log(name); >> "追梦子"
5     }
6     b();
7 }
8 a();
复制代码

    3. 函数的另外一种调用形式,你可以把它叫做自调用,自己调用自己,达到自执行的效果。

   

1 var a = 0;
2 (function(){
3    console.log(++a); >>1
4 })()

这种方式用()把内容包裹起来,后面的()表示执行这个函数,可能你会问为什么要把函数包起来,如果不包裹起来,js会把它当作函数声明来处理,如果包裹起来就是表达式,还没有看懂就上网查吧。

 

 

开始我们正式闭包部分---------------------------- 币包 ---------------像钱包一样的东西,可以把东西包裹起来----------

      首先我们来看看为什么需要学习闭包,加以理解 -- 0 v  0- -

 

1 function a(){
2    var num = 0;
3    console.log(++num);
4 }
5 a(); >>1
6 a(); >>1

上面代码输出了两次1,为什么呢?如果你有看我上面的关于变量部分肯定能够想到个大概。

  前面我们说过了函数执行完以后,里面的变量(即局部变量)就会销毁,下一次运行又会重新创建那个变量,所以虽然你第一次++num了但是这个变量在第一次执行完毕以后就被销毁了。

那么我们怎么样才能确保第一次的变量不被销毁,那么就需要我们的闭包出场了。

温馨提示:JavaScript中有回收机制,函数没有被引用执行完以后这个函数的作用域就会被销毁,如果一个函数被其他变量引用,这个函数的作用域将不会被销毁,(简单来说就是函数里面的变量会被保存下来,你可以理解成全局变量。)

…………………………………………………………………………………… 当 当 当 ................. 下面有请我们的币包同志

 

复制代码
function a(){
    var aa = 0;
    function b(){
        aa ++;
        console.log(aa);
    }
    return b;
}
var ab = a();
ab(); //1
ab(); //2
复制代码

看到了吧里面的变量的值没有被销毁,因为函数a被外部的变量ab引用,所以变量aa没有被回收。

     如果某个函数被它的父函数之外的一个变量引用,就形成了一个闭包

还有一种更为常用的闭包写法

复制代码
var bi = (function(){
    var a = 0;
    function b(){
        a ++;
        console.log(a);
    }
    return b;
})();

bi(); //1
bi(); //2
bi(); //3
复制代码

执行过程分析:

  首先把一个自执行函数赋值给了bi,这个自执行函数运行完成以后就bi的值就变成了

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

  因为我们在上面的代码return回去了b,然后因为这个自执行函数被bi引用所以里面的变量a并没有因为这个自执行函数执完而销毁,而是保存到了内存中,所以我们多次打印bi()就成了1、2、3

 

下面我来说一个闭包的使用场景吧。

   没有使用闭包的版本

复制代码
window.onload = function(){
    var ul = document.getElementsByTagName("ul")[0];
    var li = ul.getElementsByTagName("li");
    for(var i=0;i<li.length;i++){
        li[i].onclick = function(){
            console.log(i); //不管我怎么点都是返回6
        }
    }
}
复制代码

  使用了闭包的版本

复制代码
window.onload = function(){
    var ul = document.getElementsByTagName("ul")[0];
    var li = ul.getElementsByTagName("li");
    for(var i=0;i<li.length;i++){
        (function(i){
            li[i].onclick = function(){
                console.log(i); //点击第几个返回第几个
            }
        })(i)
    }
}
复制代码

、、、、、如果你不理解这个,你只要这样子用就能够达到效果。

 

这也只是简单的介绍了一下,后面将会在闭包的高级部分讲解。如果你对闭包有更深的理解可以pm我。

目录
相关文章
|
2月前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包:原理与实战
【10月更文挑战第12天】深入理解JavaScript中的闭包:原理与实战
|
1月前
|
JavaScript 前端开发
js 闭包的优点和缺点
【10月更文挑战第27天】JavaScript闭包是一把双刃剑,在合理使用的情况下,它可以带来很多好处,如实现数据封装、记忆功能和模块化等;但如果不注意其缺点,如内存泄漏、变量共享和性能开销等问题,可能会导致代码出现难以调试的错误和性能问题。因此,在使用闭包时,需要谨慎权衡其优缺点,根据具体的应用场景合理地运用闭包。
111 58
|
1月前
|
缓存 JavaScript 前端开发
js 闭包
【10月更文挑战第27天】JavaScript闭包是一种强大的特性,它可以用于实现数据隐藏、记忆和缓存等功能,但在使用时也需要注意内存泄漏和变量共享等问题,以确保代码的质量和性能。
36 7
|
1月前
|
自然语言处理 JavaScript 前端开发
JavaScript闭包:解锁编程潜能,释放你的创造力
【10月更文挑战第25天】本文深入探讨了JavaScript中的闭包,包括其基本概念、创建方法和实践应用。闭包允许函数访问其定义时的作用域链,常用于数据封装、函数柯里化和模块化编程。文章还提供了闭包的最佳实践,帮助读者更好地理解和使用这一强大特性。
19 2
|
20天前
|
存储 缓存 自然语言处理
掌握JavaScript闭包,提升代码质量与性能
掌握JavaScript闭包,提升代码质量与性能
|
20天前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包(Closures)
深入理解JavaScript中的闭包(Closures)
|
20天前
|
存储 自然语言处理 JavaScript
深入理解JavaScript的闭包(Closures)
深入理解JavaScript的闭包(Closures)
19 0
|
2月前
|
设计模式 JavaScript 前端开发
探索JavaScript中的闭包:从基础概念到实际应用
在本文中,我们将深入探讨JavaScript中的一个重要概念——闭包。闭包是一种强大的编程工具,它允许函数记住并访问其所在作用域的变量,即使该函数在其作用域之外被调用。通过详细解析闭包的定义、创建方法以及实际应用场景,本文旨在帮助读者不仅理解闭包的理论概念,还能在实际开发中灵活运用这一技巧。
|
2月前
|
缓存 JavaScript 前端开发
深入了解JavaScript的闭包:概念与应用
【10月更文挑战第8天】深入了解JavaScript的闭包:概念与应用
|
2月前
|
自然语言处理 JavaScript 前端开发
Javascript中的闭包encloure
【10月更文挑战第1天】闭包是 JavaScript 中一种重要的概念,指函数能够访问其定义时的作用域内的变量,即使该函数在其词法作用域之外执行。闭包由函数及其词法环境组成。作用域链和词法作用域是闭包的核心原理。闭包常用于数据隐藏和封装,如模块模式;在异步操作中也广泛应用,如定时器和事件处理。然而,闭包也可能导致内存泄漏和变量共享问题,需谨慎使用。