阅读 4561

9分钟,搞明白闭包

闭包——JS三座大山之一,对很多前端开发者来说是个非常头疼的知识点。本文将花费大约9分钟时间,用4组非常简单的例子来对比理解闭包,也许会改变大家之前对闭包的理解。

在案例对比之前,先给大家一个观点:闭包只是一种现象。在此,我们不要试图用官方的定义,以扣字眼的方式去理解闭包的含义,那样会进入一个理解的误区。我们的目的是找出函数执行时出现闭包现象的条件。所以我们来用4组(共9个demo,每分钟可以看完一个)案例剖析下,如果看完能搞清楚闭包这种现象是如何产生的,那就大功告成了。

第一组、用全局变量引用再执行

var m, n;//全局变量

function outer_a1() {
	var num = 10;
	function inner() {
		console.log(num) //打印了outer_a1中定义的num
		debugger
	}
	m = inner;
}
outer_a1();
m();

function outer_a2() {
	var num = 10;
	function inner() {
		console.log("just console") //只做了简单的打印
		debugger
	}
	n = inner;
}
outer_a2();
n();
复制代码

上面两张图片是分别执行outer_a1()和outer_a2()后再执行m()和n()时,到其中的debugger断点后,chrome控制台的截图,我们可以看出第一个出现了Closure并包含了变量num:10,第二张图并没有出现Closure。先不做解释,继续第二组案例对比。

第二组、内部直接执行

function outer_b1() {
	var num = 15;
	function inner() {
		console.log(num) //打印了outer_b1中定义的num
		debugger
	}
	inner()
}
outer_b1();

function outer_b2() {
	var num = 15;
	function inner() {
		console.log("just console") //只做了简单的打印
		debugger
	}
	inner()
}
outer_b2();
复制代码

第二组跟第一组差不多,只是改为了在outer_b1和outer_b2中直接执行了inner,我们可以发现还是第一个产生了Closure包含变量num:15(备注:如果把var num = 15;放在inner()执行的后面,根据变量提升规则,Closure中的变量num值就是undefined),而第二个没有产生Closure,继续第三组:

第三组、return后再执行

function outer_c1(s) {
	var num = 20;
	function inner() {
		console.log(s + num) //打印包含了outer_c1形参s和定义的num
		debugger
	}
	return inner
}
outer_c1()();

function outer_c2(s) {
	var num = 20;
	function inner() {
		console.log("just console") //只做了简单的打印
		debugger
	}
	return inner
}
outer_c2()();
复制代码

第三组使用了return把内部的inner返回出来,然后分别执行outer_c1()()和outer_c2()()来运行内部的inner,发现还是第一个产生了Closure而第二个没有Closure,不同的是第一个又引用了outer_c1的形参s,所以Closure中的变量也多了一个s,不过执行outer_c1()时并没有传入实参,所以s的值是undefined。

这三组案例实际都很相似,每组两个demo之间的唯一区别就是:前一个demo打印了属于outer函数的私有局部变量,而后一个demo只是做了简单的打印。到此大致可以确定,闭包的产生跟执行方式并没有特别的关联,而是看内部函是否引用外部函数的私有变量来确定的。然后再来看下最后一组:

第四组、多种方式一起

var x, y, z; //全局变量

function outer_d1(s) {
	var num = 25;
	function inner1() {
		console.log(s) //打印形参s
		debugger
	}
	y = inner1;
	function inner2() {
		console.log("just console") //只做了简单的打印
		debugger
	}
	inner2();
	function inner3() {
		console.log(num) //打印定义的num
		debugger
	}
	return inner3
}
outer_d1("i am x");

function outer_d2(s) {
	var num = 25;
	function inner1() {
		console.log(s) //打印形参s
		debugger
	}
	
	function inner2() {
		console.log("just console") //只做了简单的打印
		debugger
	}

	function inner3() {
		console.log(num) //打印定义的num
		debugger
	}
	
	inner2();
}
outer_d2("i am y");

function outer_d3(s) {
	var num = 30;
	function inner1() {
		console.log("just console") //只做了简单的打印
		debugger
	}
	z = inner1;
	function inner2() {
		console.log("just console") //只做了简单的打印
		debugger
	}
	inner2();
	function inner3() {
		console.log("just console") //只做了简单的打印
		debugger
	}
	return inner3
}
outer_d3("i am z")();
z();
复制代码

本组对比了三个例子,第一组和第二组稍有不同,第一个内部所有的inner最终都执行了,而第二组只执行了一个inner2,。运行结果就不贴图了,大家可以自己运行下,结果会发现如下现象:

  • 1、运行到outer_d1内部的各个inner时都会有Closure并且Closure的变量都是num和s;
  • 2、运行到outer_d2内部的inner2时也会有Closure,并且Closure的变量也都是num和s;
  • 3、运行到outer_d3内部的各个inner时没有Closure。

outer_d3没有产生闭包很好理解,因为内部函数都是简单打印,但是为什么outer_d1和outer_d2内部的inner2也都是简单打印,但是执行的时候也产生了闭包呢?

这是因为他们内部的inner1和inner3都引用了outer的私有变量,此时outer_d1和outer_d2就已经成为了一个闭包了,所以即使inner2什么都不打印,也已经在这个闭包环境中了,执行时也会看到产生的Clouser,形成的Clouser中的变量是outer被所有inner函数引用的局部私有变量。

总结

根据上面的四组对比案例,我们可以总结出闭包是函数在特定情况下执行产生的一种现象,这种现象产生的条件为:当一个函数(outer)运行时它的形参或者它的私有变量(num,s)被内部函数(inner)所引用。满足这个条件时,那么这个outer就会形成闭包,这个闭包所包含的变量为outer本身运行时被内部函数引用到的所有形参和局部变量。跟内部函数被return或者不return,被执行或者不执行没有关系。

关注下面的标签,发现更多相似文章
评论