理解闭包

欢迎移步我的博客阅读:《理解闭包》

闭包 是指可以包含自由(未绑定到特定对象)变量的代码块;这些变量不是在这个代码块内或者任何全局上下文中定义的,而是在定义代码块的环境中定义(局部变量)。“闭包” 一词来源于以下两者的结合:要执行的代码块(由于自由变量被包含在代码块中,这些自由变量以及它们引用的对象没有被释放)和为自由变量提供绑定的计算环境(作用域)。

作用域

闭包的一个重点在于作用域,在 JavaScript 中变量的作用域分两种:全局变量与局部变量,首先让我们来了解一下:

var _global = 1;  // 全局变量

function print() {
  var _internal = 2;  // 局部变量

  console.log(_global); // 1
  console.log(_internal); // 2
  return _internal;
}

print();
console.log(_global); // 1
console.log(_internal); // ReferenceError: _internal is not defined

此时我们可以看到,在函数内部是可以直接读取全局变量的。但当我们在外部想访问内部变量时,就会报错,因为在函数体外部时无法访问函数内部的变量的。

需要注意的是,当在函数内部定义变量时没用使用 var 等声明变量,那么它实际上会成为一个全局变量

function print() {
  _internal = 2;
}

console.log(_internal); // 2

从内存中解释,变量的声明都存在栈中,而在 JavaScript 中存在垃圾回收机制(garbage collection),当一个函数执行完返回之后,它的内存会被自动回收,此时函数内部的变量都会被销毁。

那么我们有什么方法可以保存这一内存,并且在外部访问函数内部的变量呢 —— 闭包

闭包

在正常情况下,我们在外部时无法修改函数内部变量的值:

// 场景 1
function print(x) {
  var _internal = 1;

  console.log(_internal + 1);
}

print(1); // 2
// ...
print(1); // 2

我们可以看到,无论 print() 调用多少次,打印的值都是 2_internal 的值都是 1

这是因为 JavaScript 中的垃圾回收机制,在多次调用 print() 时,每一次都需要回收前一次的内存,之后再次申请新内存,因此 _internal 无法在内存中继续保存。

换而言之,在每次调用 print() 时都需要为其和内部的变量申请新的内存空间,第一次 _internal 的内存地址可能为 0x...1,在函数调用完成之后,这块内存将被释放,再次调用时 _internal 的内存地址可能就是 0x...2 了。因此它无法再内存中被保存下来。

那么我们需要在外部使用函数内部的变量时,就需要在函数内部再声明一个函数,并将其返回:

function print() {
  var _internal = 1;

  return function log() {
    console.log(_internal);
  }
}

var test = print();
test(); // 1

此时,我们已经可以从外部访问 print() 函数内部的变量了。

当我们需要对 print() 函数内部的 _internal 的值进行修改时,我们可以给它另外一个函数:

// 场景 2
var add;
function print() {
  var _internal = 1;

  add = function(x) {
    _internal += x;
  }

  return function log() {
    console.log(_internal);
  }
}

var test = print();
test(); // 1
add(1);
test(); // 2

经过上述可以看出,函数 print() 在经过 add() 运行之后,_internal 的值分别为 12,这就说明了 _internal 始终保存在内存中,并没有在 var test = print(); 调用时被回收。

这是因为 print() 内的 log() 作为返回值,被赋给 test 这个全局变量,因此 log() 始终在内存中。而 log() 依赖 print() 并且可以访问 _internal,所以 print() 也始终在内存中,而且在 var test = print(); 调用时没有被回收。

换而言之,当 _internal 在声明的时候分配了内存,我们可以将其内存地址表示为 0x...1,在 print() 函数被调用之后应该会被回收,但是由于上述原因,没有被回收,它的值将继续保留在地址为 0x...1 中。在外部可以使用指针去寻址,并取得其值。

其他例子

在循环体中,我们可能遇到:

function loopA() {
  var arr = [];

  for(var i = 0; i < 10; i++) {
    arr[i] = function() {
      return i;
    }
  }

  return arr;
}

var test = loopA();
test[0]();  // 10
test[1]();  // 10
// ...
test[9]();  // 10

在上述例子中,我们需要他们执行不同的参数得到不同的值。但是一共创建了 10 次匿名函数,,他们都是共享同一个环境的。在匿名函数执行之前,循环早已完成,此时的匿名函数一局指向循环体中的最后一个值了。

  • 解决方案 1:
    es6 中我们可以使用 let 声明:

    function loopA() {
      var arr = [];
    
      for(let i = 0; i < 10; i++) {
        arr[i] = function() {
          return i;
        }
      }
    
      return arr;
    }
    
    var test = loopA();
    test[0]();  // 0
    test[1]();  // 1
    // ...
    test[9]();  // 9
    
  • 解决方案 2:
    将函数声明放在循环体外部:

    function loopA() {
      var arr = [];
      var func = function(n) {
        return n;
      }
    
      for(var i = 0; i < 10; i++) {
        arr[i] = func(i)
      }
    
      return arr;
    }
    
    var test = loopA();
    test[0];  // 0
    test[1];  // 1
    test[9];  // 9
    
  • 解决方案 3:

    function loopA() {
      var arr = [];
    
      for(var i = 0; i < 10; i++) {
        arr[i] = (function(i) {
          return i;
        })(i)
      }
    
      return arr;
    }
    
    var test = loopA();
    test[0];  // 0
    test[1];  // 1
    test[9];  // 9
    
  • 其他解决方案请看参考

弊端

  • 内存泄漏:由于闭包会使得函数内部的变量都被保存在内存中,不会被销毁,内存消耗很大。因此需要在退出函数之前,将不使用的变量都删除。
  • 会修改函数内部变量的值。

总结

闭包是一种特殊的对象。它由两部分构成:函数,以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。
如果不是因为某些特殊任务而需要闭包,在没有必要的情况下,在其它函数中创建函数是不明智的,因为闭包对脚本性能具有负面影响,包括处理速度和内存消耗。

参考

百度百科 - 闭包
<a href="https://en.wikipedia.org/wiki/Closure_(computer_programming)">Wikipedia - Closure</a>
学习 Javascript 闭包(Closure)
MDN - 闭包
深入理解闭包系列第二篇——从执行环境角度看闭包
深入理解闭包系列第四篇——常见的一个循环和闭包的错误详解
深入理解javascript原型和闭包(15)——闭包

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,117评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,328评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,839评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,007评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,384评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,629评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,880评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,593评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,313评论 1 243
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,392评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,052评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2 270

推荐阅读更多精彩内容