JavaScript中的闭包(Closure)详细介绍_javascript技巧

闭包是JavaScript中一个重要的特性,其最大的作用在于保存函数运行过程中的信息。在JavaScript中,闭包的诸多特性源自函数调用过程中的作用域链上。

 

函数调用对象与变量的作用域链

 

对于JavaScript中的每一次函数调用,JavaScript都会创建一个局部对象以储存在该函数中定义的局部变量;如果在该函数内部还有一个嵌套定义的函数(nested function),那么JavaScript会在已经定义的局部对象之上再定义一个嵌套局部对象。对于一个函数,其内部有多少层的嵌套函数定义,也就有多少层的嵌套局部对象。该局部对象称为“函数调用对象”(ECMAScript 3中的“call object”,ECMAScript 5中改名为“declarative environment record”,但个人认为还是ECMAScript 3中的名称更容易理解一些)。以下面的函数调用为例:

复制代码 代码如下:

function f(x){
  var a = 10;
  return a*x;
}
console.log(f(6));//60

在这个简单的例子中,当调用f()函数时,JavaScript会创建一个f()函数的调用对象(姑且称之为f_invokeObj),在f_invokeObj对象内部有两个属性:a和x;运行f()时,a值为10而x值为6,因此最后的返回结果为60。图示如下:

当存在函数嵌套时,JavaScript将创建多个函数调用对象:

复制代码 代码如下:

function f(x){
  var a = 10;
  return a*g(x);
  function g(b){
    return b*b;
  }
}
console.log(f(6));//360

在这个例子中,当调用f()函数时,JavaScript会创建一个f()函数的调用对象(f_invokeObj),其内部有两个属性a和x,a值为10而x值为6;运行f()时,JavaScript会对f()函数中的g()函数进行解析定义,并创建g()的调用对象(g_invokeObj),其内部有一个属性b,b值与传入参数x相同为6,因此最后的返回结果为360。图示如下:

可以看到,函数调用对象形成了一条链。当内嵌函数g()运行,需要获取变量值的时候,会从最近的函数调用对象中开始进行搜索,如果无法搜索到,则沿函数调用对象链在更远的调用对象中进行搜寻,此即所谓的“变量的作用域链”。如果两个函数调用对象中出现相同的变量,则函数会取离自己最近的那个调用对象中的变量值:

复制代码 代码如下:

function f(x){
  var a = 10;
  return a*g(x);
  function g(b){
    var a = 1;
    return b*b*a;
  }
}
console.log(f(6));//360, not 3600

在上面的例子中,g()函数的调用对象(g_invokeObj)和f()函数的调用对象(f_invokeObj)中均存在变量a且a的值不同,当运行g()函数时,在g()函数内部所使用的a值为1,而在g()函数外部所使用的a值则为10。图示此时的函数调用对象链如下:

什么是闭包?

在JavaScript中所有的函数(function)都是对象,而定义函数时都会产生相应的函数调用对象链,一次函数定义对应一个函数调用对象链。只要函数对象存在,相应的函数调用对象就存在;一旦某函数不再被使用,相应的函数调用对象就会被垃圾回收掉;而这种函数对象和函数调用对象链之间的一一组合,就称之为“闭包”。在上面f()函数和g()函数的例子中,就存在两个闭包:f()函数对象和f_invokeObj对象组成了一个闭包,而g()函数对象和g_invokeObj-f_invokeObj对象链一起组成了第二个闭包。当g()函数执行完毕后,由于g()函数不再被使用,因此g()闭包被垃圾回收了;之后,当f()函数执行完毕后,由于同样的原因,f()闭包也被垃圾回收了。

从闭包的定义可以得出结论:所有的JavaScript函数在定义后都是闭包 – 因为所有的函数都是对象,所有的函数在执行后也都有其对应的调用对象链。

不过,令闭包真正发挥作用的是嵌套函数的情况。由于内嵌函数是在外部函数运行的时候才开始定义的,因此内嵌函数的闭包中所保存的变量值(尤其是外部函数的局部变量值)是这次运行过程中的值。只要内嵌函数对象依然存在,那么其闭包就依然存在(闭包中的变量值不会发生任何改变),从而也就实现了保存函数运行过程的信息这个目的。考虑以下这个例子:

复制代码 代码如下:

var a = "outside";
function f(){
  var a = "inside";
  function g(){return a;}
  return g;
}
var result = f();
console.log(result());//inside

在这个例子中,当运行f()函数时,g()函数被定义,同时创建了g()函数的闭包,g()闭包包含了g_invokeObj-f_invokeObj对象链,因此保存了f()函数执行过程中的变量a的值。当执行console.log()语句时,由于g函数对象仍然存在,因此g()闭包也依然存在;当运行这个仍然存在的g函数对象时,JavaScript会使用依然存在的g()闭包并从中获取变量a的值(“inside”)。

时间: 2024-10-26 05:46:06

JavaScript中的闭包(Closure)详细介绍_javascript技巧的相关文章

JavaScript中的类(Class)详细介绍_javascript技巧

在JavaScript中,可以使用类(Class)来实现面向对象编程(Object Oriented Programming).不过,JavaScript中的类与Java中的有所不同,其相应的定义和使用也不一样. JavaScript中类的定义 在JavaScript中,所有从同一个原型对象(prototype)处衍生出来的对象组成了一个类:也就是说,JavaScript中的类是一个对象集合的概念,如果两个对象它们的prototype相同,那么它们就属于同一个类:JavaScript中的类甚至都

JavaScript中的值类型详细介绍_javascript技巧

计算机程序的实质很大程度上可以说是机器对各种信息(值)的操作与读写.在JavaScript中,存在多种类型的值,这些值分成两大类:Primitive(基本类型)和Object(对象). Primitive JavaScript中Primitive有5种类型: 1.Number.所有的数字,无论是整数还是小数,均为Number类型. 2.String.字符串类型. 3.Boolean.布尔类型,true或者false. 4.null.此类型只有null一个值. 5.undefined.此类型只有u

JavaScript中setter和getter方法介绍_javascript技巧

javascript中的setter.getter是平时接触比较少的方法,其本身也并不是标准方法,只在非ie浏览器里支持(ie内核也许有其他方法可以做到呢?暂时不知其解),但是加以利用可以做许多事情,比如: 1.对数据的访问限制: a.value是对value变量的getter方法调用,如果在getter方法实现中抛出异常,可以阻止对value变量的访问 2.对dom变量进行监听: window.name是一个跨域非常好用的dom属性(大名鼎鼎,详见百度),如果覆盖window.name的set

canvas 画布在主流浏览器中的尺寸限制详细介绍_javascript技巧

canvas 画布在主流浏览器中的尺寸限制详细介绍 通过测试发现,canvas在不同浏览器下面有不同的最大尺寸限制. 大家都知道,canvas有自身的width,height属性来控制尺寸,用css的width,height,控制显示的大小.可以理解为canvas就是一个img,属性的width,height就是这个img的原图像素大小.但在各浏览器下,设置canvas尺寸时发现有最大尺寸限制.测试一下与大家分享. 测试代码 <!DOCTYPE html> <html> <h

JavaScript中的return语句简单介绍_javascript技巧

return语句在js中非常的重要,不仅仅具有返回函数值的功能,还具有一些特殊的用法,下面就结合实例简单介绍一下return语句的作用. 一.用来返回控制和函数结果: 通常情况,return语句对于一个函数是很有必要的,因为往往需要函数在一系列的代码执行后会得到一个期望的返回值,而此值就是通过return语句返回,并且将控制权返回给主调函数. 语法格式: return 表达式  代码实例如下: function add(){ var a=1; var b=2; return a+b; } fun

Javascript中的高阶函数介绍_javascript技巧

这是一个有趣的东西,这或许也在说明Javascript对象的强大.我们要做的就是在上一篇说到的那样,输出一个Hello,World,而输入的东西是print('Hello')('World'),而这就是所谓的高阶函数. 高阶函数 高阶看上去就像是一种先进的编程技术的一个深奥术语,一开始我看到的时候我也这样认为的. Javascript的高阶函数 然而,高阶函数只是将函数作为参数或返回值的函数.以上面的Hello,World作为一个简单的例子. 复制代码 代码如下: var Moqi = func

JavaScript中使用Callback控制流程介绍_javascript技巧

javascript中随处可见的callback对于流程控制来说是一场灾难,缺点显而易见: 1.没有显式的return,容易产生多余流程,以及由此引发的bug. 2.造成代码无限嵌套,难以阅读. 下面就来说说怎么解决避免上述的问题. 第一个问题是一个习惯问题,在使用callback的时候往往会让人忘了使用return,这种情况在使用coffee-script的时候尤甚(虽然它在编译成javascript时会自行收集最后的数据作为返回值,但是这个返回值并不一定代表你的初衷).看看下面的例子. 复制

JavaScript中的原型链prototype介绍_javascript技巧

JavaScript中的继承是通过原型链(prototype chain)来完成的:每个对象内部都有另外一个对象作为其prototype而存在,对象从这个prototype中继承属性(property).对于每个对象来说,可以用以下三种方式来访问其原型对象: 1.__proto__.可以通过对象的__proto__属性来访问其原型对象.该属性仅在Firefox.Safari和Chrome中得到支持,在IE和Opera中不支持. 2.Object.getPrototypeOf().可以将对象作为参

javascript中的if语句使用介绍_javascript技巧

在javascript中的一些选择语句: 1.if语句 当指定条件为true的时候,就执行该条件的代码. 2.if...else...语句 当该语句指定条件为true时则执行该代码,如果当条件执行为false时则执行其他代码. 3.if...else if...else...语句 该语句是选择多个代码一起执行. 4.switch 语句 选择多个代码一起执行. if语句 if(条件){ 当条件为true时执行的代码; } 例: 复制代码 代码如下: <script> function myFun