關于前端面試題的案例分析

小編給大家分享一下關于前端面試題的案例分析，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

1、什么是閉包？

概念

閉包是一個過程，它記住了聲明scope下的變量，在別的scope下，調用函數時 ，依然可以讀取到這些變量。

原理分析

function outer(){
let n = 1;
function inner(){
  console.log(n);
}
return inner;
}
const fn = outer();
fn();

以上案例，提出來的問題是:outer執行結束之后，函數空間消亡了，inner的n為什么還有值？原理是什么？

在我的理解里，閉包可以想象成一個膠囊(persistent lexical scope data \ back pack)，包裹住了變量n粘在函數inner上，一起返回給了fn，在memory中開辟一個存儲空間放置這個膠囊。如果代碼中有fn在執行，它會一直訪問這個膠囊里的n值。什么時候不再有fn了，什么時候這個膠囊脫落掉消亡。

用途

兩個用途：不污染global的變量池和變量值的暫存

2、 let和var的區別，let的產生背景？

區別

這兩個關鍵詞的最關鍵的區別是scope，var是認定的scope不包含for，if等這類函數塊的，let把for，if等函數塊認定為一個scope。

目的

有一些需要在函數塊中記住變量屬性的表達式，ES5需要加上花括號，這樣子嵌套的層級會很多。ES6的時候就發明了let來簡化代碼。

3、 var的變量提升底層原理是什么？

本質上是由JS編譯過程導致的。

代碼的執行分為兩個步驟

對聲明進行編譯——為var或function分配地址內存。

執行——進行正常的賦值。

例如var a = 2; 編譯器先不會管a = 2這一賦值步驟。它最先要做的是把var a編譯掉，而運算操作留在原地。聲明在編譯角度上被移動到了作用域的頂端。這就是提升的底層原理。

拓展話題——TDZ暫時死區

aVar的值符合提升的原則。aLet就有點意思了，它拋出來的錯誤實際上就是暫時死區錯誤。簡單來說，從聲明到到let的運算步驟為止的這段時空被鎖死，外界在此期間尋求訪問，不被允許。

4、 模塊化思想

為什么要使用模塊化？

模塊化思想即最小暴露原則。隱藏掉別人不需要知道的代碼細節，僅提供需要使用的API。保護代碼的安全性和可維護性。

如何模塊化？

書寫一段模塊的要點有二：1、要使用閉包原理。2、函數至少被調用執行過一次。

方法一：工廠模式

function module(){
   let text = "baz";
   let publicAPI = {
       baz: fuction (){
           console.log(text);
       }
   }
   
   return publicAPI;
}
var foo = module();
foo.bar();

方法二：單例模式（IIFE）

var foo = (function module(){
    let text = "baz";
    let publicAPI = {
        baz: function(){
     console.log(text);
    }
    return pubilcAPI;
 }
})();
foo.bar()

看完了這篇文章，相信你對關于前端面試題的案例分析有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！