学习JavaScript之闭包

发布时间:2019-08-10 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了学习JavaScript之闭包脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

闭包在我的前端学习中一直也是盲点,之前很多次看到别人提到我都是完全听不懂。最近一直看书和写demo,对闭包也逐渐有所理解了,在这里写下这篇博客。

从作用域链讲起

首先明确几个概念:
1.JavaScript有函数级作用域,但没有块级作用域。
2.当要使用一个变量时,会沿着作用域链一步一步向上查找。
这里有一个demo:

VAR a = 1

function foo () {
  var a = 2
}

foo()
console.LOG(a) // a = 1

结果当然是a = 1,虽然在foo函数中重新声明了a并且赋给它一个新的值,但是var声明的变量只在foo()函数中有效,函数执行完毕就会销毁,因此全局作用域中a的值没有变化。
接下来再看这个demo:

for (var i = 0; i < 10; i++) {
  // code
}

console.log(i) // i = 10

这里在for循环结束之后仍然能在外部访问到i,就是因为JavaScript没有块级作用域造成的。

闭包的特性

闭包的主要特性就是可以从外部访问函数内部的属性和方法。先看一个demo:

function foo () {
  var a = 1
}
foo()
console.log(a) // 出错

正常情况下,定义在函数内部的局部变量在函数执行完之后就会被销毁,因此在外部是无法访问局部变量的。那应该怎么做才能访问呢?请继续看:

function foo () {
  var a = 1
  function bar () {
    console.log(a)
  }
  return bar
}
var baz = foo()
baz() // 1

在这个demo中,我们在函数foo()内部又定义了一个函数bar(),并把它的函数名返回,这样便能在外部实现对内部变量a的访问。

有人问了:不是说函数执行结束之后内部变量会被销毁吗?你这不科学啊。

是的,原来函数执行结束之后内部变量的确会被销毁,但是这里内部函数bar()在foo()执行时被返回并保存到了外部的baz中。这时候foo()执行完后,baz中依旧保存着对函数bar()的引用,因此bar()的作用域并没有被释放,根据之前提到的变量查找方式,在bar()函数的外层作用域中找到了a。

以上就是使用闭包能从外部访问内部属性的原理。

闭包的用途

利用闭包强大的特性,最方便的用途就是实现私有变量和私有方法;另外,因为使用闭包会在内存中保存函数作用域,因此也能保存变量的值。

此话怎解?请看下面的demo:

for (var i = 1; i <= 5; i++) {
  setTimeout(function timer () {
    console.log(i)
  }, i * 1000)
} // 6 6 6 6 6

这里的结果并不是我们预想中的每隔一秒依次输出12345,而是每隔一秒输出一个6,为什么会这样呢?

首先,这个6是变量i最终退出循环时的值,其次var声明的变量没有块级作用域,因此i实际上在全局作用域中都访问得到。到这里不难理解了,setTimeout在循环结束后执行timer()函数时,访问的i实际上在全局作用域中,此时i=6,因此后面的每个timer()函数执行访问的i都是6。那么问题又来了,怎样才能让闭包访问的i是我们想要的呢?

其实很简单,让i变成局部变量,在循环结束之后销毁,这样每个闭包访问的就是保存在作用域中的局部变量i,也就是对应的12345。请看下面的demo:

for (var i = 1; i <= 5; i++) {
  (function (j) {
    setTimeout(function timer () {
      console.log(j)
    }, j * 1000)
  })(i)
} // 1 2 3 4 5

这里用到了立即执行函数(IIFE),可能有些难以理解。那我一步一步解释:立即执行函数其实就是JavaScript模仿块级作用域的方法,这里你可以把它简单看成一个@R_304_2469@。i就是传给调用函数的参数,内部匿名函数形参j接收到i的值开始执行setTimeout。此时j就是函数级作用域中的局部变量,在循环结束后,timer()函数开始执行,因为它是一个闭包,所以能访问保存在作用域中的变量j,也就输出了我们想要的结果。

当然更简单的方式是用ES6的let来声明i,这样也是使得i变成局部变量,其他关于ES6这里就不多提,有兴趣的可以自行看let基本用法

闭包导致的问题

1.因为闭包会使得函数中的变量都保存在内存中,如不能及时释放会对性能造成影响。
2.在IE9以下的浏览器会有内存泄漏的问题。(关于这块我后续会写文章详细说明)

本人经验尚浅,目前对于前端仍在不断摸索和学习,文章如有错误,欢迎各位指正。最后附上本人博客地址和原文链接,希望能向各位多多学习。

lbj的前端之路
原文链接:学习JavaScript之原型链

脚本宝典总结

以上是脚本宝典为你收集整理的学习JavaScript之闭包全部内容,希望文章能够帮你解决学习JavaScript之闭包所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。