Js闭包｜ 8月更文挑战

进军的王小二
243 阅读3分钟

这是我参与8月更文挑战的第2天，活动详情查看： 8月更文挑战

前言

我记得红宝书中的第一章有句话：JavaScript是一种专为于网页交互而设计的脚本语言。Js在前端的地位不言而喻，而掌握Js的基础更是重中之重。接下来的文章会一点一点的分知识点去学习Js。Js的知识图谱

闭包的概念

也许面试会被问到:闭包是什么？说说你对闭包的理解？本文来简单的说一下闭包。

  • 闭包是指有权访问另一个函数作用域中的变量的函数 ——《JavaScript高级程序设计》

  • 当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行 ——《你不知道的JavaScript》

探索闭包

来个DEMO

来个全局变量count，再来个函数addCount使变量count加1

image.png

上图我在浏览器环境中很简单的实现了，但是这里有个这样的问题，这个count变量是全局变量，是可以很容易的被随意更改的。 image.png 我们可以使用Js的内嵌函数，修改一下addCount，把变量count变成局部变量。 image.png 这样的局部变量count就不会被外部所影响了。但是新问题又来了，这里不管调用几次函数addCount都返回1，这并不能实现我们所需要的累加效果。

这时候可以使用闭包来解决当前困境：

image.png

小结

最后一个闭包的实现：变量 addCount 指定了函数自我调用的返回字值。自我调用函数只执行一次。设置变量count为 0，并返回函数表达式。addCount变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的count。这个叫作 JavaScript 闭包。 它使得函数拥有私有变量变成可能。count受匿名函数的作用域保护，只能通过 addCount 方法修改。

经典闭包

外部访问局部变量： image.png

变量x不会被垃圾回收机制回收： image.png

代码

// 全局
var count = 0;
function addCount(){
count++
console.log(count);
}
addCount();
//局部变量
function addCount(){
  let count = 0
  count++
  console.log(count)
}
//闭包
var addCount = (function(){
  let count = 0;
  return function(){
    console.log(count+1)
    return count+=1 
  }
})()
// 闭包 外部访问局部变量
function fn1(){
  let name='wangxiaoer'
  return ()=>{
    console.log(name)
    return name
  }
}
// 闭包 销毁y 保留x
function fn1(){
  let x=1
  return ()=>{
    let y = 1
    console.log(x++)
    console.log(y++)
  }
}

如果看到这你还不明白什么是闭包：「函数」和「函数内部能访问到的变量」（也叫环境）的总和，就是一个闭包。

本文小结

闭包的三个特性：

  • 函数嵌套函数
  • 函数内部可以引用函数外部的参数和变量
  • 参数和变量不会被垃圾回收机制回收

闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。直观的说就是形成一个不销毁的栈环境。

熟能生巧(Practice make perfect!)。 以上是对闭包的一些基本说明，各位大佬，如果看见错误的地方感谢帮忙指出，谢谢了！

567570eb04c107f0a5d6ccf93447999.png

avatar
文章
阅读
粉丝