一篇文章搞懂闭包。

tinyq 发布于2019-08-23 14:01 / 1765人阅读

摘要：如果非要用一句话定义闭包我更加认同你不知道的作者的一句话当函数可以记住并访问所在的词法作用域时，就产生了闭包。所以本文将会从闭包的应用场景入手，来印证的这句话。总结闭包的应用场景还有很多，可以说是随处可见了。

直接进入主题，闭包是什么？

闭包是写代码过程产生的一种自然结果，而不是一种概念。

相比于一些概念性的解释，更重要的是熟悉它的应用场景、及常见写法。

如果非要用一句话定义闭包：
我更加认同《你不知道的javaScript》作者的一句话：当函数可以记住并访问所在的词法作用域时，就产生了闭包。

所以本文将会从闭包的应用场景入手，来印证kyle simpson的这句话。

列举两个常见应用场景

场景一：封装函数的私有属性和方法

//local变量是foo函数的私有属性，只能通过bar函数来访问。
function foo() {
  const local = 1
  function bar() {
    return local
  }
  return bar
}
let bar = foo()
console.log(bar()) // 1

bar函数记住了foo函数的词法作用域，导致foo函数运行完后并不会被垃圾回收，我们可以通过bar函数尽情地访问foo函数的作用域。

场景二：给10个li添加点击事件

// 错误写法：
function bindEvent() {
  var li = document.querySelectorAll("li")
  for(var i = 0; i < 10; i++) {
    li[i].addEventListener("click", function bar(){
      console.log(i)
    })
  }
}
bindEvent() //无论点击哪个li，都会打印出10

错误的原因很明显，10个bar函数中的i访问的都是同一个i，这个i属于foo函数。

// 正确写法:
function bindEvent() {
  var li = document.querySelectorAll("li")
  for(var i = 0; i < 10; i++) {
    li[i].addEventListener("click", (function foo(j){
      return bar() {
        console.log(j)
      }
    }))(i)
  }
}
bindEvent()

bar函数记住了foo函数的词法作用域,foo函数为每个bar函数选好了属于它自己的i，等着bar去访问就好啦。

总结：

闭包的应用场景还有很多，可以说是随处可见了。
理解它的核心思想：函数可以记住并访问所在的词法作用域，才可以根据你自己的意愿来识别、拥抱和影响闭包的思维环境。

云服务器 GPU云服务器能搞懂先搞懂性搞懂一天搞懂深度学习

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

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

搞懂闭包

摘要：此时闭包函数的作用域链得以保存，不会被垃圾回收机制所回收。执行执行完毕，返回总结闭包的原理，就是把闭包函数的作用域链保存了下来。原文：搞懂闭包 | AlloyTeam作者：TAT.yaoyao 闭包这个概念是前端工程师必须要深刻理解的，但是网上确实有一些文章会让初学者觉得晦涩难懂，而且闭包的文章描述不一。本文面向初级的程序员，聊一聊我对闭包的理解。当然如果你看到闭包联想不到作用域链...

masturbator 2019-08-26 10:14 评论0 收藏0
搞懂JavaScript引擎运行原理

摘要：同步一次执行一件事，同步引擎一次只执行一行，是同步的。调用函数将其推入堆栈并从函数返回将其弹出堆栈。执行上下文当函数放入到调用堆栈时由创建的环境。执行结果它会立即被推到回调队列，但它仍然会等待调用堆栈为空才会执行。为了保证可读性，本文采用意译而非直译。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！一些名词 JS引擎 — 一个读取代码并运行的引擎，没有单一的J...

lastSeries 2019-08-23 18:15 评论0 收藏0
作用域闭包，你真的懂了吗？

摘要：曾几何时，闭包好像就是一个十分难以捉摸透的东西，看了很多文章，对闭包都各有说法，以致让我十分晕，什么内部变量外部变量的，而且大多数都只描述一个过程，没有给闭包的定义，最后，举几个例子，告诉你这就是闭包。曾几何时，闭包好像就是一个十分难以捉摸透的东西，看了很多文章，对闭包都各有说法，以致让我十分晕，什么内部变量、外部变量的，而且大多数都只描述一个过程，没有给闭包的定义，最后，举几个例子...

yangrd 2019-08-20 12:04 评论0 收藏0
vue.js源码 - 剖析observer,dep,watch三者关系如何具体的实现数据双向绑定

摘要：双向数据绑定的核心和基础是其内部真正参与数据双向绑定流程的主要有和基于和发布者订阅者模式，最终实现数据的双向绑定。在这里把双向数据绑定分为两个流程收集依赖流程依赖收集会经过以上流程，最终数组中存放列表，数组中存放列表。 Vue双向数据绑定的核心和基础api是Object.defineProperty,其内部真正参与数据双向绑定流程的主要有Obderver、Dep和Watcher,基于d...

mo0n1andin 2019-08-22 16:17 评论0 收藏0
前端基础进阶（四）：详细图解作用域链与闭包

摘要：之前一篇文章我们详细说明了变量对象，而这里，我们将详细说明作用域链。而的作用域链，则同时包含了这三个变量对象，所以的执行上下文可如下表示。下图展示了闭包的作用域链。其中为当前的函数调用栈，为当前正在被执行的函数的作用域链，为当前的局部变量。 showImg(https://segmentfault.com/img/remote/1460000008329355);初学JavaScrip...

aikin 2019-08-21 18:29 评论0 收藏0