理解闭包

用户83 发布于2019-08-20 17:18 / 2600人阅读

摘要：欢迎移步我的博客阅读理解闭包闭包是指可以包含自由未绑定到特定对象变量的代码块这些变量不是在这个代码块内或者任何全局上下文中定义的，而是在定义代码块的环境中定义局部变量。

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

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

作用域

闭包的一个重点在于作用域，在 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 的值分别为 1 和 2，这就说明了 _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

其他解决方案请看参考

弊端

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

会修改函数内部变量的值。

总结

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

参考

百度百科 - 闭包
Wikipedia - Closure
学习 Javascript 闭包（Closure）
MDN - 闭包
深入理解闭包系列第二篇——从执行环境角度看闭包
深入理解闭包系列第四篇——常见的一个循环和闭包的错误详解
深入理解javascript原型和闭包（15）——闭包

云服务器 GPU云服务器 js闭包的理解循环闭包闭包概念闭包实例

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

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

多层级理解闭包

摘要：第二梯队理解有了第一梯队的认识，我们慢慢修正大脑中对闭包的认识。理解这句话就可以很好的与闭包这两个字关联起来理解闭包这个概念了。总结第二梯队理解闭包是一个有特定功能的函数。第四梯队理解闭包通过访问外部变量，一个闭包可以维持这些变量。闭包闭包的概念困惑了我很久，记得当时我面试的时候最后一面有一个问题就是问题关于闭包的问题，然而到现在已经完全不记得当时的题目是啥了，但仍然能够回忆起当时...

nemo 2019-08-22 10:40 评论0 收藏0
理解 JavaScript 闭包

摘要：如何在初学就理解闭包你需要接着读下去。这样定义闭包是函数和声明该函数的词法环境的组合。小结闭包在中随处可见。闭包是中的精华部分，理解它需要具备一定的作用域执行栈的知识。这是本系列的第 4 篇文章。作为 JS 初学者，第一次接触闭包的概念是因为写出了类似下面的代码： for (var i = 0; i < helpText.length; i++) { var item = he...

宠来也 2019-08-23 14:07 评论0 收藏0
谈谈我所理解的闭包，js、php、golang里的closure

摘要：当初看这个解释有点懵逼，理解成闭包就是函数中的函数了。里的闭包最近不满足于只干前端的活，开始用起了。里的闭包最近在学习语言，让我们来看一下语言里的闭包。在中，闭包特指将函数作为值返回的情况，被返回的函数引用了生成它的母函数中的变量。本人开始接触编程是从js开始的，当时网上很多人说闭包是难点，各种地方对闭包的解释也是千奇百怪。如今开始接触js以外的各种编程语言，发现不光是js，php、...

betacat 2019-06-28 13:52 评论0 收藏0
谈谈我所理解的闭包，js、php、golang里的closure

摘要：当初看这个解释有点懵逼，理解成闭包就是函数中的函数了。里的闭包最近不满足于只干前端的活，开始用起了。里的闭包最近在学习语言，让我们来看一下语言里的闭包。在中，闭包特指将函数作为值返回的情况，被返回的函数引用了生成它的母函数中的变量。本人开始接触编程是从js开始的，当时网上很多人说闭包是难点，各种地方对闭包的解释也是千奇百怪。如今开始接触js以外的各种编程语言，发现不光是js，php、...

zhoutao 2019-08-21 16:43 评论0 收藏0
简单理解JavaScript中的闭包

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

sihai 2019-08-20 11:27 评论0 收藏0
理解Javascript的闭包

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

dayday_up 2019-08-21 12:37 评论0 收藏0