资讯专栏INFORMATION COLUMN

对javascript中闭包的理解

Enlightenment / 2140人阅读

摘要:在前端开发中闭包是一个很重要的知识点,是面试中一定会被问到的内容。闭包的用途闭包可以用在许多地方。这里仅仅是我对闭包的一些见解,若有错误的地方,还望大家提出,一起交流共同进步参考文献你不知道的上卷深入理解系列

在前端开发中闭包是一个很重要的知识点,是面试中一定会被问到的内容。之前我对闭包的理解主要是"通过闭包可以在函数外部能访问到函数内部的变量",对闭包运用的也很少,甚至自己写过闭包自己都不太清楚,只知道这样写可以解决问题。最近在梳理自己的js知识点,发现自己对js闭包理解的很不透彻,于是想全面的分析一下闭包,特别是闭包的形成原因和闭包的使用场景。

闭包的定义

闭包是指有权访问另一个函数作用域中的变量的函数 --《JavaScript高级程序设计》

函数对象可以通过作用域关联起来,函数体内的变量都可以保存在函数作用域内,这在计算机科学文献中称为“闭包”,所有的javascirpt函数都是闭包 --《Javascript权威指南》

看完这些专业的定义是不是感觉一头雾水,没关系,我和一样也没明白这些定义说的是啥,咱接着往下分析。

在认识闭包原理之前我们先必须对作用域、执行上下文、执行上下文堆栈、变量对象、活动对象、作用域链有着全面的认识

作用域 Scope

作用域是一套规则,用于确定在何处以及如何查找变量(标识符)
作用域共有两种主要的工作模型:

词法作用域:作用域是在编写代码的时候确定的

动态作用域:作用域是在代码运行的时候确定的

我们知道javascript使用的是词法作用域

执行上下文 Execution Contexts

Javascript中代码的执行上下文分为以下三种:

全局级别的代码 – 这个是默认的代码运行环境,一旦代码被载入,引擎最先进入的就是这个环境。

函数级别的代码 – 当执行一个函数时,运行函数体中的代码。

Eval的代码 – 在Eval函数内运行的代码。

一个执行的上下文可以抽象的理解为一个对象。每一个执行的上下文都有一系列的属性(变量对象(variable object),this指针(this value),作用域链(scope chain) )

Execution Contexts = {
    variable object:变量对象;
    this value: this指针;
    scope chain:作用域链;
}
执行上下文堆栈 Execution Contexts Stack

活动的执行上下文组在逻辑上组成一个堆栈。堆栈底部永远都是全局上下文(globalContext),而顶部就是当前(活动的)执行上下文。

当add函数被调用时,add函数执行上下文被压入执行上下文堆栈的顶端,此时执行上下文堆栈可表示为:

EC Stack = [
   functionContext
  globalContext
];

add函数执行完毕后,其执行上下文将会从执行上下文堆栈顶端弹出并被销毁。全局执行上下文只有在浏览器关闭时才会从执行上下文堆栈中销毁

变量对象 Variable Object

如果变量与执行上下文相关,那变量自己应该知道它的数据存储在哪里,并且知道如何访问。这种机制称为变量对象(variable object)。
可以说变量对象是与执行上下文相关的数据作用域(scope of data) 。它是与执行上下文关联的特殊对象,用于存储被定义在执行上下文中的变量(variables)、函数声明(function declarations) 。
当进入全局上下文时,全局上下文的变量对象可表示为:

VO = {
    add: ,
    sum: undefined,
    Math: <...>,
    String: <...>
    ...
    window: global //引用自身
}
活动对象 Activation Object

当函数被调用者激活时,这个特殊的活动对象(activation object) 就被创建了。它包含普通参数(formal parameters) 与特殊参数(arguments)对象(具有索引属性的参数映射表)。活动对象在函数上下文中作为变量对象使用。
当add函数被调用时,add函数执行上下文被压入执行上下文堆栈的顶端,add函数执行上下文中活动对象可表示为

AO = {
    num: 4,
    sum :5,
    arguments:{0:4}
}
作用域链 Scope Chain

函数上下文的作用域链在函数调用时创建的,包含活动对象AO和这个函数内部的[[scope]]属性。

var x = 10;
function foo() {
  var y = 20;
  function bar() {
    var z = 30;
    alert(x +  y + z);
  }
  bar();
}
foo(); 

在这段代码中我们看到变量"y"在函数"foo"中定义(意味着它在foo上下文的AO中)"z"在函数"bar"中定义,但是变量"x"并未在"bar"上下文中定义,相应地,它也不会添加到"bar"的AO中。乍一看,变量"x"相对于函数"bar"根本就不存在;
函数"bar"如何访问到变量"x"?理论上函数应该能访问一个更高一层上下文的变量对象。实际上它正是这样,这种机制是通过函数内部的[[scope]]属性来实现的。
[[scope]]是所有父级变量对象的层级链,处于当前函数上下文之上,在函数创建时存于其中。

注意: [[scope]]在函数创建时被存储是静态的(不变的),直至函数销毁。即:函数可以永不调用,但[[scope]]属性已经写入,并存储在函数对象中。
在这里我们逐步分析下
全局上下文的变量对象是:

globalContext.VO === Global = {
  x: 10
  foo: 
};

在"foo"创建时,"foo"的[[scope]]属性是:

foo.[[Scope]] = [
  globalContext.VO
];

在"foo"激活时(进入上下文),"foo"上下文的活动对象是:

fooContext.AO = {
  y: 20,
  bar: 
};

"foo"上下文的作用域链为:

fooContext.Scope = [
  fooContext.AO,
  globalContext.VO
];

内部函数"bar"创建时,其[[scope]]为:

bar.[[Scope]] = [
  fooContext.AO,
  globalContext.VO
];

在"bar"激活时,"bar"上下文的活动对象为:

barContext.AO = {
  z: 30
};

"bar"上下文的作用域链为:

bar.Scope= [
  barContext.AO,
  fooContext.AO,
  globalContext.VO
];

介绍了一大堆内容,是不是有点晕忽忽的?坚持一下,下面是重点

闭包的原理

我们通过一个闭包的例子来分析一下闭包的形成原理

function add(){
    var sum =5;
    var func = function () {
        console.log(sum);
    }
    return func;
}
var addFunc = add();
addFunc(); //5

js执行流进入全局执行上下文环境时,全局执行上下文可表示为:

globalContext = {
    VO: {
        add: ,
        addFunc: undefined
    },
    this: window,
    scope chain: window 
}

当add函数被调用时,add函数执行上下文可表示为:

addContext = {
    AO: {
        sum: undefined //代码进入执行阶段时此处被赋值为5
        func: undefined //代码进入执行阶段时此处被赋值为function (){console.log(sum);}
    },
    this: window,
    scope chain: addContext.AO + globalContext.VO 
}

add函数执行完毕后,js执行流回到全局上下文环境中,将add函数的返回值赋值给addFunc。

由于addFunc仍保存着func函数的引用,所以add函数执行上下文从执行上下文堆栈顶端弹出后并未被销毁而是保存在内存中。

当addFunc()执行时,func函数被调用,此时func函数执行上下文可表示为:

funcContext = {
    this: window,
    scope chain: addContext.AO + globalContext.VO 
}

当要访问变量sum时,func的活动对象中未能找到,则会沿着作用域链查找,由于js遵循词法作用域,作用域在函数创建阶段就被确定,在add函数的活动对象中找到sum = 5;

介绍到这里你明白形成闭包的原因了吗?
Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内。而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包。

闭包的用途

闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。

1. 保护变量的安全实现JS私有属性和私有方法

利用闭包可以读取函数内部的变量,变量在函数外部不能直接读取到,从而达到保护变量安全的作用。因为私有方法在函数内部都能被访问到,从而实现了私有属性和方法的共享。
常见的模块模式就是利用闭包的这种特性建立的

var Counter = (function() {
  //私有属性
  var privateCounter = 0; 
  //私有方法
  function changeBy(val) { 
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  }   
})();
console.log(privateCounter); //privateCounter is not defined 
console.log(Counter.value()); // 0
Counter.increment();
Counter.increment();
console.log(Counter.value()); // 2
Counter.decrement();
console.log(Counter.value()); // 1

在jQuery框架的私有方法和变量也是这么设计的

var $ = jQuery = function(){
    return jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
    init:function(){
        return this;  //this指向jQuery.prototype
    },
    length: 1,
    size: function(){
        return this.length;
    }
}
console.log($().size()); // 1
2. 将处理结果缓存
var CachedSearchBox = (function(){    
    var cache = {},count = [];    
    return {    
       attachSearchBox : function(dsid){    
           if(dsid in cache){//如果结果在缓存中    
              return cache[dsid];//直接返回缓存中的对象    
           }    
           var fsb = new uikit.webctrl.SearchBox(dsid);//新建    
           cache[dsid] = fsb;//更新缓存    
           if(count.length > 100){//保正缓存的大小<=100    
              delete cache[count.shift()];    
           }    
           return fsb;          
       }
    };    
})();    
     
CachedSearchBox.attachSearchBox("input");  

这样我们在第二次调用的时候,就会从缓存中读取到该对象。

理解了闭包的原理我们发现闭包的这些用途都是利用了闭包保存了当前函数的活动对象的特点,这样闭包函数在作用域之外被调用时依然能够访问其创建时的作用域

闭包的缺点

闭包将函数的活动对象维持在内存中,过度使用闭包会导致内存占用过多,所以在使用完后需要将保存在内存中的活动对象解除引用;

闭包只能取得外部函数中任何变量的最后一个值,在使用循环且返回的函数中带有循环变量时会得到错误结果;

当返回的函数为匿名函数时,注意匿名函数中的this指的是window对象。

这里仅仅是我对闭包的一些见解,若有错误的地方,还望大家提出,一起交流共同进步!
参考文献

《你不知道的JavaScript》上卷

深入理解JavaScript系列

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/83917.html

相关文章

  • JavaScript闭包,只学这篇就够了

    摘要:当在中调用匿名函数时,它们用的都是同一个闭包,而且在这个闭包中使用了和的当前值的值为因为循环已经结束,的值为。最好将闭包当作是一个函数的入口创建的,而局部变量是被添加进这个闭包的。 闭包不是魔法 这篇文章使用一些简单的代码例子来解释JavaScript闭包的概念,即使新手也可以轻松参透闭包的含义。 其实只要理解了核心概念,闭包并不是那么的难于理解。但是,网上充斥了太多学术性的文章,对于...

    CoderBear 评论0 收藏0
  • JavaScript闭包

    摘要:闭包引起的内存泄漏总结从理论的角度将由于作用域链的特性中所有函数都是闭包但是从应用的角度来说只有当函数以返回值返回或者当函数以参数形式使用或者当函数中自由变量在函数外被引用时才能成为明确意义上的闭包。 文章同步到github js的闭包概念几乎是任何面试官都会问的问题,最近把闭包这块的概念梳理了一下,记录成以下文章。 什么是闭包 我先列出一些官方及经典书籍等书中给出的概念,这些概念虽然...

    HmyBmny 评论0 收藏0
  • Javascript闭包入门(译文)

    摘要:也许最好的理解是闭包总是在进入某个函数的时候被创建,而局部变量是被加入到这个闭包中。在函数内部的函数的内部声明函数是可以的可以获得不止一个层级的闭包。 前言 总括 :这篇文章使用有效的javascript代码向程序员们解释了闭包,大牛和功能型程序员请自行忽略。 译者 :文章写在2006年,可直到翻译的21小时之前作者还在完善这篇文章,在Stackoverflow的How do Java...

    Fourierr 评论0 收藏0
  • 简单理解JavaScript闭包

    摘要:闭包在我理解是一种比较抽象的东西。所以我写了一篇博文来方便自己理解闭包。那么现在我们可以解释一下闭包的第一个定义在计算机科学中,闭包是引用了自由变量的函数。循环中创建闭包在我们使用的关键字之前,闭包的一个常见问题就出现在循环中创建闭包。 零. 前言 从我开始接触前端时就听说过闭包,但是一直不理解闭包究竟是什么。上网看了各种博客,大家对闭包的说法不一。闭包在我理解是一种比较抽象的东西。所...

    sihai 评论0 收藏0
  • 理解Javascript闭包

    摘要:但是闭包也不是什么复杂到不可理解的东西,简而言之,闭包就是闭包就是函数的局部变量集合,只是这些局部变量在函数返回后会继续存在。可惜的是,并没有提供相关的成员和方法来访问闭包中的局部变量。 (收藏自 技术狂) 前言:还是一篇入门文章。Javascript中有几个非常重要的语言特性——对象、原型继承、闭包。其中闭包 对于那些使用传统静态语言C/C++的程序员来说是一个新的语言特性。本文将...

    dayday_up 评论0 收藏0
  • 面试官问我:什么是JavaScript闭包,我该如何回答

    摘要:到底什么是闭包这个问题在面试是时候经常都会被问,很多小白一听就懵逼了,不知道如何回答好。上面这么说闭包是一种特殊的对象。闭包的注意事项通常,函数的作用域及其所有变量都会在函数执行结束后被销毁。从而使用闭包模块化代码,减少全局变量的污染。 闭包,有人说它是一种设计理念,有人说所有的函数都是闭包。到底什么是闭包?这个问题在面试是时候经常都会被问,很多小白一听就懵逼了,不知道如何回答好。这个...

    BenCHou 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<