阮一峰的学习Javascript闭包(Closure)

闭包(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()());  //输出 "The Window",其中object.getNameFunc()函数执行环境是object中,子匿名函数执行环境是全局环境


代码片段二。

  var name = "The Window";

  var object = {
    name : "My Object",

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

    }

  };

  alert(object.getNameFunc()());  //输出 "My Object",其中that=this;是将that指向object实例

 

总结:

闭包是定义在函数内部的函数,用于读取函数内部局部变量的函数,是打通函数内外的桥梁,但是闭包会导致子函数所依赖的夫函数不被“垃圾回收”,所以乱用闭包可能导致内存溢出、性能问题。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/553940.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IE浏览器打不开网页有什么解决的方法

IE浏览器打不开网页有什么解决的方法 更新时间:2021-06-06 15:35:38   IE浏览器是Windows电脑自带的浏览器,兼容性强,受到很多用户的喜欢,但是在使用的过程中难免会出现一些问题,比如就有用户发现自己的IE浏览器打不…

阮一峰的JavaScript 的 this 原理

一、问题的由来 学懂 JavaScript 语言,一个标志就是理解下面两种写法,可能有不一样的结果。 var obj {foo: function () {} };var foo obj.foo;// 写法一 obj.foo()// 写法二 foo()上面代码中,虽然obj.foo和foo指向同一个函数,…

win7系统5分钟自动注销的解决方法

我们在电脑使用的过程中,有时候会遇到过5分钟就自动注销的情况。一般来说都是因为电脑中了病毒,启动程序遭到了恶意修改,或者系统启动文件因为某些操作删除或损坏了,我们可以用下面的方法尝试解决。 win7系统5分钟自动注销的解决…

计算机基础:IP地址,子网掩码,默认网关,DNS服务器

如图各项IP地址、子网掩码、默认网关、DNS服务器分别都代表什么意思 (一)IP地址 IP是32位二进制数据,通常以十进制表示,并以“.”分隔。IP地址是一种逻辑地地址,用来标识网络中一个个主机,IP有唯一性&#…

win7系统如何更改密码策略

win7的密码策略关系着我们的密码格式、密码需要的字符等,如果我们设置的密码策略太过复杂,可能会让我们在使用密码时非常麻烦,但是也会让我们的密码更难被入侵,那么win7系统如何更改密码策略呢?就此问题,下面一起来看…

js基础中Null、undefined、NaN、false、0、{}的理解及使用

数据类型: 值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。 引用数据类型:对象(Object)、数组(Array)、函数…

解决vue的{__ob__: observer}取值问题

vue编码中经常出现获取到的数据是:{__ob__: Observer} 格式的,详细如下 可能导致后续数据操作错误,如何获取其中的数值呢 解决方法如下: 将返回的数据data先转换为JSON字符串形式,然后再从字符串形式转换成JSON格式JS…

Js数组去重的多种方法

方法一 原理&#xff1a;利用双层循环将相邻元素 arr[i]和arr[i1] 进行比较&#xff0c;相等则数组删除arr[i1] 下标元素 var arr [1,23,1,1,1,3,23,5,6,7,9,9,8,5]; function removeDuplicatedItem(arr) {for(var i 0; i < arr.length-1; i){for(var j i1; j < ar…

qq浏览器网站禁止访问怎么办 qq浏览器网站禁止访问如何解决

打开手机的QQ浏览器说访问网页被禁止&#xff0c;是设置错误造成的&#xff0c;解决方法如下&#xff1a; 1、首先在手机屏幕上左右滑动&#xff0c;找到安装好的QQ浏览器的图标。 <a styleqq浏览器网站禁止访问怎么办 qq浏览器网站禁止访问如何解决"> 2、接下来…

计算机基础:程序、进程、线程

进程、线程、多线程相关总结 一、说说概念 1、进程&#xff08;process&#xff09; 狭义定义&#xff1a;进程就是一段程序的执行过程。 广义定义&#xff1a;进程是一个具有一定独立功能的程序关于某个数据集合的一次运行活动。它是操作系统动态执行的基本单元&#xff0…

Win7系统局域网抢网速的方法

Win7旗舰版局域网怎么抢占网速?最近有很多使用Win7系统的用户问小编&#xff0c;反应自己在局域网下玩游戏的时候很卡&#xff0c;因为很多人在用网络&#xff0c;导致自己的游戏、看电影很不爽。那么遇到这样的问题怎么办呢?下面&#xff0c;就给大家介绍Win7系统局域网抢网…

win7打印机提示无法保存设置错误0x00006cc的处理方法

win7允许快速连接共享打印机&#xff0c;这让用户少了不少设置烦恼&#xff0c;那如果在打印机的快速设置中提示错误0x00006cc代码要怎么解决呢?快跟小编一起来看看win7打印机提示无法保存设置错误0x00006cc的处理方法吧。 win7打印机提示无法保存设置错误0x00006cc的处理方法…

磁卡、ID卡、IC卡、M1卡、CPU卡的理解区分

一、磁卡 磁卡是在一张塑料片上均匀地涂布上一层磁性微 粒材料制成的。 刚生产出来的磁卡上面的磁性微粒是不显磁性的&#xff0c; 这样的磁卡就象一张白纸&#xff0c; 人们需要在磁卡里输入一些信息才能使用。 那么信息是怎样被记录的呢&#xff1f;这就需要纪录磁头 的帮助…

U盘装win7系统出现question(1808)的原因与解决方法

U盘装系统是很多用户和电脑城装机员的首选&#xff0c;这种方法简单快捷&#xff0c;一学就会。但也有用户在安装系统过程中会碰到一些问题&#xff0c;question(1808)便是常见问题之一。这是什么原因呢?下面我们就一起来看看U盘装win7系统出现question(1808)的原因与解决方法…

软考计算机基础:存储系统

软考计算机存储系统笔记&#xff1a; 存储器分类&#xff1a; 1、按存储位置分为内存和外存&#xff1b; 2、按存储材料分为磁存储&#xff08;使用磁存储介质&#xff09;、半导体存储&#xff08;分为双极型和MOS型&#xff0c;根据数据是否需要刷新可以分为静态SRAM存储器…

Win7系统组策略怎么打开 打开组策略的几种方法

在很多情况下&#xff0c;我们都会用到组策略编辑器来对电脑进行一些高级的设置&#xff0c;组策略的作用就是将管理员为用户和计算机定义并控制程序、网络资源及操作系统行为的主要工具。那么&#xff0c;在Win7系统下&#xff0c;我们要怎么打开组策略呢?下面&#xff0c;小…

vscode统计代码行数,前端开发配置、快捷键使用

1、统计代码行数 使用场景是项目年终统计行数。 实现&#xff1a;在需要统计得文件夹右键“在文件夹中查找“ &#xff0c;后输入筛选得正则表达式 ^b*[^:b#/].*$ (注意右边小图标都点亮) 这里顺便将自己使用vscode进行前端开发环境配置归纳一下&#xff0c;便于自己以后快速…

360下载器怎么打开 360下载器使用方法

360下载器怎么打开?360下载器是360安全浏览器极速浏览器中的一个下载组件&#xff0c;组件中包含了迅雷下载支持&#xff0c;所以下载文件的速度比使用ie自带的下载器会快很多。不少刚接触360安全浏览器的用户反应在使用360安全浏览器下载文件程序之后无法找到下载器所在位置&…

vue-cli打包后怎么修改服务器地址实践有效

前言&#xff1a;公司vue项目使用 npm run build 打包生成dist文件部署后&#xff0c;当需要修改服务器端地址时候就又需要重新配置url并打包部署&#xff0c;为简化部署测试工作&#xff0c;想实现通过修改服务器地址的配置文件来实现修改打包后的项目服务器地址。 项目基于vu…

干净高效的搜索引擎

找一个干净好用的搜索引擎&#xff0c;好文转载备忘 为什么不用百度搜索引擎&#xff0c;估计一百个人会有一百个理由。 百度最让人诟病的还是它的竞价排名&#xff0c;其实要赚钱无可厚非&#xff0c;但这吃相……前几天看到知乎上有人发了张百度和谷歌搜索的对比图&#xf…