JavaScript深入理解-闭包（Closure）

推荐文章：
学习Javascript闭包（Closure）- 阮一峰
javascript深入理解-从作用域链理解闭包

1、概念

阮老师对闭包的理解总结为：闭包就是能够读取其他函数内部变量的函数。
本质上闭包就是将函数内部和函数外部连接起来的一座桥。

个人理解为：首先它是一个函数，其次可以获取其他函数作用域内的变量（定义在一个函数内部的函数）

// closure就是一个闭包函数
function func() {
    var scope = 'local scope';
    function closure() {
        return scope;
    }
    return closure;
}
var result = func();
result()       // 'local scope'

2、变量的作用域

理解闭包之前需要理解JavaScript的变量作用域。
变量作用域分为两种：全局作用域（global scope） 和 局部作用域（local scope） （PS：ES5新增了块级作用域）

局部作用域（函数作用域）可以访问全局作用域内的变量。

var num = 999;
function func() {
    alert(num);
}
func();      // 999

而全局作用域无法访问局部作用域内的变量

function foo() {
    var str = 'local scope';
}
alert(str);    // error

这里有一个地方需要注意，函数内部声明变量的时候，一定要使用 var 命令。如果不用的话，你实际上声明了一个全局变量！挂载在 window 对象下，污染全局空间并影响性能。

如果我们需要在全局作用域内获取函数作用域内的变量，正常情况下是无法获取到的，此时就需要用到闭包函数了。
函数的内部，再定义一个函数。

function foo() {
    var str = 'local scope';
    function f1() {
        return str;
    }
    return f1;
}
var result = foo();
result();          // 'local scope'

在以上代码中，函数 f1 被包裹在 foo 中，此时 foo 中所有的变量对 f1 而言都是可以获取到的，但是反过来就不行， foo 获取不到 f1 内的变量。
这就是JavaScript语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以父对象的所有变量，对子对象都是可见的，反之则不成立。

3、闭包的作用

闭包的作用有很多，最大的作用为两个：

  1. 前文提到的可以读取函数内部的变量。
  2. 让这些变量始终保存在内存中（妥善使用内存消耗很大，在IE中可能导致内存泄）。

直接引用阮老师的示例

function f1(){
    var n=999;

    nAdd = function() { n += 1; }

    function f2(){
        alert(n);
    }

    return f2;
}

var result = f1();

result();     // 999

nAdd();

result();     // 1000

在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。

为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。

这段代码中另一个值得注意的地方，就是"nAdd=function(){n+=1}"这一行，首先在nAdd前面没有使用var关键字，因此nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。

使用闭包的注意点

1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

4、深入理解

    var data = [];

    for (var i = 0; i < 3; i++) {
        data[i] = function () {
            console.log(i);
        };
    }

    data[0]();        // 3
    data[1]();        // 3
    data[2]();        // 3

因为 for 循环不会创建执行上下文也就没有活动对象AO所以可以将以上代码拆解为：

  var data = [];
  var i = 0;
  { 
    data[0] = function () { console.log(i); }
  }
  var i = 1;
  {
    data[1] = function () { console.log(i); }
  }
  var i = 2;
  {
    data[2] = function () { console.log(i); }
  }
  var i = 3;

  data[0]()      // 3

JavaScript 只会读取当前作用域下最后一个 i 的值，所以 data[0]() 也会打印 3。

但是如果将 var 改为 let 则 for 循环中的每个循环都是一个独立的块级作用域，代码拆解为：

  var data = []
  {
    let i = 0;
    data[0] = function () { console.log(i); }
  }
  {
    let i = 1;
    data[1] = function () { console.log(i); }
  }
  {
    let i = 2;
    data[2] = function () { console.log(i); }
  }

使用立即执行函数：

    var data = [];

    for (var i = 0; i < 3; i++) {
        (function (x) {
            data[i] = function () {
                console.log(x);
            };
        })(i)
    }

    data[0]();        // 0
    data[1]();        // 1
    data[2]();        // 2

同理讲以上代码拆解为：

  var data = [];
  var i = 0;
  (function (x) {
      data[0] = function () { console.log(x); }
  })(0);

  var i = 1;
  (function (x) {
      data[1] = function () { console.log(x); }
  })(1);

  var i = 2;
  (function (x) {
      data[2] = function () { console.log(x); }
  })(2);

  var i = 3;

  data[0]()    // 0

请理解 Js 执行 函数方法时，变量访问的作用域为函数创建时的作用域，而非执行时的。
this指针则相反，指向的是函数执行时，而非创建时的，请理解一下代码

　　var name = "The Window";

　　var object = {
　　　　name : "My Object",

　　　　getNameFunc : function(){
　　　　　　return function(){
　　　　　　　　return this.name;
　　　　　　};

　　　　}

　　};

　　object.getNameFunc()();    // 'The Window'

　　var name = "The Window";

　　var object = {
　　　　name : "My Object",

　　　　getNameFunc : function(){
　　　　　　var that = this;
　　　　　　return function(){
　　　　　　　　return that.name;
　　　　　　};

　　　　}

　　};

　　object.getNameFunc()();    // My Object
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,922评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,591评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,546评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,467评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,553评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,580评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,588评论 3赞 414
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,334评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,780评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,092评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,270评论 1赞 344
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,925评论 5赞 338
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,573评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,194评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,437评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,154评论 2赞 366
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,127评论 2赞 352