前端练级之路——面向对象编程(闭包)

今天,我们来一起学习学习闭包吧。闭包是JavaScript中的一个重点,也是一个难点,很多高级应用都要依靠闭包实现。最重要的是,在前端面试中十家有八家都会问到闭包的问题。很多人面试的时候就被闭包虐了无数次,面试官们总是喜欢换着花样通过闭包来虐求职者,真怀疑是不是面试官都有一点虐待倾向。不过面试官们既然出招了,咱们也不能怂不是,大家都是两个眼睛一个鼻子,who怕who。来,这就开干。。。

一,什么是闭包?

要理解闭包,首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种:全局变量和局部变量。Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。先上几段非常简单的代码来理解一下变量的作用域;

小白的前端练级之路——面向对象编程(闭包)

但是我们有时候又需要得到函数内的局部变量,这要怎么办呢?很简单,我们可以在函数的内部,再定义一个函数。就像下面这样:
小白的前端练级之路——面向对象编程(闭包)

函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。但是反过来就不行,f2内部的局部变量,对f1就是不可见的。这就是Javascript语言特有的"链式作用域"结构(chain scope),子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。既然f2可以读取f1中的局部变量,那么只要把f2作为返回值,我们不就可以在f1外部读取它的内部变量了吗!继续上代码:

小白的前端练级之路——面向对象编程(闭包)

这段代码中的函数 f2 就是一个最简单的闭包了,那到底什么是闭包,闭包的定义又是什么呢?其实,简单来说,闭包就是有权访问另一个函数作用域中变量的函数,就是将函数内部和函数外部连接起来的一座桥梁。闭包是什么我们了解了,那闭包有什么用呢?闭包用处有很多,它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。让变量绐终保持在内存中,怎么理解这句话呢?这里就要涉及到JavaScript的垃圾回收机制了,什么是垃圾回收机制呢?当一个变量没有被任何对象所引用的时候,JavaScript就会把它回收以释放它占用的内存,举个例子,就像是前一集中了5000万的土豪士心,一夜暴富后不停地买买买,结果家里一下子多了很多无用的包装盒,这时候家政漂亮小妹看到了,心想这些包装盒又没用又占用家里的空间,于是漂亮小妹就把这些包装盒拿出去给扔了。这就是垃圾回收机制了。说了这么多,一起来做一道面试题 感 受一下

小白的前端练级之路——面向对象编程(闭包)

士心第一眼看到这道题的时候内心是崩溃的,好乱的感觉有没有。但是一步一步来分析,你会发现其实也不是太难,先来看看 a = fun(0);这里在控制台输出undefind,大家应该都懂,因为o没有定义。接下来,因为a指向了fun(0)返回的对象,也就是小白的前端练级之路——面向对象编程(闭包)

所以,a.fun(1)则是在执行fun(0)返回的对象中的fun方法,而fun方法又执行了一次f(m,n)这个方法,这个时候,闭包表现的机会来了,m的值是1,这个没问题 ,那么n呢,n的值是多少?我们前面学到了闭包的一大作用就是让变量的值始终保持在内存中,由于对象 a 一直保持着对变量 n 的引用,所以 n 并不会被垃圾回收机制释放,所以 n 的值就是我们一开始值行 fun(0) 传入的值 0;于是,a.fun(1) 相当于是执行了 fun(1,0), 所以a.fun(1)在控制台打印的结果就是:0,后面的a.fun(2)和a.fun(3)也是同样的道理,所以,第一行调用输出的结果就是:undefind 0 0 0,后面的b , c就算是小小的思考题 吧,只要注意 n 的值的变化,一定难不倒头条聪明的小伙伴们的。其实闭包相关的知识还有很多,比如闭包中this指向的问题 ,这也是面试中的一大考点。还有使用闭包有什么优缺点,在具体项目中使用闭包来做什么?

这些问题我们在以后的学习都会遇到。其实士心个人觉得,闭包更重要的是一种思想,一种写代码的风格,既然是思想,是风格,就需要在更多的项目实战中去体会,去打磨,这样对闭包的理解会更加地深刻,而不能一口气吃成一个大胖子。

最后,如果有想一起学习web前端,HTML5及JavaScript的可以来一下我的前端群733581373,好友都会在里面交流,分享一些学习的方法和需要注意的小细节,每天也会准时的讲一些前端的炫酷特效,及前端直播课程学习

如果想看到更加系统的文章和学习方法经验可以关注的微信号:‘web前端技术圈’或者‘webxh6’关注后回复‘2018’可以领取一套完整的学习视频

猜你喜欢

转载自blog.csdn.net/zwjweb/article/details/84105368