原创文章,转载请注明:JavaScript中的闭包理解  By Lucio.Yang

1.JavaScript闭包

  在小学期开发项目的时候,用node.js开发了服务器,过程中遇到了node.js的第一个陷阱:由事件和回调函数形成的特殊的循环。解决这个问题时我使用了创建闭包的方法,当然如果不需要控制循环的变量的话也可以使用数组的forEach函数。最近ES6在紧锣密鼓的准备,新标准里面的Harmony Generator和yield十分引人瞩目,也可以用来决解这个问题。这是后话了。

  这里来着重介绍一下js的闭包这一重要特性。

  首先什么是闭包?

  1.1闭包的概念解释

    闭包(wikipedia):In programming languages, a closure (also lexical closure or function closure) is a function or reference to a function together with a referencing environment—a table storing a reference to each of the non-local variables (also called free variables or upvalues) of that function.

    也就是说,闭包是一个函数或者函数的引用,并绑定了一些变量和其生存环境。

    通过以下闭包的两个简单的用途来看闭包的概念。

    1.提取函数内部的变量

function f1(){
  n=999;
  function f2(){
    alert(n);
  }
  return f2;
}
var result=f1();
result(); //

    函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。但是反过来就不行,f2内部的局部变量,对f1 就是不可见的。这就是Javascript语言特有的“链式作用域”结构(chain scope)。简单来说,作用域链就是函数在定义的时候创建的,用于寻找使用到的变量的值的一个索引,而他内部的规则是,把函数自身的本地变量放在最前面,把自身的父级函数中的变量放在其次,把再高一级函数中的变量放在更后面,以此类推直至全局对象为止。当函数中需要查询一个变量的值的时候,js解释器会去作用域链去查找,从最前面的本地变量中先找,如果没有找到对应的变量,则到下一级的链上找,一旦找到了变量,则不再继续。如果找到最后也没找到需要的变量,则解释器返回undefined。正是因为这种机制,闭包才能提取父级函数内部的变量。

    2.在内存中保有某些变量。

function f1(){
 var n=999;
 nAdd=function(){n+=1}
 function f2(){
  alert(n);
 }
 return f2;
}
var result=f1();
result(); //
nAdd();
result(); //

    首先明确一点,在函数内部定义变量/函数的时候,如果不用var,那么该变量/函数就是全局变量/函数。

    result实际上就是闭包f2函数。它一共运行了两次,第一次的值是999,第二次的值是1000。这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。为什么会这样呢?原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。这里需要解释一下js的内存回收机制。

    一般来说,一个函数在执行开始的时候,会给其中定义的变量划分内存空间保存,以备后面的语句所用,等到函数执行完毕返回了,这些变量就被认为是无用的了。对应的内存空间也就被回收了。下次再执行此函数的时候,所有的变量又回到最初的状态,重新赋值使用。但是如果这个函数内部又嵌套了另一个函数,而这个函数是有可能在外部被调用到的。并且这个内部函数又使用了外部函数的某些变量的话。这种内存回收机制就会出现问题。如果在外部函数返回后,又直接调用了内部函数,那么内部函数就无法读取到他所需要的外部函数中变量的值了。所以js解释器在遇到函数定义的时候,会自动把函数和他可能使用的变量(包括本地变量和父级和祖先级函数的变量(自由变量))一起保存起来,也就是构建一个闭包,这些变量将不会被内存回收器所回收,只有当内部的函数不可能被调用以后(例如被删除了,或者没有了指针),才会销毁这个闭包,而没有任何一个闭包引用的变量才会被下一次内存回收启动时所回收。

    3.实现对象的封装

var person = function(){
//变量作用域为函数内部,外部无法访问
var name = "default"; return {
getName : function(){
return name;
},
setName : function(newName){
name = newName;
}
}
}(); print(person.name);//直接访问,结果为undefined
print(person.getName());
person.setName("abruzzi");
print(person.getName()); 得到结果如下: undefined
default
abruzzi

    这是一个简单的js的对象的封装,只有通过对象才可以访问对象中的变量,实现了变量和环境(对象)的绑定。也就是通过闭包,我们模拟了面向对象语言中的封装对象的模板。

    4.高效率的匿名自执行函数

var datamodel = {
table : [],
tree : {}
}; (function(dm){
for(var i = 0; i < dm.table.rows; i++){
var row = dm.table.rows[i];
for(var j = 0; j < row.cells; i++){
drawCell(i, j);
}
} //build dm.tree
})(datamodel);

    代码中的闭包实际是用来做UI的初始化,执行一次后临时变量即销毁,这样的机制不会污染全局变量,效率很好。

  1.2闭包与匿名函数的概念辨别

    首先来看匿名函数的概念:

    anonymous function(wikipedia):In computer programming, an anonymous function (also function literal or lambda abstraction) is a function definition that is not bound to an identifier.

    简单来说,没有标识符的函数就是匿名函数。一下是匿名函数的一些写法:

(function() {})();最常见到的;
(function(){}());
void function(){};
错 误的写法
function(){}();

    关于匿名函数的原理和理解这里就不再赘述。我们只探讨匿名函数和闭包的关系。

    再回顾一下闭包的概念中的关键字-“ is a function or reference to a function”,说明只要是函数内部申明的函数是闭包,不管是什么函数。所以,得出结论:

      如果匿名函数不在函数内部,就不是闭包。

      函数内的匿名函数如果引用了父函数的变量,那么这个匿名函数就成为了一个闭包。

    就这么简单"( ̄▽ ̄)"""。所以产生了以下的闭包的定义方法:

var datamodel = {
table : [],
tree : {}
}; (function(dm){
//something
})(datamodel);

参考:javascript深入理解闭包-脚本之家墓中无人sunlylorn十个流年

JavaScript中的闭包理解的更多相关文章

  1. 让你分分钟学会Javascript中的闭包

    Javascript中的闭包 前面的话: 闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它 ...

  2. 难道这就是JavaScript中的"闭包"

    其实对于JavaScript中的"闭包"还没真正理解,这次在实际Coding中似乎遇到了"闭包"的问题,仅此摘录,以待深究. 表现为jQuery的post方法回 ...

  3. 浅谈JavaScript中的闭包

    浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...

  4. javascript中的闭包解析

    学习javaScript已经有一段时间了,在这段时间里,已经感受到了JavaScript的种种魅力,这是一门神奇的语言,同时也是一门正在逐步完善的语言,相信在大家的逐步修改中,这门语言会逐步的完善下去 ...

  5. 【JS】JavaScript中的闭包

    在JavaScript中,闭包指的是有权访问另一个函数作用域中的变量的函数:创建闭包最常见的方式就是在一个函数内创建另一个函数.如下例子: function A(propertyName){ retu ...

  6. Javascript中的闭包(转载)

    前面的话: 闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它.下面是作者从作用域链慢慢讲到 ...

  7. 狗日的Javascript中的闭包

    前面的话: 闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它.下面是作者从作用域链慢慢讲到 ...

  8. [译]Javascript中的闭包(closures)

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

  9. javaScript中的闭包原理 (译)

    这篇文章通过javaScript代码解释了闭包的原理,来让编程人员理解闭包.它不是写给大牛或使用功能性语言进行编程的程序员的.一旦意会了其核心概念,闭包理解起来并不难.然而,你不可能通过阅读任何有关闭 ...

随机推荐

  1. Qemu之Network Device全虚拟方案二:虚拟网卡的创建

    上文针对Qemu在前端网络流路径的建立方面做了具体的描写叙述.数据包从Host的物理网卡经过Host Linux内核中的Bridge, 经过Tap设备到达了Qemu的用户态空间.而Qemu是怎样把数据 ...

  2. ASP.NET MVC 学习之路-3

    本文在于巩固基础 到这里不得不说ASP.NET MVC一个规则:惯例优先原则 ASP.NET会假定开发人员遵循特定的规则来构建自己的程序而不是使用配置文件 ASP.NET MVC文件夹结构也遵循惯例优 ...

  3. OC字符串的常用方法

    网上写的关于字符串常用方法的博客很多,这里我简单做了下总结!不喜勿喷哦! 一.创建字符串 #import <Foundation/Foundation.h> //NSString //创建 ...

  4. FAQ:win7和win8 64位注册ocx控件方法

    win7/win8 问题所在: 64位的系统一般都是可以安装32位程序的, 执行         C:\Windows\SysWOW64\regsvr32.exe 而不是 C:\Windows\Sys ...

  5. C++ 数据结构学习二(单链表)

    模板类 //LinkList.h 单链表#ifndef LINK_LIST_HXX#define LINK_LIST_HXX#include <iostream>using namespa ...

  6. C语言队列的实现

    队列是常用的数据结构之一,下面给出一个链式队列的实现: 头文件Queue.h #ifndef Queue_H #define Queue_H typedef int Item; typedef str ...

  7. C语言——strlen()和sizeof的区别

    strlen()和sizeof()的区别: strlen()——>C字符串库函数,返回字符串的真实长度.它是从内存某位置开始扫描,直到碰到结束符'\0'停止,返回计数器值. sizeof()—— ...

  8. phpcms自定义分页

    在global.func.php中找到分页函数function pages($num, $curr_page, $perpage = 20, $urlrule = '', $array = array ...

  9. Flink资料(8) -- Flink代码贡献的指导及准则

    本文翻译自Contributing Code ----------------------------------------- Apache Flink是由自愿的代码贡献者维护.优化及扩展的.Apa ...

  10. jira 解决结果配置

    jira 的配置比较繁琐,有很多的小细节,使用中出现了各种小问题,总结梳理下 1.解决结果 问题1:编辑了任务后,解决结果变成了已解决 找到编辑任务所对应的界面方案,将解决结果字段从界面配置里移除 问 ...