登录
欢迎您光临本小站。希望您在这里可以找到自己想要的信息。。。
> 编程乐园 > web开发 > javascript > 前端开发必须知道的JS（二） 闭包及应用

前端开发必须知道的JS（二） 闭包及应用

javascript water 3159℃ 0评论

一. 闭包的理论

首先必须了解以下几个概念：

 

执行环境

每调用一个函数时（执行函数时），系统会为该函数创建一个封闭的局部的运行环境，即该函数的执行环境。函数总是在自己的执行环境中执行，如读写 局部变量、函数参数、运行内部逻辑。创建执行环境的过程包含了创建函数的作用域，函数也是在自己的作用域下执行的。从另一个角度说，每个函数执行环境都有 一个作用域链，子函数的作用域链包括它的父函数的作用域链。关于作用域、作用域链请看下面。

 

作用域、作用域链、调用对象

函数作用域分为词法作用域和动态作用域。

词法作用域是函数定义时的作用域，即静态作用域。当一个函数定义时，他的词法作用域就确定了，词法作用域说明的是在函数结构的嵌套关系下，函数 作用的范围。这个时候也就形成了该函数的作用域链。作用域链就是把这些具有嵌套层级关系的作用域串联起来。函数的内部[[scope]]属性指向了该作用 域链。

动态作用域是函数调用执行时的作用域。当一个函数被调用时，首先将函数内部[[scope]]属性指向了函数的作用域链，然后会创建一个调用对 象，并用该调用对象记录函数参数和函数的局部变量，将其置于作用域链顶部。动态作用域就是通过把该调用对象加到作用域链的顶部来创建的，此时的 [[scope]]除了具有定义时的作用域链，还具有了调用时创建的调用对象。换句话说，执行环境下的作用域等于该函数定义时就确定的作用域链加上该函数 刚刚创建的调用对象，从而也形成了新的作用域链。所以说是动态的作用域，并且作用域链也随之发生了变化。再看这里的作用域，其实是一个对象链，这些对象就 是函数调用时创建的调用对象，以及他上面一层层的调用对象直到最上层的全局对象。

譬如全局环境下的函数A内嵌套了一个函数B，则该函数B的作用域链就是：函数B的作用域—>函数A的作用域—>全局window的 作用域。当函数B调用时，寻找某标识符，会按函数B的作用域—>函数A的作用域—>全局window的作用域去寻找，实际上是按函数B的调用 对象—>函数A的调用对象—>全局对象这个顺序去寻找的。也就是说当函数调用时，函数的作用域链实际上是调用对象链。

 

闭包

在动态执行环境中，数据实时地发生变化，为了保持这些非持久型变量的值，我们用闭包这种载体来存储这些动态数据（看完下面的应用就会很好的体会 这句话）。闭包的定义：所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。

闭包就是嵌套在函数里面的内部函数，并且该内部函数可以访问外部函数中声明的所有局部变量、参数和其他内部函数。当该内部函数在外部函数外被调用，就生成了闭包。（实际上任何函数都是全局作用域的内部函数，都能访问全局变量，所以都是window的闭包）

==========================

我们来看看闭包的用途。事实上，通过使用闭包，我们可以做很多事情。比如模拟面向对象的代码风格；更优雅，更简洁的表达出代码；在某些方面提升代码的执行效率。
1 匿名自执行函数
我们知道所有的变量，如果不加上var关键字，则默认的会添加到全局对象的属性上去，这样的临时变量加入全局对象有很多坏处，
比如：别的函数可能误用这些变量；造成全局对象过于庞大，影响访问速度(因为变量的取值是需要从原型链上遍历的)。
除了每次使用变量都是用var关键字外，我们在实际情况下经常遇到这样一种情况，即有的函数只需要执行一次，其内部变量无需维护，
比如UI的初始化，那么我们可以使用闭包：

[javascript] view plaincopyprint?

  1. var datamodel = {
  2.     table : [],
  3.     tree : {}
  4. };
  6. (function(dm){
  7.     for(var i = 0; i < dm.table.rows; i++){
  8.        var row = dm.table.rows[i];
  9.        for(var j = 0; j < row.cells; i++){
  10.            drawCell(i, j);
  11.        }
  12.     }
  14.     //build dm.tree    
  15. })(datamodel);

我们创建了一个匿名的函数，并立即执行它，由于外部无法引用它内部的变量，
因此在执行完后很快就会被释放，关键是这种机制不会污染全局对象。

2缓存
再来看一个例子，设想我们有一个处理过程很耗时的函数对象，每次调用都会花费很长时间，
那么我们就需要将计算出来的值存储起来，当调用这个函数的时候，首先在缓存中查找，如果找不到，则进行计算，
然后更新缓存并返回值，如果找到了，直接返回查找到的值即可。闭包正是可以做到这一点，因为它不会释放外部的引用，
从而函数内部的值可以得以保留。

[javascript] view plaincopyprint?

  1. var CachedSearchBox = (function(){
  2.     var cache = {},
  3.        count = [];
  4.     return {
  5.        attachSearchBox : function(dsid){
  6.            if(dsid in cache){//如果结果在缓存中  
  7.               return cache[dsid];//直接返回缓存中的对象  
  8.            }
  9.            var fsb = new uikit.webctrl.SearchBox(dsid);//新建  
  10.            cache[dsid] = fsb;//更新缓存  
  11.            if(count.length > 100){//保正缓存的大小<=100  
  12.               delete cache[count.shift()];
  13.            }
  14.            return fsb;
  15.        },
  17.        clearSearchBox : function(dsid){
  18.            if(dsid in cache){
  19.               cache[dsid].clearSelection();
  20.            }
  21.        }
  22.     };
  23. })();
  25. CachedSearchBox.attachSearchBox(“input1”);

这样，当我们第二次调用CachedSearchBox.attachSerachBox(“input1”)的时候，
我们就可以从缓存中取道该对象，而不用再去创建一个新的searchbox对象。

3 实现封装
可以先来看一个关于封装的例子，在person之外的地方无法访问其内部的变量，而通过提供闭包的形式来访问：

[javascript] view plaincopyprint?

  1. var person = function(){
  2.     //变量作用域为函数内部，外部无法访问  
  3.     var name = “default”;
  5.     return {
  6.        getName : function(){
  7.            return name;
  8.        },
  9.        setName : function(newName){
  10.            name = newName;
  11.        }
  12.     }
  13. }();
  15. print(person.name);//直接访问，结果为undefined  
  16. print(person.getName());
  17. person.setName(“abruzzi”);
  18. print(person.getName());
  20. 得到结果如下：
  22. undefined
  23. default
  24. abruzzi

 

4 闭包的另一个重要用途是实现面向对象中的对象，传统的对象语言都提供类的模板机制，
这样不同的对象(类的实例)拥有独立的成员及状态，互不干涉。虽然JavaScript中没有类这样的机制，但是通过使用闭包，
我们可以模拟出这样的机制。还是以上边的例子来讲：

[javascript] view plaincopyprint?

  1. function Person(){
  2.     var name = “default”;
  4.     return {
  5.        getName : function(){
  6.            return name;
  7.        },
  8.        setName : function(newName){
  9.            name = newName;
  10.        }
  11.     }
  12. };
  15. var john = Person();
  16. print(john.getName());
  17. john.setName(“john”);
  18. print(john.getName());
  20. var jack = Person();
  21. print(jack.getName());
  22. jack.setName(“jack”);
  23. print(jack.getName());
  25. 运行结果如下：
  27. default
  28. john
  29. default
  30. jack

由此代码可知，john和jack都可以称为是Person这个类的实例，因为这两个实例对name这个成员的访问是独立的，互不影响的。

转载请注明：学时网 » 前端开发必须知道的JS（二） 闭包及应用

喜欢 (0)or分享 (0)

相似文章

您必须 登录 才能发表评论！