JS闭包

作者: 奋起的小菜鸟 | 来源:发表于2019-07-01 17:03 被阅读18次

JS是作为一名合格的前端程序猿必不可少的技能之一。JS涉及到的知识点又是相当的复杂。闭包是让初学者头疼的一个知识点。下面是我对闭包的理解,希望可以帮助到一些朋友。

前提

想要搞懂闭包,首先需要了解JS的变量作用域

JS变量作用域

全局变量和局部变量

<script>
  var GlobalVarOne = 'global var one'   //全局作用域
  function scope(){
      var arrScope = ['yang','tong','li']   //局部作用域
      GlobalVarTwo = "global var two"  //全局变量
      window.GlobalVarThree = "global var three" //全局变量
      for(var i=0;i<arrScope.length;i++){   //变量i是局部作用域
          console.log(arrScope[i])
      }
      console.log(arrScope)
  }
  scope()
 </script>

在函数内部使用var或let定义的变量都是局部变量,如果没有使用var、let、window定义的变量会造成变量的提升,成为全局变量。
全局变量一般使用 console.log(window.变量名)可以输出值

JS变量访问特点

函数内部可以访问全局变量,但是函数外部不能访问函数内部的局部变量

<script>
  var GlobalVarOne = 'global var one'   //全局作用域
  function scope(){
      var arrScope = ['yang','tong','li']   //局部作用域
      GlobalVarTwo = "global var two"  //全局变量
      window.GlobalVarThree = "global var three" //全局变量
      for(var i=0;i<arrScope.length;i++){   //变量i是局部作用域
          console.log(arrScope[i])
      }
      console.log(GlobalVarOne) //输出  global var one
  }
  scope()
  console.log(window.GlobalVarThree) //输出 global var three
  console.log(arrScope) //error:arrScope is not defined
 </script>

在上述代码中console.log(arrScope)报错,原因就是arrScope是scope函数的局部作用域,在函数外部不能访问。而console.log(GlobalVarOne)可以正常输出,是因为GlobalVarOne是全局变量,在函数内部是可以访问到的。

概念

闭包:有权访问另一个函数作用域中的变量的函数(JavaScript高级程序设计)

<script>
  function outer() {
     var  a = '变量1'
  }
  console.log(a) //error
</script>

上述代码中,由于a变量是outer函数的局部变量,在函数外部我们没有办法访问到a变量,那我们怎么做才能访问到a变量呢。这个时候就用到了闭包函数,将a变量封装到一个函数中,将其return出来。

<script>
  function outer() {
     var  a = 'local var'
     var inner = function(){
          console.log(a)
      }
      return inner //inner就是闭包函数,能够访问到outer函数的作用域
  }
  outer()() //输出  local var
</script>

个人理解 --- 闭包函数是为了实现函数外部能够访问函数内部的局部变量而存在的,闭包函数其实就是链接函数内部与函数外部的桥梁。

作用

1.可以读取函数自身以外的变量(沿着作用域链寻找)
2.可以让函数内部的变量始终存在于内存中,不被垃圾回收机制销毁。

弊端

JS存在销毁机制,当函数执行完以后,函数以及函数中的变量会被垃圾回收机制销毁,但是闭包函数中存在函数内部的局部变量,所以函数执行完以后不会被销毁,会一直存在于内存中,导致内存消耗过大,同时还存在内存泄露的风险,所以要慎用闭包函数。

相关文章

  • php之闭包函数(Closure)

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

  • JS闭包

    JS闭包 闭包练习

  • JS闭包问题(二)

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

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

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

  • JS闭包入门

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

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

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

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

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

  • 简单的聊一下闭包

    js中的闭包 闭包是学习js中永远也绕不过去的一个坎,那么,今天我们就去一段简单的代码开始聊一聊闭包 什么是闭包 ...

  • 浅谈闭包

    js中的闭包 闭包是学习js中永远也绕不过去的一个坎,那么,今天我们就去一段简单的代码开始聊一聊闭包 什么是闭包 ...

  • 闭包??

    什么闭包,闭包有什么用?http://js.jirengu.com/pogadikofa/1/闭包是在某个作用域内...

网友评论

    本文标题:JS闭包

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