JavaScript 闭包指南

MobService 发布于2019-08-23 17:18 / 674人阅读

摘要：要使用闭包，需要在另一个函数中创建一个函数，这种函数被称为嵌套函数。只有名为闭包的功能才能对此进行访问。结论闭包是外部函数中的变量集合，它提供对内部函数作用域的访问以保护全局命名空间。

翻译：疯狂的技术宅
https://medium.freecodecamp.o...

本文首发微信公众号：前端先锋
欢迎关注，每天都给你推送新鲜的前端技术文章

闭包是函数创建时作用域内所有变量的集合。要使用闭包，需要在另一个函数中创建一个函数，这种函数被称为嵌套函数。内部函数可以访问外部函数作用域中的变量（依靠闭包可以访问外部函数作用域），即使在返回外部函数之后也是如此。每次创建嵌套函数时都会创建闭包。

在继续了解闭包之前，首先了解一下JavaScript中的作用域链。

通常，有两种类型的作用域：

全局作用域

局部作用域

在JavaScript中，函数内部的变量在外部是不可见的。但是在块内的变量（if 或 while 之类）是可见的。

因此，JavaScript有函数作用域。没有块作用域。

var a = 10;
function app(){
   var b = 2;
   console.log(a); // 10
   console.log(b); // 2
}
console.log(b); //   ReferenceError: b is not defined
app();

正像我们已知的那样，a 是一个全局变量并且 b 是一个局部变量，它是app函数独有的。

我们无法从局部作用域之外获取局部变量的值。

使用嵌套函数 —— 函数内部的函数

var a = 10;
function app(){
     var b = 2;
     var d = 3;
  function add(){
     var c = a + b;
   }
 return add;
}
var x = app();
console.dir(x);

在这里app是父函数，add函数是子函数。

代码中没有用 console.log 而是用了console.dir 来输出指定JavaScript对象的所有属性，这有助于开发人员获取对象的属性

变量 x 被分配给app函数，app函数返回add函数。因此我们可以看到add函数的所有对象属性。

如果在浏览器中查看控制台，可以在Scopes数组中看到Closure对象。

由于内部函数add访问外部函数变量b 和 d，因此这2个变量将被添加到Closure对象中以供引用。

让我们看看下一个例子：

var a = 10;
var startFunc;
function app(){
      var b = 2;
   function add(){
      var c = a + b;
      console.log(c);
   }
   startFunc = add();
}
app(); // 调用app函数
startFunc; // 上面调用的app函数会将add函数赋值给startFunc并输出c的值

一个名为 startFunc 的全局函数被分配给add函数，该函数是 app 函数的子函数。

这只有在调用 app 函数后才有可能，否则 startFunc 将作为全局变量而不被分配任何值

在JavaScript中使用闭包

很多人在编码时会用到闭包，但是不明白用它的原因。 JavaScript没有像其他面向对象语言一样的访问修饰符，例如 private，public，protected。不过我们可以利用函数来保护命名空间免受外部代码使用的影响。

特别是在函数中，立即执行函数表达式（IIFE）是在声明之后会立即执行的函数表达式。在声明函数之后，你不需要去调用该函数。

IIFE的语法定义是：

(function(){
             //函数内部的变量和作用域
})();

举个例子：

var studnetEnrollment = (function () {
    //私有变量，任何人都无法改变
    //除了下面声明的函数
     var count = 0;
     var prefix = "S";
    // 返回一个命名函数表达式
     function innerFunc() {
         count = count + 1;
         return prefix + count;
     };
 return innerFunc;
})();
var x = studnetEnrollment(); // S1
console.log(x);
var y = studnetEnrollment(); // S2 
console.log(y);

count和prefix是两个私有变量，任何人都无法进行更改，只能访问内部函数（即代码中的innerFunc）。只有名为闭包的功能才能对此进行访问。

第一次调用studentEnrollment函数时，函数内的count变量由innerFunc函数递增加1。

第二次，增加上一个计数值，即 1 增加到 2

Closure功能可以实现这些功能。

结论

闭包是外部函数中的变量集合，它提供对内部函数作用域的访问以保护全局命名空间。

闭包使开发人员能够编写像面向对象语言那样的干净代码，这些代码不会混淆全局和局部变量的名称。

编码快乐...... !!!!!

本文首发微信公众号：前端先锋 欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

12个令人惊叹的CSS实验项目

必须要会的 50 个React 面试题

世界顶级公司的前端面试都问些什么

11 个最好的 JavaScript 动态效果库

CSS Flexbox 可视化手册

从设计者的角度看 React

过节很无聊？还是用 JavaScript 写一个脑力小游戏吧！

CSS粘性定位是怎样工作的

一步步教你用HTML5 SVG实现动画效果

程序员30岁前月薪达不到30K，该何去何从

14个最好的 JavaScript 数据可视化库

8 个给前端的顶级 VS Code 扩展插件

Node.js 多线程完全指南

把HTML转成PDF的4个方案及实现

GPU云服务器云服务器 javascript闭包 javascript闭包详解 javascript指南 javascript教程指南

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

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

JavaScript中的闭包

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

HmyBmny 2019-08-21 17:07 评论0 收藏0
JavaScript深入之闭包

摘要：深入系列第八篇，介绍理论上的闭包和实践上的闭包，以及从作用域链的角度解析经典的闭包题。定义对闭包的定义为闭包是指那些能够访问自由变量的函数。 JavaScript深入系列第八篇，介绍理论上的闭包和实践上的闭包，以及从作用域链的角度解析经典的闭包题。定义 MDN 对闭包的定义为：闭包是指那些能够访问自由变量的函数。那什么是自由变量呢？自由变量是指在函数中使用的，但既不是函数参数也...

caige 2019-08-20 16:07 评论0 收藏0
JavaScript 装逼指南

摘要：实用价值在于可以防止全局污染。别忘了有判定的当然，很明显，这只是基础，并不能更装逼一点。祝愿大家越玩越牛逼从一行代码里面学点深入浅出高级程序设计设计模式与开发实践原文装逼指南顺便求实习 Summary 本文秉承着你看不懂是你sb，我写的代码就是牛逼的理念来介绍一些js的装逼技巧。下面的技巧，后三个，请谨慎用于团队项目中(主要考虑到可读性的原因)，不然，leader 可能请你喝茶。...

guyan0319 2019-08-19 18:08 评论0 收藏0
闭包详解一

摘要：再看一段代码这样就清晰地展示了闭包的词法作用域能访问的作用域将当做一个值返回执行后，将的引用赋值给执行，输出了变量我们知道通过引用的关系，就是函数本身。在正式学习闭包之前，请各位同学一定要确保自己对词法作用域已经非常的熟悉了，如果对词法作用域还不够熟悉的话，可以先看：深入理解闭包之前置知识---作用域与词法作用域前言现在去面试前端开发的岗位，如果你的面试官也是个前端，并且不是太...

cnio 2019-08-22 17:32 评论0 收藏0
JavaScript深入浅出

摘要：理解的函数基础要搞好深入浅出原型使用原型模型，虽然这经常被当作缺点提及，但是只要善于运用，其实基于原型的继承模型比传统的类继承还要强大。中文指南基本操作指南二继续熟悉的几对方法，包括，，。商业转载请联系作者获得授权，非商业转载请注明出处。怎样使用 this 因为本人属于伪前端，因此文中只看懂了 8 成左右，希望能够给大家带来帮助....（据说是阿里的前端妹子写的） this 的值到底...

blair 2019-08-21 18:26 评论0 收藏0