通俗易懂地解释JS中的闭包


Posted in Javascript onOctober 23, 2017

1. "闭包就是跨作用域访问变量。"

【示例一】

var name = 'wangxi'
function user () {
 // var name = 'wangxi'
 function getName () {
 console.log(name)
 }
 getName()
}
user() // wangxi

在 getName 函数中获取 name,首先在 getName 函数的作用域中查找 name,未找到,进而在 user 函数的作用域中查找,同样未找到,继续向上回溯,发现在全局作用域中存在 name,因此获取 name 值并打印。这里很好理解,即变量都存在在指定的作用域中,如果在当前作用中找不到想要的变量,则通过作用域链向在父作用域中继续查找,直到找到第一个同名的变量为止(或找不到,抛出 ReferenceError 错误)。这是 js 中作用域链的概念,即子作用域可以根据作用域链访问父作用域中的变量,那如果相反呢,在父作用域想访问子作用域中的变量呢?——这就需要通过闭包来实现。

【示例二】

function user () {
 var name = 'wangxi'
 return function getName () {
 return name
 }
}
var userName = user()()
console.log(userName) // wangxi

分析代码我们知道,name 是存在于 user 函数作用域内的局部变量,正常情况下,在外部作用域(这里是全局)中是无法访问到 name 变量的,但是通过闭包(返回一个包含变量的函数,这里是 getName 函数),可以实现跨作用域访问变量了(外部访问内部)。因此上面的这种说法完整的应该理解为:

闭包就是跨作用域访问变量 —— 内部作用域可以保持对外部作用域中变量的引用从而使得(更)外部作用域可以访问内部作用域中的变量。(还是不理解的话看下一条分析)

2. "闭包:在爷爷的环境中执行了爸爸,爸爸中返回了孙子,本来爸爸被执行完了,爸爸的环境应该被清除掉,但是孙子引用了爸爸的环境,导致爸爸释放不了。这一坨就是闭包。简单来讲,闭包就是一个引用了父环境的对象,并且从父环境中返回到更高层的环境中的一个对象。"

这个怎么理解呢?首先看下方代码:

【示例三】

function user () {
 var name = 'wangxi'
 return name
}
var userName = user()
console.log(userName) // wangxi

问:这是闭包吗?

答:当然不是。首先要明白闭包是什么。虽然这里形式上看好像也是在全局作用域下访问了 user 函数内的局部变量 name,但是问题是,user 执行完,name 也随之被销毁了,即函数内的局部变量的生命周期仅存在于函数的声明周期内,函数被销毁,函数内的变量也自动被销毁。

但是使用闭包就相反,函数执行完,生命周期结束,但是通过闭包引用的外层作用域内的变量依然存在,并且将一直存在,直到执行闭包的的作用域被销毁,这里的局部变量才会被销毁(如果在全局环境下引用了闭包,则只有在全局环境被销毁,比如程序结束、浏览器关闭等行为时才会销毁闭包引用的作用域)。因此为了避免闭包造成的内存损耗,建议在使用闭包后手动销毁。还是上面示例二的例子,稍作修改:

【示例四】

function user () {
 var name = 'wangxi'
 return function getName () {
 return name
 }
}
var userName = user()() // userName 变量中始终保持着对 name 的引用
console.log(userName) // wangxi
userName = null // 销毁闭包,释放内存

【为什么 user()() 是两个括号:执行 user()  返回的是 getName 函数,要想获得 name 变量,需要对返回的 getName 函数执行一次,所以是 user()()】

根据观点2,分析一下代码:在全局作用域下创建了 userName 变量(爷爷),保存了对 user 函数最终返回结果的引用(即局部变量 name 的值),执行 user()()(爸爸),返回了 name(孙子),正常情况下,在执行了 user()() 之后,user 的环境(爸爸)应该被清除掉,但是因为返回的结果 name(孙子)引用了爸爸的环境(因为 name 本来就是存在于 user 的作用域内的),导致 user 的环境无法被释放(会造成内存损耗)。

那么【"闭包就是一个引用了父环境的对象,并且从父环境中返回到更高层的环境中的一个对象。"】如何理解?

我们换个说法:如果一个函数引用了父环境中的对象,并且在这个函数中把这个对象返回到了更高层的环境中,那么,这个函数就是闭包。

还是看上面的例子:

getName 函数中引用了 user(父)环境中的对象(变量 name),并且在函数中把 name 变量返回到了全局环境(更高层的环境)中,因此,getName 就是闭包。

3. "JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里."

这句话对闭包中对变量的引用的理解很有帮助。我们看下面的例子:

var name = 'Schopenhauer'
function getName () {
 console.log(name)
}
function myName () {
 var name = 'wangxi'
 getName()
}
myName() // Schopenhauer

如果执行 myName() 输出的结果和你想象的不一样,你就要再回去看看上面说的这句话了,

JavaScript 中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里

执行 myName,函数内部执行了 getName,而 getName 是在全局环境下定义的,因此尽管在 myName 中定义了变量 name,对getName 的执行并无影响,getName 中打印的依然是全局作用域下的 name。

我们稍微改一下代码:

var name = 'Schopenhauer'
function getName () {
  var name = 'Aristotle'
 var intro = function() { // 这是一个闭包
  console.log('I am ' + name)
 }
 return intro
}
function showMyName () {
 var name = 'wangxi'
 var myName = getName()
 myName()
}
showMyName() // I am Aristotle

结果和你想象的一样吗?结果留作聪明的你自己分析~

以上就是对 js 中闭包的理解,如果有误,欢迎指正。最后引用一段知乎问题下关于闭包概念的一个回答。

什么是闭包?

简单来说,闭包是指可以访问另一个函数作用域变量的函数,一般是定义在外层函数中的内层函数。

为什么需要闭包?

局部变量无法共享和长久的保存,而全局变量可能造成变量污染,所以我们希望有一种机制既可以长久的保存变量又不会造成全局污染。

特点

  • 占用更多内存
  • 不容易被释放

何时使用?

变量既想反复使用,又想避免全局污染

如何使用?

  1. 定义外层函数,封装被保护的局部变量。
  2. 定义内层函数,执行对外部函数变量的操作。
  3. 外层函数返回内层函数的对象,并且外层函数被调用,结果保存在一个全局的变量中。

好了,以上所述是小编给大家介绍的js中的闭包,希望对大家有所帮助!

Javascript 相关文章推荐
深入分析jquery解析json数据
Dec 09 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
详解webpack+express多页站点开发
Dec 22 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
js循环map 获取所有的key和value的实现代码(json)
May 09 Javascript
JS实现字符串翻转的方法分析
Aug 31 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
24个解决实际问题的ES6代码片段(小结)
Feb 02 Javascript
基于JavaScript实现控制下拉列表
May 08 Javascript
AngularJS 教程及实例代码
Oct 23 #Javascript
浅谈Koa服务限流方法实践
Oct 23 #Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 #Javascript
angularjs实现猜大小功能
Oct 23 #Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
Oct 23 #Javascript
angularjs实现天气预报功能
Jun 16 #Javascript
angular.js实现购物车功能
Oct 23 #Javascript
You might like
php 字符转义 注意事项
2009/05/27 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
Nginx实现反向代理
2017/09/20 Servers
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
匹配任意字符的正则表达式写法
2010/04/29 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
2011/04/08 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
使用vue编写一个点击数字计时小游戏
2016/08/31 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
2016/12/15 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
[46:21]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python设计模式之代理模式实例
2014/04/26 Python
Python之Web框架Django项目搭建全过程
2017/05/02 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
银行职业规划书范文
2013/12/28 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书