【面试】JS（二）

1 、前端中的事件流

HTML 中与 javscript 交互是通过事件驱动来实现的，例如鼠标点
击事件 onclik、页面的滚动事件 onscrol 等，可以向文档或者
文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什
么时候进行调用的，就需要了解一下“事件流”的概念。
什么是事件流：事件流描述的是从页面中接收事件的顺序,DOM2 级
事件流包括下面几个阶段。

1. 事件捕获阶段
2. 处于目标阶段
3. 事件冒泡阶段

addEventListener：addEventListener 是 DOM2 级事件新增的指
定事件处理程序的操作，这个方法接收 3 个参数：要处理的事件名、
作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是
true，表示在捕获阶段调用事件处理程序；如果是 false，表示 在冒
泡阶段调用事件处理程序。
IE 只支持事件冒泡
详细

2、事件委托

简介：事件委托指的是，不在事件的发生地（直接 dom）上设置监
听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可
以监听到子元素上事件的触发，通过判断事件发生元素 DOM 的类
型，来做出不同的响应。
举例：最经典的就是 ul 和 li 标签的事件监听，比如我们在添加事
件时候，采用事件委托机制，不会在 li 标签上直接添加，而是在
ul 父元素上添加。
好处：比较合适动态元素的绑定，新添加的子元素也会有监听函数，
也可以有事件触发机制。

3、JS 的 new 操作符做了哪些事情

new 操作符新建了一个空对象，这个对象原型指向构造函数的
protype，执行构造函数后返回这个对象。

4、=.改变函数内部 this 指针的指向函数（bind，aply，cal 的区

别）
通过 aply 和 cal 改变函数的 this 指向，他们两个函数的第一个
参数都是一样的表示要改变指向的那个对象，第二个参数，aply 是
数组，而 cal 则是 arg1,arg2.这种形式。通过 bind 改变 this 作
用域会返回一个新的函数，这个函数不会马上执行。

5、JS 的各种位置 clientHeight,scrolHeight,ofsetHeight ,以及scrollTop, offsetTop,clientTop 的区别？

clientHeight：表示的是可视区域的高度，不包含 border 和滚动条
ofsetHeight： 表 示 可 视 区 域 的 高 度 ， 包 含 了 border 和 滚 动 条
scrolHeight：表示了所有区域的高度，包含了因为滚动被隐藏的部分。
clientTop：表示边框 border 的厚度，在未指定的情况下一般为
0scrolTop：滚动后被隐藏的高度，获取对象相对于由 ofsetParent 属
性指定的父坐标(cs 定位的元素或 body 元素)距离顶端的高度。

6、JS 拖拽功能的实现

首先是三个事件，分别是 mousedown，mousemove，mouseup 当鼠
标点击按下的时候，需要一个 tag 标识此时已经按下，可以执行
mousemove 里面的具体方法。clientX，clientY 标识的是鼠标的坐标，
分别标识横坐标和纵坐标，并且我们用 ofsetX 和 ofsetY 来表示元素的
元素的初始坐标，移动的举例应该是：鼠标移动时候的坐标-鼠标按下去
时候的坐标。也就是说定位信息为：鼠标移动时候的坐标-鼠标按下去时
候的坐标+元素初始情况下的 ofetLeft.还有一点也是原理性的东西，也就
是拖拽的同时是绝对定位，我们改变的是绝对定位条件下的 left 以及 top
等值。补充：也可以通过 html5 的拖放（Drag 和 drop）来实现

7、垃圾回收机制

8.For 循环与 map 循环有什么区别

For 遍历对象自身的和继承可枚举的属性，也就是说会包括哪些原型链上
的属性
Map 方法不会对空数组进行检测，map 会返回一个新数组，不会对原数
组产生影响

9.重绘和回流是什么

回流：当 render te 中的一部分或者全部因为元素的规模尺寸，布局，
隐藏等改变而需要重新构建，这就叫回流，每个页面至少需要一次回流，
就是在页面第一次加载的时候，这时候一定会发生回流，因为要构建
render te
在回流的时候，浏览器会使渲染树中收到影响的部分失效，并重新构造
这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，
这就是重绘
当 render te 中的一些元素需要更新属性，而这些属性只是影响元素的
外观，不会影响布局，就叫重绘

10、http 是什么？有什么特点

http 叫做超文本传输协议，是互联网应用最广泛的一种网络协议
特点：基于请求-响应的模式 无状态保存 无连接

11.HTTP 协议和 HTTPS 区别

http 是超文本传输协议，信息是明文传输，https 是具有安全性的 sl 解
密传输协议
http 和 https 连接方式完全不同，端口也不同，http 是 80，https 是 43
http 的连接很简单，是无状态的，https 协议是由 sll+http 协议构建的
可进行加密传输，身份认证的网络协议，比 http 协议安全

12、箭头函数与普通函数的区别

箭头函数是匿名函数，不能作为构造函数，不能使用 new
箭头函数不能绑定 arguments，要用 rest 参数解决
箭头函数没有原型属性
箭头函数的 this 永远指向其上下文的 this，
箭头函数不能绑定 this，会捕获其所在的上下文的 this 值，作为自己的
this 值

13.什么是 js 内存泄露？

内存泄漏是指一块被分配的内存既不能使用又不能回收，直到浏览器进
程结束
释放内存的方法：赋值为 nul

14、Js 的函数节流和函数防抖的区别

函数节流是指一定时间内 js 方法只执行一次。
函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一
次
函数节流是 声明一个变量当标志位，记录当前代码是否在执行，如果正
在执行，取消这次方法执行，直接 return，如果空闲，正常触发方法执
行
函数防抖是需要一个延时器来辅助实现，延迟执行需要执行的代码，如
果方法多次触发，把上次记录的延迟执行代码用 cleartimeout 清除掉，
重新开始，如果计时完毕，没有方法来访问触发，则执行代码、