学习Javascript闭包(Closure)


原文地址:http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html


作者: 阮一峰

日期: 2009年8月30日

包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。

下面就是我的学习笔记,对于Javascript初学者应该是很有用的。

一、变量的作用域

要理解闭包,首先必须理解Javascript特殊的变量作用域。

变量的作用域无非就是两种:全局变量和局部变量。

Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。

      var n=999;

      function f1(){
        alert(n);
      }

      f1(); // 999

另一方面,在函数外部自然无法读取函数内的局部变量。


      function f1(){
        var n=999;
      }

      alert(n); // error

这里有一个地方需要注意,函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明了一个全局变量!


      function f1(){
        n=999;
      }

      f1();

      alert(n); // 999

二、如何从外部读取局部变量?

出于种种原因,我们有时候需要得到函数内的局部变量。但是,前面已经说过了,正常情况下,这是办不到的,只有通过变通方法才能实现。

那就是在函数的内部,再定义一个函数。


      function f1(){

        var n=999;

        function f2(){
          alert(n); // 999
        }

      }

在上面的代码中,函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。但是反过来就不行,f2内部的局部变量,对f1就是不可见的。这就是Javascript语言特有的"链式作用域"结构(chain scope),子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。

既然f2可以读取f1中的局部变量,那么只要把f2作为返回值,我们不就可以在f1外部读取它的内部变量了吗!


      function f1(){

        var n=999;

        function f2(){
          alert(n);
        }

        return f2;

      }

      var result=f1();

      result(); // 999

三、闭包的概念

上一节代码中的f2函数,就是闭包。

各种专业文献上的"闭包"(closure)定义非常抽象,很难看懂。我的理解是,闭包就是能够读取其他函数内部变量的函数。

由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。

所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

四、闭包的用途

闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。

怎么来理解这句话呢?请看下面的代码。


      function f1(){

        var n=999;

        nAdd=function(){n+=1}

        function f2(){
          alert(n);
        }

        return f2;

      }

      var result=f1();

      result(); // 999

      nAdd();

      result(); // 1000

在这段代码中,result实际上就是闭包f2函数。它一共运行了两次,第一次的值是999,第二次的值是1000。这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。

为什么会这样呢?原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。

这段代码中另一个值得注意的地方,就是"nAdd=function(){n+=1}"这一行,首先在nAdd前面没有使用var关键字,因此nAdd是一个全局变量,而不是局部变量。其次,nAdd的值是一个匿名函数(anonymous function),而这个匿名函数本身也是一个闭包,所以nAdd相当于是一个setter,可以在函数外部对函数内部的局部变量进行操作。

五、使用闭包的注意点

1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

六、思考题

如果你能理解下面两段代码的运行结果,应该就算理解闭包的运行机制了。

代码片段一。


      var name = "The Window";

      var object = {
        name : "My Object",

        getNameFunc : function(){
          return function(){
            return this.name;
          };

        }

      };

      alert(object.getNameFunc()());

代码片段二。


      var name = "The Window";

      var object = {
        name : "My Object",

        getNameFunc : function(){
          var that = this;
          return function(){
            return that.name;
          };

        }

      };

      alert(object.getNameFunc()());











资源下载链接为: https://pan.quark.cn/s/1e68be2bff6a 这些压缩包文件里有大约60个小程序的源码示例,是学习小程序开发的优质资源。小程序是一种无需下载安装就能用的轻量级应用,广泛应用于生活服务、电商购物、社交互动等众多领域。研究这些源码,开发者能深入学习小程序开发技术和最佳实践。wx_app-master.zip可能是一个基础小程序项目模板,涵盖小程序的基本结构和组件使用。学习者可借此了解小程序的目录结构、配置文件,以及wxml、wxss和JavaScript的结合方式。BearDiary-master.zip和weapp-bear-diary-master.zip可能是日记类小程序示例,展示如何实现用户记录、查看和管理个人日记等功能,包括处理用户输入、存储数据和创建交互式界面。WXNews-master.zip和仿知乎日报.zip可能是新闻阅读类小程序的源码,使用网络请求API获取实时新闻数据并展示。学习者能通过这些代码学习处理网络请求、动态加载数据和设计适应性强的布局。wechat-weapp-gank-master.zip可能是一个类似“干货集中营”的技术分享平台小程序示例,涉及数据分类、搜索功能和用户交互设计,可学习如何组织和展示大量数据及实现筛选和搜索功能。Xiaoxiazhihu (知乎日报) 微信小程序 d.zip是仿知乎日报的小程序,涉及数据同步、新闻详情页设计和滑动效果实现,是模仿流行应用界面和用户体验的良好学习案例。仿豆瓣电影-demo.zip提供电影信息查询和展示功能,可能涉及API接口调用、数据解析以及评分和评论系统实现,有助于开发者理解如何集成外部服务和处理展示多媒体内容。仿今日头条app.zip类似今日头条的小程序,涵盖新闻推荐算法、个性化推荐和推送通知等复杂功能,能让开发者学习处理大数据流和提供个性化用户体验。
资源下载链接为: https://pan.quark.cn/s/76d9f06f4cda Vue.js 是一款由尤雨溪开发的轻量级前端 JavaScript 框架,凭借简洁的 API、高效的虚拟 DOM、组件化设计以及强大的生态系统,在现代 Web 开发领域广受欢迎。在开发“基于 Vue 的电商后台管理系统”时,Vue.js 发挥了核心作用,助力构建出高效且易于维护的管理界面。 Vue.js 的核心特性包括:虚拟 DOM,通过计算差异仅更新必要部分,避免直接操作 DOM 产生的性能损耗;双向数据绑定,借助 v-bind 和 v-model 指令,实现视图与模型数据的同步;指令系统,如 v-if、v-for、v-on 等,扩展 HTML 行为,增强模板功能;组件化,允许开发者创建可复用的 UI 部件,每个组件拥有独立的视图和数据逻辑,便于独立开发、测试与重用。 在电商后台管理系统中,常见的组件有商品列表、订单管理、用户管理等,它们通过 props 接收父组件数据,并通过事件向父组件传递信息,组件可嵌套以构建复杂 UI 结构。对于多页面应用,Vue.js 结合 Vue Router 实现页面跳转,Vue Router 支持动态路由匹配、命名路由、路由懒加载等功能,助力单页应用(SPA)的构建。Vuex 作为 Vue.js 的官方状态管理工具,可用于集中管理全局共享状态,如用户登录状态、购物车信息等,通过 actions、mutations 和 getters 实现状态的改变与获取。Vue.js 通常搭配 Axios 库进行 API 请求,处理后端接口数据,在电商后台管理系统中,涉及商品的增删改查、订单的创建更新、用户信息同步等操作,都需要与后端交互。Vue.js 支持使用 Jest 或 Mocha 等测试框架进行单元测试和集成测试,这对于电商后台管理系统尤为重要,能够及时发现并
资源下载链接为: https://pan.quark.cn/s/edccc07f4fda “吉林大学数据库实验代码和实验报告.zip”是一个包含数据库课程实验资料的压缩包,涵盖了实验代码、实验报告以及学习资源。这些资料有助于深入理解数据库原理、操作以及编程语言与数据库的交互。 实验报告:“55170606刘桦数据库应用程序开发实验报告.doc”记录了实验的全过程,包括实验目标、环境搭建、操作步骤、遇到的问题及解决方法和总结。通过阅读这份报告,能够掌握数据库应用开发的核心技术和实践经验。 数据库与Java交互:“JAVA 对DB2中的BLOB对象的.ppt”介绍了如何在Java中处理DB2数据库的BLOB对象。BLOB用于存储大量二进制数据,如图片、音频或视频。该教程可能涉及使用JDBC API进行数据库连接、SQL语句执行以及BLOB数据的处理。 操作演示:“操作演示.rar”可能包含数据库操作的示例,通过SQL脚本或图形化工具展示数据库的增删改查等基本操作以及复杂查询和事务管理,帮助学生更好地理解数据库的实际操作。 任务文件:“task1”至“task10”代表实验的不同阶段,每个任务对应一个数据库概念或技术,如关系模型、索引、视图、存储过程等。通过完成这些任务,学生可以逐步掌握数据库设计和管理的核心技能。 CG11 DB2 programming with Java:这可能是一份关于使用Java进行DB2数据库编程的课程材料,详细介绍了如何使用Java编写数据库应用程序,涵盖JDBC驱动、连接池、事务处理等内容。 task9和task2:这两个文件可能涉及特定的数据库技术或挑战,如数据库优化、并发控制、备份恢复等,有助于学生提升数据库系统的实际操作能力。 该压缩包提供了丰富的数据库学习资源,包含理论知识和实践环节,是学习数据库管理、编程和系统设计的良好素材。通过深入研究
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值