如何才能通俗易懂的解释js里面的‘闭包’?

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中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里。" ——《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 中闭包的理解,如果有误,欢迎指正。最后引用一段知乎问题下关于闭包概念的一个回答。

作者:萧潇 链接:https://www.zhihu.com/question/34547104/answer/197642727

什么是闭包?

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

为什么需要闭包?

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

特点

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

何时使用?

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

如何使用?

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

原文地址:https://www.cnblogs.com/web-record/p/11679395.html

时间: 2024-11-10 17:47:51

如何才能通俗易懂的解释js里面的‘闭包’?的相关文章

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

1. "闭包就是跨作用域访问变量." [示例一] ? 1 2 3 4 5 6 7 8 9 var name = 'wangxi' function user () {  // var name = 'wangxi'  function getName () {  console.log(name)  }  getName() } user() // wangxi 在 getName 函数中获取 name,首先在 getName 函数的作用域中查找 name,未找到,进而在 user 函

深入理解js里面的this

闲聊两句(可以忽略): 毕业有半年了,时间还过得真快,不过还好,感觉自己相对于刚毕业那会确实成长了很多:好久没有打游戏了(自己决心要戒掉的),消磨时光的时候就看看电影或者追追电视剧,再无聊就洗洗衣服.扫扫地,实在不行就拿起手边的书看.照我以前的习惯,我除了上课时间可能看书,其他的时间是完全看不进的,所以觉得这也是自己进步的地方. 最近自己想开始学习前端工程师现在最流行的东西,nodejs,听说可以写服务端.听说是事件驱动.听说...听说了很多很多关于它的好,所以我也决心要好好学这个.推荐我收集的

关于common.js里面的module.exports与es6的export default的思考总结

背景 公司项目需要裁切功能,基于第三方图片裁切组件vue-cropper(0.4.0版本),封装了图片裁切组件(picture-cut)(放在公司内部组件库,仅限于公司内部使用) 在vue-cropper从0.4.0更新到0.4.4后,picture-cut组件使用裁切功能时报错 vue-cropper0.4.0的index.js文件导出方式如下 var vueCropper = require('./vue-cropper') module.exports = vueCropper vue-c

JS里面的DOME

一.JS中的DOM0事件模型      1.内容模型:直接将函数名作为HTML标签的某个事件属性的属性值;                例  rg:<button onlick="func()">按钮</button> 2.脚本模型:在JS脚本中通过事件属性进行绑定 : 例 eg:window.onlead = function(){}    但是它也有局限性即:同一个节点只能绑定一个同类型事件 二.JS中的DOM2事件模型     1.添加事件绑定:btn1

node.js里面的import

当在react项目中,使用import时,会把node_modules里面对应的依赖包导入到相应的位置.原理是:当执行import命令时,会先查找当前同级目录下的node_modules文件里面的对应依赖包,假如找到了,比如是ajv依赖包,然后找ajv依赖包下的main文件就ok了,如果没有main文件,就找ajv依赖包下的index.js文件.如果当前同级目录的node_modules文件里没有对应的依赖包,就继续往上级目录的node_modules文件进行搜索,依此类推,就ok了.

JS里面的call, apply以及bind

参考了这篇文章:http://www.tuicool.com/articles/EVF3Eb 给几个例子 function add(a,b) { alert(a+b); } function sub(a,b) { alert(a-b); } add.call(sub,3,1); 这个运行是什么呢?答案: 4. 运行的是add. 因为call是运行的调用者.将第一个参数作为this参数来使用. 再来一个例子 function Animal(){ this.name = "Animal";

js 里面的 function 与 Function

function 是 js 的标识符 Function 是 js 里面的一个 构造函数 1.new function 与 new Function 的区别 new 运算符在 js 里面是 创建一个自定义的对象的实例 或者是 一个具有构造函数的本地对象的实例. 语法:new constructor [ ( [ arguments ] ) ] new function() {......} 初始化一个可操作对象,相当于 new function 匿名函数() {......} new Functio

JS里面的innerHTML

1.在输入框输入一句话 2.点击按钮,输入框里面的内容会显示在下面 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 7 <script> 8 /* 9 HTML 的属性操作

js里面的cookie保存登录名

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> <script type="text/javascript"> //获取cookie function getCookie(c_name) { if (document.cookie.length > 0)