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

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

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

一.闭包

面试官:什么是闭包?闭包你了解吗?

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

面试官:通俗一点呢?

应聘者:通俗的讲就是函数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变量会一直保存在内存中。

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

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

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

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

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

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()。(如果你能瞬间回答出这个答案就代表你已经了解原型和原型链了)

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

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

三.总结

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

在这里我相信有很多想要学习前端的小伙伴,我自己是一名从事了多年开发的前端老架构师,辞职目前在做自己的前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的前端学习干货,从最基础的html到js各种框架都有整理,送给每一位前端小伙伴

想要获取的可以关注我的头条号并在后台私信我:【 前端 】,即可免费获取。


分享到:


相關文章: