前端面試中讓你困惑的閉包原型原型鏈究竟是什麼？

前段時間我朋友從上家公司離職，上週開始了前端面試(現在已經上班了)，一天我下班回到出租房時，他問我原型鏈是什麼？一時半會我竟然也不知道從何說起能夠讓他很清楚的明白，又忽然想起之前我乙個朋友也問過我閉包的問題，因此在這裡記錄解惑一下，下面我會以面試官和應聘者的口吻進行介紹理解......

一.閉包

面試官：什麼是閉包？閉包你了解嗎？

應聘者：閉包就是能夠讀取其他函式內部變數的函式。

面試官：通俗一點呢？

應聘者：通俗的講就是函式a的內部函式b，被函式a外部的乙個變數引用的時候，就建立了乙個閉包。

面試官：是這樣，沒錯，那你知道什麼情況下會用到閉包嗎？

應聘者：最常見的是函式封裝的時候，再就是在使用定時器的時候，會經常用到...

面試官：那你簡單寫乙個閉包吧

應聘者：

function
a()     
returnb;}
var c =a();
c();
//外部的變數

面試官：你這個寫法是正確的，那我衍生一下，你回答一下依次會彈出什麼：

function
a()     
returnb;}
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++)
function
f1(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++)
function
f1(n)
return
f2;}
num[2]();  //
2num[1]();  //
1num[0]();  //
0num[3]();  //
3

面試官：

那你知道閉包的優缺點嗎？

應聘者：

優點：① 減少全域性變數；

② 減少傳遞函式的參數量；

③ 封裝；

缺點：① 使用閉包會占有記憶體資源，過多的使用閉包會導致記憶體溢位等

面試官：正好你提到了記憶體洩漏，說說你的解決方法

應聘者：簡單的說就是把那些不需要的變數，但是垃圾**又收不走的的那些賦值為null，然後讓垃圾**走；

面試官：看來閉包已經難不倒你了，閉包就到這裡告一段落了，接下來考考你原型和原型鏈。

二.原型和原型鏈

面試官：你好，接下來考考你原型和原型鏈

應聘者：好的，請問

面試官：你解釋一下原型的概念吧！

應聘者：每個物件都會在其內部初始化乙個屬性，就是prototype(原型)。

面試官：通俗一點呢？

應聘者：通俗的說，原型就是乙個模板，更準確的說是乙個物件模板

面試官：那你接著說一下原型鏈是什麼？

應聘者：當我們訪問乙個物件的屬性時，如果這個物件內部不存在這個屬性，那麼他就會去prototype裡找這個屬性，這個prototype又會有自己的prototype，於是就這樣一直找下去，也就是我們平時所說的原型鏈的概念。

面試官：你這個說太多了，簡單一點

應聘者：就是利用原型讓乙個引用型別繼承另乙個引用型別的屬性和方法；

舉例說明：student → person → object ，學生繼承人類，人類繼承物件類

面試官：我看你說到了繼承，那你簡單寫乙個原型鏈繼承和建構函式繼承的例子

應聘者：好，如下

function
animal(name) 
animal.prototype.getname = function
() var animal1 = new animal('kate')
var animal2 = new animal('lucy')
//物件animal1 和 animal2共享方法getname
animal1.getname()
animal2.getname()

//
父類：人
function
person () 
//子類：學生，繼承了「人」這個類
function
student(studentid) 
var stu1 = new student(1001);
console.log(stu1.emotion); 
//['喜', '怒', '哀', '樂']

面試官：ok，那我出個問題考考你，你告訴我結果，題目如下：

var a=function
(){}
a.prototype.n=1
var b=new
a()a.prototype=
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
();function.prototype.b=function
()var f=new
f();
f.a()//？
f.b()//
？f.a()//
？f.b()//
？

應聘者：答案應該為a()、報錯找不到b這個函式、a()、b()。（如果你能瞬間回答出這個答案就代表你已經了解原型和原型鏈了）

面試官：看來原型原型鏈也難不倒你了，那面試就到這裡告一段落了。

三.總結

閉包和原型原型鏈的介紹就到這裡介紹了，如果上面有哪些解釋有錯誤麻煩大家指正一下，謝謝了！附加一下我上文提到的朋友：

前端面試中讓你困惑的閉包原型原型鏈究竟是什麼？

前端面試系列 JS中的閉包來龍去脈

前端面試題變數提示，閉包作用域

前端面試指南如何讓你的簡歷脫穎而出？

前端面試中讓你困惑的閉包 原型 原型鏈究竟是什麼？

前端面試系列 JS中的閉包 來龍去脈

前端面試題 變數提示，閉包 作用域

前端面試指南 如何讓你的簡歷脫穎而出？

相關推薦

前端面試中讓你困惑的閉包原型原型鏈究竟是什麼？

前端面試系列 JS中的閉包來龍去脈

前端面試題變數提示，閉包作用域

前端面試指南如何讓你的簡歷脫穎而出？