javascript从作用域链谈闭包_javascript技巧

1、javascript从作用域链谈闭包神马是闭包关于闭包的概念，是婆说婆有理。闭包是指冇权访问另外一个函数作用域中的变量的函数这概念有点绕，拆分一 2从概念上说，闭包有两个特点： 1、函数 2、能访问另外一个函数作用域中的变量在es 6之前，javascript只有函数作用域的概念，没有块级作用域(但calch 捕获的异常只能在catch块中访问)的概念(iife叮以创建局部作用域)。每 个函数作用域都是封闭的，即外部是访问不到函数作用域小的变量。function getname() var name = 美女的名字；console, log (name) ;/美女的名字function dis

2、playname() console, log (name) ; /扌艮错但是为了得到美女的名字，不死心的单身汪把代码改成了这样:function getname() var name = 美女的名字;fun cl i on displaynameo console log(name);return displayname;var 美女二 getname ();美女()/美女的名字这下，美女是一个闭包了，单身汪想怎么玩就怎么玩了。(但并不推荐单身汪用 屮文做变量名的写法，大家不要学)。关于闭包呢，还想再说三点：1、闭包可以访问当前函数以外的变量 function getouter()var d

3、ate = ' 815，;function getdate(str)console. log(str + date) ; /访问外部的 datereturn getdate(j 今天是：/"今天是：815getouter ();getdate是一个闭包，该函数执行时，会形成一个作用域a, a中并没有定义变 量date,但它能在父一级作用域小找到该变量的定义。2、即使外部函数已经返回，闭包仍能访问外部函数定义的变量function getouter()var date 二'815'function getdate(str)console. log(str + d

4、ate) ; /访问外部的 datereturn getdate; /外部函数返冋var today 二 getouter();todayc今天是:/今天是:815today(j明天不是：)；/"明天不是：8153、闭包可以更新外部变量的值function updatecount()var count = 0;function getcount(val)count = val;con sole, log (count);return gctcount;/外部函数返回var count = updatecount();count(815); /815count(816); /816作用

5、域链为毛闭包就能访问外部函数的变量呢？这就要说说javascript屮的作用域链 to_javascript屮有一个执行环境(execution context)的概念，它定义了变量或函 数冇权访问的其它数据，决定了他们各自的行为。每个执行环境都冇一个与z关 联的变量对彖，环境中定义的所有变量和函数都保存在这个对象中。你可以把它 当做javascript的一个普通对象，但是你只能修改它的属性，却不能引用它。变量对象也是有父作用域的。当访问一个变量时，解释器会首先在当前作用域查 找标示符，如果没有找到，就去父作用域找，直到找到该变量的标示符或者不再 存在父作用域了，这就是作用域链。作用域链和原型

6、继承有点类似，但乂有点小区别：如果去查找一个普通对象的属 性吋，在当前对象和其原型屮都找不到时，会返冋undefined；但查找的属性在 作用域链中不存在的话就会抛出referenceerror0作用域链的顶端是全局对象。对于全局环境中的代码，作用域链只包含一个元索: 全局对象。所以，在全局环境中定义变量的时候，它们就会被定义到全局对象中。 当函数被调用的时候，作用域链就会包含多个作用域对象。全局环境关于作用域链讲得略多（红皮书上有关于作用域及执行环境的详细解释），看一个 简单地例子：/ my_script js "use strict" var foo 二 1;var b

7、ar 二 2;在全局环境小，创建了两个简单地变量。如前而所说，此时变量对象是全局对象。 non-nested functions改动一下代码，创建一个没有函数嵌套的函数:use strict"var foo = 1;var bar = 2; function myfunc() /- define 1ocal-to-function variablesvar a = 1;var b = 2;var foo = 3;console. log(/zinside myfunc)；console. log(outside)；/- and then, call it: myfunc ();当my

8、func被定义的时候,myfunc的标识符(identifier)就被加到了当前的作 用域对象中(在这里就是全局对象)，并且这个标识符所引用的是一个函数对象 (function object)。函数对象小所包含的是函数的源代码以及其他的屈性。其中一个我们所关心的属性就是内部属性scopeo scope所指向的就是当 前的作用域对象。也就是指的就是函数的标识符被创建的时候，我们所能够直接 访问的那个作用域对象(在这里就是全局对象)。比较重要的一点是:myfunc所引用的函数对象，其本身不仅仅含冇函数的代码, 并且还含有指向其被创建的时候的作用域对象。当myfunc函数被调用的时候，一个新的作用域

9、对象被创建了。新的作用域对象 中包含myfunc函数所定义的本地变量，以及其参数(arguments)。这个新的作 用域对象的父作用域对象就是在运行myfunc时我们所能直接访问的那个作用域 对象。 nested functions如前面所说，当函数返回没有被引用的时候，就会被垃圾回收器回收。但是对于 闭包(函数嵌套是形成闭包的一种简单方式)呢，即使外部函数返回了，函数对 彖仍会引用它被创建时的作用域对彖。use strict"function creatccounter (initial) var counter = initial;function increment(value

10、) counter +二 value;function get () return counter;return increment: increment,get: get；var mycounter 二 createcounter (100);consol e. 1 og (mycounter. get () ; / 返回 100 mycountcr. incrcmcnt(5);console, log(mycounter. get() ; / 返回 105当调用createcounter (100)时，内嵌函数increment和get都冇指向 createcounter(100) sco

11、pe 的引用。如果 createcounter (100)没有任何返冋值, 那么createcounter (100) scope不再被引用,于是就可以被垃圾回收。但是因 为createcounter (100)实际上是冇返回值的，并且返回值被存储在了 mycounter 中，所以对象z间的引用关系发生变化。需要用点时间思考的是：即使createcounter (100)已经返回，但是-其作用域仍 在，并能且只能被内联函数访问。可以通过调用mycounter. increment()或 mycounter. get ()来直接访问 createcounter (100)的作用域。当mycoun

12、ter. increment ()或mycounter. get ()被调用时，新的作用域对象会 被创建，并且该作用域对象的父作用域对象会是当前可以直接访问的作用域对 彖。当执彳亍到return counter;时，在get ()所在的作用域并没有找到对应的标示符, 就会沿着作用域链往上找，直到找到变量counter,然后返回该变量，调用 increment (5)则会更冇意思。当单独调用increment (5)时,参数value会存贮 在当前的作用域对象。函数耍访问value,能马上在当前作用域找到该变量。但 是当函数要访问counter时，并没冇找到，于是沿着作用域链向上查找，在 cre

13、atecounter (100)的作用域找到了对应的标示符，increment ()就会修改 counter的值。除此之外，没有其他方式来修改这个变量。闭包的强大也在于此, 能够存贮私有数据。similar function objects, different scope objects 对于上面的counter示例，再说点扩展的事。看代码：/myscript js"use strict"function createcounter(initial) /* sec the code from previous example */- create counter obje

14、ctsvar mycounterl 二 createcounter(100);var mycounter2 二 createcounter(200);mycountcrl和mycountcr2仓u建之后,关系图是酱紫的:在上面的例子中，mycounterl. increment 和 mycounter2. increment 的函数对象 拥有着一样的代码以及一样的属性值（name, length等等），但是它们的scope 指向的是不一样的作用域对彖。这才冇了下而的结果:var a, b;a = mycounterl. get(); / b 二 mycounter2. gct() ; / mycounterl. incremen