前端面试中让你困惑的闭包、原型、原型链究竟是什么？

落日映苍穹つ 2022-01-27 01:39 125阅读 0赞

前段时间我朋友从上家公司离职，上周开始了前端面试(现在已经上班了)，一天我下班回到出租房时，他问我原型链是什么？一时半会我竟然也不知道从何说起能够让他很清楚的明白，又忽然想起之前我一个朋友也问过我闭包的问题，因此在这里记录解惑一下，下面我会以面试官和应聘者的口吻进行介绍理解......

![cf2b695434b243c1a436f303b402d0f2][]

# **一.闭包** #

面试官：什么是闭包？闭包你了解吗？

应聘者：闭包就是能够读取其他函数内部变量的函数。

面试官：通俗一点呢？

应聘者：通俗的讲就是函数a的内部函数b，被函数a外部的一个变量引用的时候，就创建了一个闭包。

面试官：是这样，没错，那你知道什么情况下会用到闭包吗？

应聘者：最常见的是函数封装的时候，再就是在使用定时器的时候，会经常用到...

面试官：那你简单写一个闭包吧

应聘者：

function a(){ var i=0; function b(){ alert(++i); } return b; } var c = a(); c();//外部的变量

面试官：你这个写法是正确的，那我衍生一下，你回答一下依次会弹出什么：

function a(){ var i=0; function b(){ i++; alert(i); } return b; } var c = a(); c();//？ c();//？ c();//？

应聘者：应该是会依次弹出1,2,3。

面试官：没错，你回答的很对，你知道其中的原理吗？能否解释一下

应聘者：好的，i是函数a中的一个变量，它的值在函数b中被改变，函数b每执行一次，i的值就在原来的基础上累加 1 。因此，函数a中的i变量会一直保存在内存中。

当我们需要在模块中定义一些变量，并希望这些变量一直保存在内存中但又不会 “污染” 全局的变量时，就可以用闭包来定义这个模块。

面试官：非常棒，你说的这是它的一个用处，你能说一下闭包的用处有哪些吗？

应聘者：它的最大用处有两个，一个是它可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

面试官：那我顺便再出个问题考考你吧，请看题：

![72e9e8ce42b2440e9b6dbc3ab0fce580][]

var num = new Array(); for(var i=0; i<4; i++){ num[i] = f1(i); } function f1(n){ function f2(){ alert(n); } return f2; } num[2](); num[1](); num[0](); num[3]();

应聘者：答案为2,1,0,3（这个时候你了解清楚闭包之后，这个答案应该就是随口而出），解释如下：

//创建数组元素 var num = new Array(); for(var i=0; i<4; i++){ //num[i] = 闭包;//闭包被调用了4次，就会生成4个独立的函数 //每个函数内部有自己可以访问的个性化(差异)的信息 num[i] = f1(i); } function f1(n){ function f2(){ alert(n); } return f2; } num[2](); //2 num[1](); //1 num[0](); //0 num[3](); //3

面试官：那你知道闭包的优缺点吗？

应聘者：

优点：

① 减少全局变量；

② 减少传递函数的参数量；

③ 封装；

缺点：

① 使用闭包会占有内存资源，过多的使用闭包会导致内存溢出等

面试官：正好你提到了内存泄漏，说说你的解决方法

应聘者：简单的说就是把那些不需要的变量，但是垃圾回收又收不走的的那些赋值为null，然后让垃圾回收走；

面试官：看来闭包已经难不倒你了，闭包就到这里告一段落了，接下来考考你原型和原型链。

# **二.原型和原型链** #

面试官：你好，接下来考考你原型和原型链

应聘者：好的，请问

面试官：你解释一下原型的概念吧！

应聘者： 原型(prototype)是function对象的一个属性，它定义了构造函数制造出的对象的公共祖先（公共的属性和方法）通过该构造函数产生的对象，可以继承改原型的属性和方法。 原型也是对象。

面试官：通俗一点呢？

应聘者：通俗的说，原型就是一个模板，更准确的说是一个对象模板

面试官：那你接着说一下原型链是什么？

应聘者：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数想指针(constructor)，而实例对象都包含一个指向原型对象的内部指针(\_\_proto\_\_)。如果让原型对象等于另一个类型的实例，此时的原型对象将包含一个指向另一个原型的指针(\_\_proto\_\_)，另一个原型也包含着一个指向另一个构造函数的指针(constructor)。假如另一个原型又是另一个类型的实例，如此层层递进，这就构成了实例与原型的链条。这就是原型链的基本概念；

面试官：你这个说太多了，简单一点

应聘者：就是利用原型让一个引用类型继承另一个引用类型的属性和方法；

举例说明： Student → Person → Object ，学生继承人类，人类继承对象类

面试官：我看你说到了继承，那你简单写一个原型链继承的例子

应聘者：好，如下

function Animal(name) { this.name = name } Animal.prototype.getName = function() { console.log(this.name) } var animal1 = new Animal('Kate') var animal2 = new Animal('Lucy') //对象animal1 和 animal2共享方法getName animal1.getName() animal2.getName()

面试官：ok，那我出个问题考考你，你告诉我结果，题目如下：

var A=function(){} A.prototype.n=1 var b=new A() A.prototype={ n:2, m:3 } var c=new A() console.log(b.n,b.m,c.n,c.m)//多少

应聘者：答案为1,undefined,2,3。原因是b继承A,所以b.n就为1，而m在A中找不到，所以为undefined，以此类推，c继承的时候A添加了n和m,所以c.n和c.m分别是2和3；

面试官：你回答的很棒，你知道null和undefined的区别吗？

应聘者：undefined是一个表示"无"的原始值，

null用来表示尚未存在的对象,

面试官：很正确，再出个问题给你，问题如下：

var F=function(){}; Object.prototype.a=function(){ console.log('a()') }; Function.prototype.b=function(){ console.log('b()') } var f=new F(); f.a()//？ f.b()//？ F.a()//？ F.b()//？

应聘者：答案应该为a()、报错找不到b这个函数、a()、b()。（如果你能瞬间回答出这个答案就代表你已经了解原型和原型链了）

面试官：看来原型原型链也难不倒你了，那面试就到这里告一段落了。

![626d9ca9ad3c4fa5b53db5748341ad6b][]

# **三.总结** #

闭包和原型原型链的介绍就到这里介绍了，如果上面有哪些解释有错误麻烦大家指正一下，谢谢了！

> **下面是小编整理的一整套系统的web前端学习教程，加群即可免费领取！  
> 自己整理了一份最全面前端学习资料,从最基础的HTML+CSS+JS \[炫酷特效，游戏，插件封装，设计模式\]到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴, 有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。  
> 加Q 裙：853597293（招募中）**

[cf2b695434b243c1a436f303b402d0f2]: http://p1.pstatp.com/large/pgc-image/cf2b695434b243c1a436f303b402d0f2
[72e9e8ce42b2440e9b6dbc3ab0fce580]: /images/20220127/7295f3afe5e94260af1cf310cb4b63f0.png
[626d9ca9ad3c4fa5b53db5748341ad6b]: http://p1.pstatp.com/large/pgc-image/626d9ca9ad3c4fa5b53db5748341ad6b