十道前端面试题第【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++
     }
 })

---

本篇结束，感谢点赞！！！