JavaScript闭包详解

在上一篇文章我们对预解释作了概述，在写这篇博文前打算写几个经典案例，考虑到那些案例综合性比较强，也就循序渐进的有了这篇博文，这样对于学习和深入JavaScript也更加容易入手。

序

一同事去面试，面试官问了一道题：你写一个闭包我看下？于是同事火速写出如下代码：

代码如下:

function fn(){
    alert('Hello JavaScript Closure!!!');//妈蛋，E文本来就不好，找翻译才把闭包单词写出来
}
fn();

然后面试官摇摇头说道：“这怎么能叫闭包呢？”，最终两人争执不下，同事果断走人，面试官什么玩意儿？（本故事纯属虚构，如有雷同纯属巧合）

闭包可能在很多人眼中都是“高大不好上”的技术，可能在很多人眼中只有这样才算得上闭包：

示例1：

代码如下:

function fn() {
    return function () {
        alert('示例1');
    }
}
fn()();

示例1 PS：这个看起来不怎么高级，看样子这人水平不咋地哦！

示例2：

代码如下:

;(function () {
    alert('示例2');
})();

示例2 PS：这个看起来比上一个要高级，而且第一个括号前还加了一个分号，为何加一个分号，好吧我们先把这个疑问留这儿，后面会讲到。

示例3：

代码如下:

~function fn() {
    alert('示例3')
}();

示例3 PS：这个最高级了，简直吊炸天，我读书少，你们别骗我！

撸主读书不多，仅能写出这三种“闭包”，相信博友们能写出更多更优秀的“闭包”；到此请先暂停我的瞎掰，接下来研究下函数运行的机制，貌似有人已经知道了，肯定是作用域，我真的很不想在标题上再加上这个作用域，这样总感觉差点儿意思，这个几个东西本来都是一起的，为何要重复呢？老习惯，先上代码：

代码如下:

var n = 10;
function fn(){
    alert(n);
    var n = 9;
    alert(n);
}
fn();

好简单的说，我们画图（撸主只会用Windows自带的画图软件，若有更好的请博友推荐）来分析下：

分析1

从图中我们看到了两个作用域，一个是window作用域（顶级作用域），一个是fn调用的时候形成的一个私有作用域；那什么是作用域，作用域其实就是代码执行的环境。举个栗子，一个学生他的学习环境是学校，相当于他的作用域是学校，假如这个学生很调皮，晚上经常FanQiang去网吧打游戏，相当于形成了一个私有环境，这个作用域就是网吧。好吧！这个栗子太TM像撸主本人了，不由感叹一句：“少壮不努力，长大干挨踢”。还是回到正题，其实函数fn的定义就是指向一段代码的描述（图中红框），当这个fn调用（图中的绿框）的时候，就会形成一个作用域，当然这个作用域中的代码执行前也会预解释，我是不会告诉你这个作用域是当它执行完毕后会被销毁，这个fn再次调用也会形成一个新的作用域，然后执行前预解释，然后代码执行，最后执行完毕销毁。

理解闭包

我们知道函数被调用在执行的时候会形成一个私有作用域（执行环境），这个私有作用域就是闭包。回头再看看闭包还是传说中的“高大不好上”吗？我们再回头看看第一个面试故事，还有我写的三个示例，它们其实都是闭包，确切的说那三个示例都是闭包的常用形式。

应用场景

现在有这样一个需求：HTML页面中有一个ul标签，ul下面有5个li标签，要求任意点击一个li，弹出被点击的这个li所在的索引（索引从0开始）位置，HTML结构如下：

代码如下:

<ul id="ul">
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表5</li>
</ul>

机智的我火速写出如下代码：

代码如下:

var lis = document.getElementById('ul').getElementsByTagName('li');
for (var i = 0, len = lis.length; i < len; i++) {
    lis[i].onclick = function () {
        alert(i);
    };
}

最终测试，看是否完美实现这个需求：

发现无论点击多少次，最终都弹出这个结果，而需求期望的结果是：点击列表1弹出0，点击列表2弹出1，点击列表3弹出2……此时此刻只想用这幅图来形容现在的心情：

（当原型在演示时没能按设计的要求运行时的样子）

这可如何才好，为何总是弹出5呢？理论上很正确呀！我们不妨画图来分析下：

其实我们只是给每一个li的onclick其实就是保存的一段函数的描述字符串，这个字符串内容就是上图红框中的内容，如果您还是不信，我有图有真相：

在Chrome控制台下输入：lis[4].onclick，其值就是函数的描述。当我们在点击第5个列表时，其实就是相当于lis[4].onclick()，调用了这段函数描述，我们知道函数在被调用执行的时会形成一个私有作用域，在这个私有作用域下也是先预解释，然后代码执行，此时会去找i，在当前私有作用域下没有i，然后去window作用域下找到了i，因此每次点击都弹出5。

显然上面的代码无法满足这个需求，我们代码那么写是不正确的，我们思考一下出现问题的原因是什么？其实原因就是每次点击的时候都是读取的window下的i，此时这个i的值已经是5了，于是有了如下代码：

方式一：

代码如下:

var lis = document.getElementById('ul').getElementsByTagName('li');
function fn(i) {
    return function () {
        alert(i);
    }
}
for (var i = 0, len = lis.length; i < len; i++) {
    lis[i].onclick = fn(i);
}

方式二：

代码如下:

var lis = document.getElementById('ul').getElementsByTagName('li');
 
for (var i = 0, len = lis.length; i < len; i++) {
    ;(function (i) {
        lis[i].onclick = function () {
            alert(i);
        };
    })(i);
}

方式三：

代码如下:

var lis = document.getElementById('ul').getElementsByTagName('li');
 
for (var i = 0, len = lis.length; i < len; i++) {
    lis[i].onclick = function fn(i) {
        return function () {
            alert(i);
        }
    }(i);
}

一口气写了三种方式，其思想都是一样的，就是将这个变量i用一个私有变量存储起来，这里我就只讲方式二，当然明白其中一个其余也就都明白了。按照惯例，我们画图来一步步分析下：

我详细的对整个代码执行做了描述，需要注意的是：每个li的onclick属性都要占用(function(i){ … })(i)作用域，当这个函数执行完毕后不会被销毁，因为它被外面的li（这个li是window作用域下的）占用着，因此这个作用域不会被销毁。当点击任意一个li时，function(){ alert(i); }会被执行，也会形成一个作用域，这个作用域没有i，它会去(function(){ … })(i)作用域找i，最终在形参找到i，这个形参i的值就是for循环时传进去的；这个例子巧妙地使用闭包来贮存值，完美解决问题。

PS：刚刚说(function(i){ … })(i)为什么在前面加一个分号，其原因就是防止前面的语句忘记加分号，这样导致JavaScript在解析时出错，仅此而已。当然上面的一个应用场景就是Tabs实现原理，可以有其他实现方式，比如自定义属性方式、通过DOM节点关系找到索引，而撸主采用这样一种方式只是为了加深对闭包的理解。

总结

闭包并不是传说中的高大不好上，其核心就是理解函数定义、调用，函数调用时会形成一个新的私有作用域，当某个作用域被外面占用，那么这个作用域将不会被销毁。撸主读书甚少，有说得不对的地方请博友们指正，同时也感谢大家对撸主文章的支持。

赞 (0)

相关推荐

  • JavaScript 匿名函数和闭包介绍

    匿名函数:没有名字的函数; 闭包:可访问一个函数作用域里的变量的函数; 一 匿名函数 // 普通函数 function box(){ // 函数名是box; return 'Lee'; } box(); // =>Lee; 调用函数; // 匿名函数 function(){ // 匿名函数,会报错; return 'Lee'; } // 通过表达式自我执行 (function(name){ console.log(name); // =>Lee; })("Lee"); //

  • JavaScript创建闭包的两种方式的优劣与区别分析

    通常JavaScript创建闭包比较常用的有两种方式. 构造函数方式: new function() { var 变量... } 内联执行方式: (function() { var 变量... })(); 在JavaScript内部运行机制下他们有什么区别?用哪种方式创建比较好?它与其它方式创建的闭包相比有什么优势? 我是这样理解的: 区别: 第一个:子方法可以共享变量 第二个:内部子方法共享变量 比较: 我认为内联的比较好: 优势: 一般内联的创建是按需索要内存,因为只是局部执行的变量在内存里

  • 浅谈javascript中的闭包

    很长一段时间不理解闭包,后来了解了作用域,以及this相关问题才理解了闭包相关知识. 闭包(closure),也是面试题常客.简单点来说就是函数嵌套函数. 函数作为返回值: function foo () { var a = 1; return function () { a++; console.log(a); } } var aaa = foo(); aaa(); //2 aaa(); //3 其实这个代码不难理解,aaa是指向foo()返回的一个新函数,但是在这个函数里面引用了a变量,所以

  • 浅谈JavaScript中的作用域和闭包问题

    JavaScript的作用域以函数为界,不同的函数拥有相对独立的作用域.函数内部可以声明和访问全局变量,也可以声明局部变量(使用var关键字,函数的参数也是局部变量),但函数外部无法访问内部的局部变量: function test() { var a = 0; // 局部变量 b = 1; // 全局变量 } a = ?, b = ? // a为undefined,b为1 同名的局部变量会覆盖全局变量,但本质上它们是两个独立的变量,一方发生变化不会影响另一方: a = 5; // 函数外a的值为

  • javascript实现的闭包简单实例

    本文实例讲述了javascript实现的闭包.分享给大家供大家参考.具体如下: var name = "The Window"; var obj = { name: "My Object", getNameFunc: function() { return function() { return this.name; }; } }; console.log( obj.getNameFunc()() ); var name = "The Window&quo

  • Javascript闭包（Closure）详解

    下面就是我的学习笔记,对于Javascript初学者应该是很有用的. 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. function f1(){ var n=999; } alert(n)

  • javascript闭包的理解

    1.首先我们要知道变量作用域链 变量的作用域分两种:全局变量和局部变量.没有定义到任何函数中的变量为全局变量,在函数中定义的变量为局部变量,注意在函数内部定义变量时一定要使用var关键字,不带var关键字的变量为全局变量. javascript中每一段代码都有与之关联的作用域链,这个作用域链是一个对象列表或者链表,定义了这段代码"作用域"中的变量.顶层代码的作用域由全局变量组成:不包含嵌套的函数的作用域链有两个对象:一个是定义的函数参数和局部变量的对象,一个是全局变量对象:而嵌套函数的

  • javascript 闭包详解

    看了一下网上闭包的概念及文章,对于这个问题,自己做一个梳理吧. 问:闭包是什么? 答:闭包是指在 JavaScript 中,内部函数总是可以访问其所在的外部函数中声明的参数和变量,即使在其外部函数被返回(寿命终结)了之后. 这个是我自身第一次碰到闭包的问题 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>闭包循环问题</title> <

  • javascript 闭包详解及简单实例应用

    JS 闭包详解及实例: 最近学习JS的基础知识,学习了闭包的知识点,有很多疑惑,这一段时间还是一直有在看闭包的相关知识理解就更深入了一点,下面说说我的理解. function fn(){ var a = 0; return function (){ return ++a; } } 如上所示,上面第一个return返回的就是一个闭包,那么本质上说闭包就是一个函数.那么返回这个函数有什么用呢? 那是因为这个函数可以调用到它外部的a这个变量.其实也就是说,return返回的是这个函数 + a这个变量

  • Javascript 闭包详解及实例代码

    Javascript 闭包 闭包,是 Javascript 比较重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述,直接上干货,让你分分钟学会闭包! 1 闭包,一睹为快 在接触一个新技术的时候,我首先会做的一件事就是找它的 demo code.对于我们来说,看代码比自然语言更能理解一个事物的本质.其实,闭包无处不在,比如:jQuery.zepto的核心代码都包含在一个大的闭包中,所以

  • JavaScript闭包详解

    JavaScript闭包详解

    在上一篇文章我们对预解释作了概述,在写这篇博文前打算写几个经典案例,考虑到那些案例综合性比较强,也就循序渐进的有了这篇博文,这样对于学习和深入JavaScript也更加容易入手. 序 一同事去面试,面试官问了一道题:你写一个闭包我看下?于是同事火速写出如下代码: 复制代码 代码如下: function fn(){     alert('Hello JavaScript Closure!!!');//妈蛋,E文本来就不好,找翻译才把闭包单词写出来 } fn(); 然后面试官摇摇头说道:"这怎么能叫

  • JavaScript高级之闭包详解

    目录 1. 闭包的概念 知识点的补充: 2. 闭包的作用: 3. 闭包示例 3.1 点击li,输出当前li的索引号 总结 1. 闭包的概念 来看一般函数的执行和启发: function stop() { var num = 0; console.log(num); } stop(); // 打印出来num是0 console.log(num); // 报错 函数未定义 1. 此时,函数的外部无法访问函数内部的变量 2. 函数内部定义的变量不会一直存在,随着函数的运行结束而消失 闭包的概念: 1.

  • 在Node.js中使用Javascript Generators详解

    Generators是Javascript的一种协同程序( coroutine 简称:协程)风格,是指那些可以在执行时暂停然后又恢复的函数,该函数是在functi配以星号符号形式如function* ,函数内有些特征关键词如yield 和yield*. function* generatorFn () { console.log('look ma I was suspended') } var generator = generatorFn() // [1] setTimeout(functio

  • COM组件中调用JavaScript函数详解及实例

    COM组件中调用JavaScript函数详解及实例 要求是很简单的,即有COM组件A在IE中运行,使用JavaScript(JS)调用A的方法longCalc(),该方法是一个耗时的操作,要求通知IE当前的进度.这就要求使用回调函数,设其名称为scriptCallbackFunc.实现这个技术很简单: 1 .组件方(C++) 组件A 的方法在IDL中定义: [id(2)] HRESULT longCalc([in] DOUBLE v1, [in] DOUBLE v2, [in, optional

  • python中函数总结之装饰器闭包详解

    1.前言 函数也是一个对象,从而可以增加属性,使用句点来表示属性. 如果内部函数的定义包含了在外部函数中定义的对象的引用(外部对象可以是在外部函数之外),那么内部函数被称之为闭包. 2.装饰器 装饰器就是包装原来的函数,从而在不需要修改原来代码的基础之上,可以做更多的事情. 装饰器语法如下: @deco2 @deco1 def func(arg1,arg2...): pass 这个表示了有两个装饰器的函数,那么表示的含义为:func = deco2(deco1(func)) 无参装饰器语法如下:

  • JavaScript cookie详解及简单实例应用

    JavaScript cookie详解 一.cookie基本介绍 cookie是document的对象.cookie可以使得JavaScript代码能够在用户的硬盘上持久地存储数据,并且能够获得以这种方式存储的数据.cookie还可以用于客户端脚本化. cookie数据可以自动地在Web浏览器好Web服务器之间传递. 在浏览器中可以通过navigator.cookieEnabled属性检查浏览器的cookie功能是否被激活.     二.cookie的基本属性     每个cookie都有四个可

  • 基于Python函数的作用域规则和闭包(详解)

    作用域规则 命名空间是从名称到对象的映射,Python中主要是通过字典实现的,主要有以下几个命名空间: 内置命名空间,包含一些内置函数和内置异常的名称,在Python解释器启动时创建,一直保存到解释器退出.内置命名实际上存在于一个叫__builtins__的模块中,可以通过globals()['__builtins__'].__dict__查看其中的内置函数和内置异常. 全局命名空间,在读入函数所在的模块时创建,通常情况下,模块命名空间也会一直保存到解释器退出.可以通过内置函数globals()

随机推荐