美文网首页前端开发前端日报ps
[程序员每日5分钟]JS 中的闭包是什么

[程序员每日5分钟]JS 中的闭包是什么

作者: anonymous66 | 来源:发表于2017-01-17 09:25 被阅读666次
Closures

闭包 是前端开发者面试必问的一个知识点。
1、什么是闭包?
2、闭包的作用是什么?

一、变量的作用域

你要学习和理解闭包 ,那么首先你要知道 JS 的作用域。
在 JS 中就只有两种:全局变量局部变量

JS 特殊之处,就在于 函数内部 可以直接读取 全局变量

var name = 'anonymous66'
function getName(){
    alert(name)
}

getName()// anonymous66

另一方面,在 函数外部 自然无法读取 函数内的局部变量

function getName(){
    var name = 'anonymous66'
}

alert(name)// 读取不到

一定要使用 var 命令。如果不用的话,你实际上声明了一个 全局变量

function getName(){
    name = 'anonymous66'
}   

getName()
alert(name) // anonymous66

二、什么是闭包

我们来看一个典型的闭包

function Man() {
    var name = 'anonymous66'
    function getName() {
        alert(name)
    }
    return getName
}

var man = Man()
man() // 'anonymous66'

函数getName 能够访问 函数Man 内部的变量,那么 函数getName变量name 这整个环境就可以称之为� 闭包

闭包就是能够读取其他函数内部变量的函数

知乎有人是这样解释的:闭包就像是包子,包子每个陷(环境)都不同,就像肉包、菜包、等等。

三、闭包的作用是什么

闭包 相当于是一个拥有 “运行环境” 的函数

  • 一个团队在协作开发过程中,尽量保证每个人开发的模块(函数)都有自己的“运行环境”,而不会造成全局变量污染以及模拟了命名空间开发的模式。
  // 成员A负责开发A模块,里面有函数showName
  var A = function () {
      var name = 'A'
      this.showName = function () {
          console.log(name)
      }
  }

  // 成员B负责开发B模块,里面也有函数showName
  var B = function () {
      var name = 'B'
      this.showName = function () {
          console.log(name)
      }
  }

  // 最后项目合并的时候,调用A和B两个模块,哪怕函数名字一样也互不影响。
  var a = new A()
  a.showName() // 'A'
  var b = new B()
  b.showName() // 'B'
  • 闭包通常用来创建内部变量,使得这些变量不能被外部随意修改,同时又可以通过指定的函数接口来操作。
var Man = function () {
     var name = 'anonymous66'
     var age = 18
     this.getName = function () {
         return name
     }
     this.getAge = function () {
         return age
     }
}

// 利用闭包可以给对象设置「私有属性」并利用「特权方法」访问私有属性
var man = new Man()
man.name // undefined
man.age // undefined
man.getName() // 'anonymous66'
man.getAge() // 18
  • 闭包会使得函数中的变量都被保存在内存中
function Count(){
    var n = 1
    this.nAdd = function () { 
        n += 1
    }
    function show() {
        alert(n)
    }
    return show
}

var result = new Count()
result() // 1
result.nAdd()
result() // 2

为什么会这样呢?原因就在于Countshow的父函数,而show被赋给了一个Count的变量,这导致show始终在内存中,而show的存在依赖于Count,因此Count也始终在内存中,不会在调用结束后,被垃圾回收机制回收。

由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,(IE 有 bug,IE 在我们使用完闭包之后,依然回收不了闭包里面引用的变量。)所以,在退出函数之前,将不使用的局部变量全部删除。

四、总结

1、闭包就是一个拥有 “运行环境” 的函数
2、解决全局变量污染,模拟命名空间
3、可以给对象设置「私有属性」并利用「特权方法」访问私有属性
4、变量都被保存在内存中

喜欢文章吗?那就点一下喜欢之后关注我把,尽量每周更新。

相关文章

  • 闭包

    [程序员每日5分钟]JS 中的闭包是什么

  • 【转载】JS 中的闭包是什么?

    「每日一题」JS 中的闭包是什么? 方应杭[https://www.zhihu.com/people/zhihus...

  • 好程序员web前端培训分享web前端面试题JS篇之闭包

    好程序员web前端培训分享web前端面试题JS篇之闭包,JS中关于闭包的相关知识。如果你想参加web前面工作,那么...

  • 题目

    闭包是什么?闭包的优缺点 this的指向问题? js中的基本类型? (没有object!) typeof 判断类型...

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

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

  • 闭包是什么?用处如何?

    【js-04】闭包是什么?用处如何? ...

  • 2019-03-25 js闭包和内存释放

    闭包的那些事儿 怎么写一个闭包闭包是什么就不解释了,直接写一个闭包函数: js中,函数是一等公民,定义一个函数f,...

  • 简单的聊一下闭包

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

  • 浅谈闭包

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

  • php之闭包函数(Closure)

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

网友评论

  • 5238f62435fa:受教了,谢谢😀
    anonymous66:@第廿八年夏至 :smile:互勉
  • fd643c1c376a:学习了
    anonymous66:@养生语 :grin:
  • 柠檬树QAQ:可以的 老哥
    anonymous66:@晴天丶麻油叶 :grin:
  • 么么虎:es6 出现 let关键字了
    anonymous66:@么么虎 ES6的东西暂时不说,毕竟现在浏览器多数都无法解释ES6。let和严格模式,都暂时不讨论哈。
  • 前端开发博客:赞,闭包就是能够读取其他函数内部变量的函数。
    闭包会使得函数中的变量都被保存在内存中。
    调用show函数,show函数使用了外部的变量,形成闭包,show始终在内存中,变量也一直在内存里,不会被回收,所以值会递增。
    anonymous66::+1: 理解的很棒啊
  • ac299578b197:棒棒
    anonymous66:@chj9836 :grin:谢谢
  • kkouken:谢谢~对于前端新手来说,这已经有点小开窍了~哈哈
    anonymous66:@kkouken :grin:共勉
    kkouken:@anonymous66 好的,谢谢大神~向你多多学习了啊
    anonymous66:@kkouken 可以多追我这个系列,我尽量都讲的很容易理解!
  • 吕岳阳:666
    anonymous66:@吕岳阳 :grin:谢谢

本文标题:[程序员每日5分钟]JS 中的闭包是什么

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