十道前端面試題第【08】篇

摘要：本篇分享了10道面試題——進程與線程、垃圾回收機制、瀏覽器生命週期、Iterator遍歷器、Generator函數、JS六種繼承、手寫Storage、手寫Map、DOM事件級別等。

---

1、什麼是進程？什麼是線程？

進程是資源分配的最小單位，線程是CPU調度的最小單位。形象類比，進程是火車，線程是車廂。

• 線程和進程的區別是什麼？
  
  

2、淺談垃圾回收機制

• 垃圾回收是自動完成的，我們不能強制執行或是阻止執行。
• 當對象是可達狀態時，它一定是存在於內存中的。
• 被引用與可訪問（從一個根）不同：一組相互連接的對象可能整體都不可達。
• 詳解“垃圾回收”機制
  
  

3、簡述瀏覽器頁面的生命週期階段

HTML 頁面的 頁面生命週期 包含三個重要事件：

• DOMContentLoaded —— 瀏覽器已完全加載 HTML，並構建了 DOM 樹，但像 <img> 和樣式表之類的外部資源可能尚未加載完成。
• load —— 瀏覽器不僅加載完成了 HTML，還加載完成了所有外部資源：圖片，樣式等。
• beforeunload/unload —— 當用戶正在離開頁面時。
  
  

4、談一談對 Iterator遍歷器的理解

Iterator的三個作用：

• 一是爲各種數據結構，提供一個統一的、簡便的訪問接口；
• 二是使得數據結構的成員能夠按某種次序排列；
• 三是 ES6 創造了一種新的遍歷命令for...of循環，Iterator 接口主要供for...of消費。

什麼是Iterator遍歷器? Iterator是怎麼工作的？原哪些原生數據結構，可以使用Iterator進行遍歷？如何判斷一個變量能不能使用Iterator進行遍歷？

• 深入學習 Iterator 遍歷器
  
  

5、談一談對 Generator 函數的理解

Generator 函數是 ES6 提供的一種異步編程解決方案。從語法上講，可以把Generator 函數理解成是一個狀態機，它封裝了多個內部狀態。執行 Generator 函數會返回一個遍歷器對象，也就是說，Generator 函數除了狀態機，還是一個遍歷器對象生成函數。返回的遍歷器對象，可以依次遍歷 Generator 函數內部的每一個狀態。

• 深入學習“Generator 函數”

function* hwGenerator() {
    yield 'hello';
    yield 'world';
    return 'ending';
}

6、羅列 JavaScript 實現繼承的方式（至少6種）

• JavaScript中的六種繼承方式
  
  

7、封裝 MyStorage 類，實現如下三個方法：

• setItem(key, val, expire)，存儲有時效的數據
• getItem(key)，獲取key所對應的值
• setDayItem(key, val)，存儲有時效的數據，每天24:00過期
  
  

8、自定義 MyMap 類，實現get/set/has/delete等方法。

9、DOM事件級別

• DOM事件級別：什麼是DOM0級事件、DOM2級事件、DOM3級事件？它們分別有什麼特點？
• DOM事件機制：事件流、事件捕獲、事件冒泡、事件委託
• 自定義DOM事件：如何給原生HTML元素自定義事件？

<button id="elem" onclick="alert('Click!');">Autoclick</button>

<script>
  let event = new Event("click");
  elem.dispatchEvent(event);
</script>

10、定義一個變量a，要求(a==1 && a==2) === true。

let i = 1;
var a = new Proxy({},{
     get:function () {
         return ()=>i++
     }
 })

---

本篇結束，感謝點贊！！！