JS中的闭包

什么是闭包?

(function(){
  var local = '你好'
  function fn(){
    console.log(local)
  }
})()

上面的代码就形成了一个闭包:
「函数」和「函数内部能访问到的变量」的总和,就是一个闭包
所以,可以这么说,JS中所有的函数都是闭包。因为JS中所有的函数都可以访问全局变量,那么全局变量和函数就形成了闭包
闭包不是故意弄出来的东西,而是JS函数作用域的副产品。

函数作用域

ES 5 中只有两种作用域,全局作用域和函数作用域。函数内部的变量可以读取全局作用域中的变量,而函数外部不能读取函数内部定义的变量。而闭包,就是沟通全局作用域和函数作用域之间的桥梁,全局作用域和函数作用域通过闭包来实现变量的连接。

闭包的一般形式

常见的使用闭包的一般形式是使用自执行函数 或 函数里面套函数,目的是为了提供一个函数作用域,隔开函数作用域和全局作用域,达到隐藏变量的目的。使用闭包将变量声明放到函数作用域中,除了这个函数的其他地方就不能访问到这个变量,变量就隐藏了。

闭包的用途

  1. 读取函数内部变量
function foo(){
  var xx = '你好'
  return function(){
    return xx
  }
}
// 上面这段代码中,函数 foo 返回的匿名函数与 foo 中的变量 xx 形成了一个闭包。
// foo 返回一个匿名函数,该匿名函数读取 foo 作用域中的变量,之后返回该变量。
// 调用函数 foo ,返回一个匿名函数,再调用该匿名函数,就可以读取 foo 中的变量。

var getVariable = foo()
getVariable()     //  返回  '你好'
console.log(xx)   // 报错,xx 没有被定义
  1. 让变量保持在内存中,不被垃圾回收机制回收
function foo(xx){
  return function(){
    return xx++
  }
}
// 上面代码中,使用闭包,多创建了一个匿名函数的作用域来保存变量 xx 的值。
// 在函数 foo 执行之后,xx 的值在匿名函数中被保留下来,不会因为没有被引用而被内存回收 

var fn = foo(1)
fn()   // 1,每一次调用 fn,其实都是在调用 fn(foo 中返回的匿名函数) 作用域中的xx
fn()   // 2,每一次调用 fn,其实都是在调用 fn(foo 中返回的匿名函数) 作用域中的xx
fn()   // 3,每一次调用 fn,其实都是在调用 fn(foo 中返回的匿名函数) 作用域中的xx
var li = document.querySelectorAll('li')
for(var i = 0; i < li.length; i++){
  li[i].onclick = function(){
    console.log(i)
  }
}
// 上面这段代码,每一次点击 li, 都会打印出 5
// 这是因为上面的 i,用的都是同一个作用域下的变量 i,这个作用域之中的 i,在经过 for 循环之后,值会变成 5。

// 而想要让代码达成我们想要的效果,就需要为每一个变量 i 创建一个作用域,
// 使打印出来的每一个变量 i 的作用域不同,就是打印出不同的 i,使用闭包就可以做到。
var li = document.querySelectorAll('li')

for(var i = 0; i < li.length; i++){
  li[i].onclick = (function(i){
    return function(){
      console.log(i)
    }
  })(i)
}
// 上面代码新增了一个函数作用域,用来保存变量 i 的值。新增的函数返回要执行的回调函数,
// 又因为 ‘click’事件是直接执行的,所以,要将返回的函数直接执行,使用自执行函数的方式,来执行返回的回调函数。
// 这时调用的回调函数,每一个 i 都是独立函数作用域之中的 i,它们的值都不一样。
  1. 封装私有变量、方法
function fn(a){
  var b = 'hi'
  
  function add(){
    return a++
  }
  
  function reduce(){
    return a--
  }
  
  function getA(){
     return a
  }
  
  function getB(){
    return b
  }
  
  function modefyB(x){
    b = x
    return b
  }
  
  return {
    getA: getA,
    add: add,
    reduce: reduce,
    getB: getB,
    modefyB: modefyB,
  }
}

// 上面的代码封装了两个私有变量和4个私有方法。
// 一个私有变量是参数传入的,一个私有变量是自身定义的。
// 通过私有方法来对私有变量进行操作。

var f1 = fn(1)
var f2 = fn(10)
// f1 和 f2 是两个不同的对象,拥有各自的私有变量和私有方法,分别对 f1 和 f2 进行操作,并不会影响另一个。

f1.getA()  // 1
f1.getB() // 'hi'
f1.modefyB('hello')
f1.getB()  // 'hello'

f2.getA()  // 10
f2.getB()  // 'hi'
f2.modefyB('放心,我不会改变对象f1的。不信你试试?')
f2.getB()  // '放心,我不会改变对象f1的。不信你试试?'

f1.getB() // 'hello'
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 首先,js闭包对于哪怕是有很多年前端开发经验的人,也是很晦涩难懂的东西. 所以,我不敢保证能把你说明白,但是如果你...
    火锅伯南克阅读 431评论 0 1
  • 在上一篇文章“执行环境和作用域”中,我试着梳理了执行环境和作用域的关系。但实际上,文章中并没有提到作用域,而是介绍...
    海痕阅读 247评论 0 0
  • 今天研究了一波js中的闭包,分享一下自己的理解。 一、变量的作用域 要理解闭包,首先必须理解Javascript特...
    阿布_0caf阅读 253评论 0 2
  • 前两天和老同学吃饭,大家回顾这几年自己的发展,有一个共识:大学刚毕业前几年,因为不懂职场规则,走了很多弯路,如果当...
    王二宝阅读 161评论 0 0