简明扼要地认识Js闭包

作者: VoyagerOne | 来源:发表于2018-04-23 14:23 被阅读8次

普通的函数

function outer() {
  console.log('outer')
}

outer() // outer

返回函数的函数

function outer() {
  console.log('outer')
  function inner() {
    console.log('inner')
  }
  return inner
}

const fun = outer() // outer (此处执行console.log('outer'),并将inner赋给fun)

fun() // inner (此处执行console.log('inner'))

闭包

内层函数不是独立时,触发闭包,例如内层函数需要访问上层变量。

function outer() {
  console.log('outer')
  const outerStr = 'Hello'
  function inner() {
    console.log(outerStr + 'inner')
  }
  return inner
}

const fun = outer() // outer

fun() // Helloinner

产生原因:JS runtime 会实时跟踪变量,当其没有被引用时即被回收。一般情况下,函数内部的变量,在函数执行完后便不再被引用,runtime 会销毁变量,释放内存。

而返回的函数引用外层的变量,即这个变量在外层函数执行完毕后仍然被应用,所以 runtime 不会销毁它,让它继续存在。

这就是闭包(Closure)。

简单应用

当你需要将一个函数内变量一直放在内存里,即使该函数执行完毕也存在时,就需要使用到闭包。
估计执行时间:

function getRunTime() {
  const begin = Date.now()
  function elapse() {
    console.log(Date.now() - begin)
  }
  return elapse
}
const timer = getRunTime() // 将当前时间戳赋给begin,将elapse赋给timer,elapse中的begin始终引用内存的变量。

for (let i = 0; i < 9999999; ++i) {
  1 + 1
}

timer() // 13 得出大致的for(){}执行的时间

自增自减:

function add() {
  let begin = 0
  return function() {
    console.log(++begin)
  }
}
const adder = add()

adder() // 1
adder() // 2

结束,解释得还可以吧 : )

相关文章

  • 简明扼要地认识Js闭包

    普通的函数 返回函数的函数 闭包 内层函数不是独立时,触发闭包,例如内层函数需要访问上层变量。 产生原因:JS r...

  • php之闭包函数(Closure)

    php闭包函数(Closure) JS闭包 js和php闭包使用和区别

  • JS闭包

    JS闭包 闭包练习

  • js之闭包函数(蔡哲永)

    很多初学js的可能对于js中的闭包函数有一定的模糊认识,下面我们来看一下闭包函数究竟是何方神圣! 想要了解闭包函数...

  • JS闭包问题(二)

    在之前的JS闭包问题(一)文章中大概介绍了一下JS闭包,同时讲了闭包与变量之间的问题,今天我们继续聊闭包,聊聊闭包...

  • JS闭包大结局(JS闭包系列3)

    在上一篇中再谈JS闭包(JS闭包系列2),我详细的介绍了JS中的变量作用域相关的概念,结合第一节关于JS闭包(JS...

  • JS闭包入门

    最近有看到朋友的面经里提到的JS闭包的问题,就想研究研究,以下是我对JS闭包的简单理解。 到底什么是JS闭包? 定...

  • 学习JavaScript闭包和作用域笔记

    JS JavaScript闭包和作用域 闭包 JavaScript高级程序设计中对闭包的定义:闭包是指有权访问另外...

  • Javascript嵌套函数的调用

    这里其实还是讲讲我对javascript闭包的认识。js中闭包就是以嵌套函数的外表出现的。内容是我自己琢磨的,我估...

  • 再谈JS闭包(JS闭包系列2)

    这篇文章,来继续谈谈Javascript闭包的剩余问题。因为在上一篇文章中关于JS闭包(JS闭包系列1)主要简单的...

网友评论

    本文标题:简明扼要地认识Js闭包

    本文链接:https://www.haomeiwen.com/subject/pdxllftx.html