JavaScript——以简单的方式理解闭包

      闭包,在一开始接触JavaScript的时候就听说过。首先明确一点,它理解起来确实不复杂,而且它也非常好用。那我们去理解闭包之前,要有什么基础 呢?我个人认为最重要的便是作用域(lexical scope),如果对作用域和作用域链不理解的同学最好自己先去学一学,再回过头来,理解闭包,就更加轻松。

  下面便直接进入主题。

  我们知道一个函数是有作用域的,在函数内部定义的局部变量只有在函数内部才可以访问的到。一旦函数访问结束被销毁,局部变量随之也会销毁,无法 通过任何方式再次访问局部变量,除了闭包。也就是说,我们可以通过闭包这一个方法,从函数的外部去访问到函数内部的变量,即使那个函数已经被销毁。没错, 闭包最重要的用法就是,我们只提供某些接口去访问和修改局部变量,而外部是不能直接访问到局部变量的。

  说了那么多有关如何使用闭包,我们来看看闭包是长什么样子的。又到了举个栗子的环节,依然是最简单的people和name。

var people = function(){
        var name = "Yika";
        var sayName = function(){
            return name;  //访问了people函数的局部变量name
        }
        var setName = function(newName){
            name = newName;  //访问了people函数的局部变量name
        }
        return{
            sayName: sayName,
            setName: setName
        }//返回一个对象
    }

    var p1 = people();        //函数return的是一个对象,这个对象里有两个函数sayName和setName
    console.log(p1.name);     //undefined.   name是people函数里的局部变量,而不是p1对象的属性,当然为undefined
    console.log(p1.sayName());//"Yika"
    p1.setName("Ruyi");       //通过setName函数修改局部变量name的值
    console.log(p1.sayName());//"Ruyi"

  看完这个例子,想必对闭包多少有个了解啦,除了注释的内容,下面再做些补充。

  问:为什么局部变量name属性在people执行完之后,没有被销毁呢,反而数值还保存在内存中。

  答: 在例子中,函数注释那里专门写了(访问了people函数的局部变量name)。正是因为people函数里的sayName函数和setName函数访 问了name属性,并且通过return传到了p1对象里,成了p1的两个方法。因为方法一直引用着people函数的局部变量,所以不会被消除,依然会 在内存中。这样便形成了闭包,可以在函数外部访问到函数内部的局部变量。

  对此,我们可以换个更直观的写法。

var people = function(){
        var name = "Yika";

        var obj = {
            sayName: function(){
                return name;
            },
            setName: function(newName){
                name = newName
            }
        };

        return obj;       //直观的返回对象
    }
//下面的结果是一样的。

  当然闭包也不是一直那么好用,特别是在循环里。继续举例子

<body>
    <input type="button"/>
    <input type="button"/>
    <input type="button"/>
    <input type="button"/>
    <input type="button"/>
    <input type="button"/>
    <input type="button"/>
    <script type="text/javascript">
        var oBtn = document.getElementsByTagName('input');
        for(var i = 0, len = oBtn.length; i < len; i++){
            oBtn[i].onclick = function(){
                alert("value = " + i);    //闭包陷阱的发生地!永远输出 value = 7
            }
        }
    </script>
</body>

  当我们运行上面的代码的时候,我们是这样想的,循环一下按钮,并输出按钮所在的序号,但是我们得到的却永远是7。其实用我们之前讲的闭包会让变 量的值一直保存在内存中的原理想一想,就应该懂了。当我们循环的时候按钮的点击事件时,是引用了for循环里的 i 变量。当所有按钮都绑定了点击事件后,i 的值也已经变成了7,当然所有的按钮输出的都是7啦!怎么解决这个问题也很好办的,但是我希望留下给大家思考。这里就说一下大致思路吧,我们可以在循环之 外创建一个辅助函数,并让辅助函数return一个绑定当前 i 的函数。

  当然这里我也只是抛砖引玉的介绍了一下闭包,希望可以帮到大家浅显简单的了解闭包。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索函数
, 变量
, function
, 闭包
, name
, 局部变量闭包link
, 闭包理解
, 变量销毁
, 局部对象
, 局部
, 闭包循环
, javascript闭包写法
, 销毁变量
循环闭包
javascript 闭包理解、javascript 闭包、javascript闭包详解、javascript闭包面试题、javascript闭包的作用,以便于您获取更多的相关知识。

时间: 2024-08-29 01:22:54

JavaScript——以简单的方式理解闭包的相关文章

让你一句话理解闭包(简单易懂)_javascript技巧

接触javascript很久了,每次理解闭包都似是而非,最近在找Web前端的工作,所以需要把基础夯实一下. 本文是参照了joy_lee的博客 闭包 在她这篇博客的基础上以批注的形式力争把我的理解阐述出来,如果有不当之处,欢迎批评指正. <高级程序设计>上,这样说:当在函数内部定义了其他函数时候,就创建了闭包.闭包有权访问包含函数内部的所有变量. (这句话怎么理解呢?照这句话理解的话,闭包就是一个嵌套函数嘛!嵌套函数对包含它的函数的变量当然可以访问,这是没有问题的.) 一般来说,内部函数是能够访

多层级理解闭包

闭包 闭包的概念困惑了我很久,记得当时我面试的时候最后一面有一个问题就是问题关于闭包的问题,然而到现在已经完全不记得当时的题目是啥了,但仍然能够回忆起当时不会的feel,虽然面试官非常友好的提醒了我应该用闭包,可是在我吭哧半天出不来的情况下,迷面试官还是耐心的给我讲了什么是闭包:有一个函数处理之后返回另一个函数,且只能执行一次.然后给我把当时的题写了一下,直到我出来都没有理解什么是闭包,那个题到底是什么题,要不是其他都答出来的话,估计都要挂.哎~一个菜鸟的心路历程.于是,闭包就成了我心里的梗.

浅谈JavaScript对象的创建方式_javascript技巧

通过Object构造函数或对象字面量创建对象时,使用同一个接口创建很多对象时,会产生大量的重复代码.为了简化,引入了工厂模式. 工厂模式 function createPerson(name, age, job) { var obj = new Object(); obj.name = name; obj.age = age; obj.job = job; obj.sayHello(){ alert(this.name); }; return obj; } var p1 = createPers

JavaScript中的作用域链和闭包_javascript技巧

作用域 全局作用域 局部作用域 作用域链 执行上下文 活动对象 闭包 闭包优化 JavaScript中出现了一个以前没学过的概念--闭包.何为闭包?从表面理解即封闭的包,与作用域有关.所以,说闭包以前先说说作用域. 作用域(scope) 通常来说一段程序代码中使用的变量和函数并不总是可用的,限定其可用性的范围即作用域,作用域的使用提高了程序逻辑的局部性,增强程序的可靠性,减少名字冲突. 全局作用域(Global Scope) 在代码中任何地方都能访问到的对象拥有全局作用域,以下几种情形拥有全局作

Javascript实现Linq查询方式

Linq是.net平台一个重要的技术,全称Language Integrated Query.通过构建快速查询语句,可快速从数据库或集合中筛选数据集.以查询数据库相同的方式操作内存数据.       在ECMAScript 5th以后的版本中,Javascript实现了有限的有限的Linq查询方式,包括forEach, every, some, filter, map, reduce and reduceRight.        首先需要说明,以上这些方法并不是跨浏览器的,对版本有相应的限制.

提高网页加载速度的初步简单技巧方式

网页的加载速度是评估网站质量一个重要指标.原因在于大多数用户能够容忍的网页加载时间只有几秒,如果超出了访客的忍受范围他们会毫不留情地关掉你的网 页,所以网页载入速度会极大地影响网站的流量和访问.以下总结了几种可以明显提高网站加载速度的初步简单技巧方式,如果你的网站存在载入速度慢的问题不妨 与此为参考对网页做些初步优化. 网页加载提速之 – 优化网页图片文件 你的网页一定有图片,加载一个网页往往图片的总尺寸是最大的,特别是那些颜色丰富的背景图片和大副广告图片.所以一般要在同等图片质量的情况下要尽可

JavaScript中的继承方式详解

 这篇文章主要介绍了JavaScript中的继承方式详解,本文讲解了js继承的概念.原型式继承与类式继承.原型链继承.类式继承.组合继承.原型式继承等内容,需要的朋友可以参考下     js继承的概念 js里常用的如下两种继承方式: 原型链继承(对象间的继承) 类式继承(构造函数间的继承) 由于js不像java那样是真正面向对象的语言,js是基于对象的,它没有类的概念.所以,要想实现继承,可以用js的原型prototype机制或者用apply和call方法去实现 在面向对象的语言中,我们使用类来

JavaScript实现简单的日历效果_javascript技巧

只是个简单的日历模板,各位可根据需要自行添加需要的功能.该模板更多的是提供了关于年.月.日.月初.月末.星期的获取函数.各位可根据需要自行获取.欢迎提供更简便的方式方法,互相学习提高!谢谢~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>日历</title> <style type="

js函数 执行方式-javascript函数的执行方式?

问题描述 javascript函数的执行方式? javascript函数有哪些执行方式,有高手帮忙总结一下吗? 解决方案 不知道你说的方式按照什么分类,和别的编程语言类似,js的函数从调用方式上分为普通函数和回调函数,从定义方式看,分为命名函数和匿名函数,从调用者来说,分为递归函数和非递归函数. 解决方案二: 匿名(function(i){alert(i)})(11)显示申明的function func(i){alert(i)}func(1)变量式var func=function(i){ale