关于JS你必须知道的事——闭包

定义

MDN对于闭包的定义为:

闭包是指那些能够访问自由变量的函数。

那什么是自由变量呢?

自由变量是指在函数中使用的,但既不是函数参数也不是函数的局部变量的变量。

由此,我们可以看出闭包共有两部分组成:

闭包 = 函数 + 函数能够访问的自由变量

我理解的闭包:闭包是指那些能够访问自由变量的函数。其中自由变量,指在函数中使用的,但既不是函数参数arguments也不是函数的局部变量的变量,其实就是另外一个函数作用域中的变量。

举个例子:

var a = 1;

function foo() {
console.log(a);
}

foo();
复制代码

foo 函数可以访问变量 a,但是 a 既不是 foo 函数的局部变量,也不是 foo 函数的参数,所以 a 就是自由变量。

那么,函数 foo + foo 函数访问的自由变量 a 不就是构成了一个闭包嘛……

还真是这样的!

闭包的生命周期

闭包产生原因

首先要明白作用域链的概念,其实也很简单,在ES5中只存在两种作用域。

1️⃣全局作用域 2️⃣局部作用域

当访问一个变量时,解释器会首先在当前作用域查找标示符,如果没有找到,就去父作用域找,直到找到该变量的标示符或者不在父作用域中,这就是作用域链。 值得注意的是,每一个子函数都会拷贝上级的作用域,形成一个作用域的链条。 比如:

var a = 1;
function f1() {
	var a = 2
	function f2() {
	   var a = 3;
	   console.log(a);//3
	}
}
复制代码

在这段代码中,f1的作用域指向有全局作用域(window)和它本身,而f2的作用域指向全局作用域(window)、f1和它本身。而且作用域是从最底层向上找,直到找到全局作用域window为止,如果全局还没有的话就会报错。就这么简单一件事情!

闭包产生的本质就是,当前环境中存在指向父级作用域的引用。还是举上面的例子:

function f1() {
  var a = 2
  function f2() {
    console.log(a);//2
  }
  return f2;
}
var x = f1();
x();
复制代码

这里x会拿到父级作用域中的变量,输出2。因为在当前环境中,含有对f2的引用,f2恰恰引用了window、f1和f2的作用域。因此f2可以访问到f1的作用域的变量。

问题来了? 是不是只有返回函数才会产生闭包呢?

回到闭包实质:只需要让父级作用域的引用存在即可

var f3;
function f1() {
  var a = 2
  f3 = function() {
    console.log(a);
  }
}
f1();
f3();
复制代码

让f1执行,给f3赋值后,等于说现在f3拥有了window、f1和f3本身这几个作用域的访问权限,还是自底向上查找,最近是在f1中找到了a,因此输出2。

在这里是外面的变量f3存在着父级作用域的引用,因此产生了闭包,形式变了,本质没有改变。

闭包有哪些表现形式?

明白了本质之后,我们就来看看,在真实的场景中,究竟在哪些地方能体现闭包的存在?

  1. 返回一个函数。刚刚已经举例。
  2. 作为函数参数传递
var a = 1;
function foo(){
  var a = 2;
  function baz(){
    console.log(a);
  }
  bar(baz);
}
function bar(fn){
  // 这就是闭包
  fn();
}
// 输出2,而不是1
foo();
复制代码
  1. 在定时器、事件监听、Ajax请求、跨窗口通信、Web Workers或者任何异步中,只要使用了回调函数,实际上就是在使用闭包。
// 定时器
setTimeout(function timeHandler(){
  console.log('111');
},100)

// 事件监听
$('#app').click(function(){
  console.log('DOM Listener');
})
复制代码
  1. IIFE(立即执行函数表达式)创建闭包, 保存了全局作用域window当前函数的作用域,因此可以全局的变量。
var a = 2;
(function IIFE(){
  // 输出2
  console.log(a);
})();
复制代码

总结

  • 闭包定义:闭包指的是能够访问自由变量的函数.自由变量指的是在函数中使用,但既不是arguments也不是函数内局部变量的的变量,其实就是另外一个函数作用域下的变量。
  • 闭包的本质就是当前作用域存在指向父级作用域的引用。
  • 闭包的作用主要是保护函数的自由变量不受外部的干扰,形成不销毁的栈内存以及实现方法和属性的私有化。
  • 闭包的常用场景: 函数返回值为函数,函数作为参数被传入,在所有使用,回调函数的应用中都能认为存在闭包,比如ajax请求,定时器,事件监听, 立即执行函数。
  • 闭包的缺点:过度使用闭包会导致闭包内的变量所占用的内存空间无法被释放,有可能带来内存泄漏的问题。
  • 闭包应用场景:模块化与柯里化

参考

(建议收藏)原生JS灵魂之问, 请问你能接得住几个?(上)

聊一聊闭包

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享