2022年大厂offer必备前端面试题整理——Javascript 相关(3)

一生的最爱

Allen：2022年大厂offer必备前端面试题整理——HTML、CSS、浏览器相关（1）
Allen：2022年大厂offer必备前端面试题整理——HTML、CSS、浏览器相关（2）
Allen：2022年大厂offer必备前端面试题整理——HTML、CSS、浏览器相关（3）
Allen：2022年大厂offer必备前端面试题整理——HTML、CSS、浏览器相关（4）
Allen：2022年大厂offer必备前端面试题整理——Javascript 相关（1）
Allen：2022年大厂offer必备前端面试题整理——Javascript 相关(2)


22.补充 get 和 post 请求在缓存方面的区别


post/get 的请求区别，具体不再赘述。
补充补充一个 get 和 post 在缓存方面的区别：get 请求类似于查找的过程，用户获取数据，可以不用每次都与数据库连接，所以可以使用缓存。
post 不同，post 做的一般是修改和删除的工作，所以必须与数据库交互，所以不能使用缓存。因此 get 请求适合于请求缓存。

23.说一下闭包


一句话可以概括：闭包就是能够读取其他函数内部变量的函数，或者子函数在外调用， 子函数所在的父函数的作用域不会被释放

24.说说前端中的事件流


HTML 中与 javascript 交互是通过事件驱动来实现的，例如鼠标点击事件 onclick、页面的滚动事件 onscroll 等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。
什么是事件流：事件流描述的是从页面中接收事件的顺序,DOM2 级事件流包括下面几个阶段。
事件捕获阶段处于目标阶段事件冒泡阶段
addEventListener：addEventListener 是 DOM2 级事件新增的指定事件处理程序的操作，这个方法接收 3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是 false，表示在冒泡阶段调用事件处理程序。
IE 只支持事件冒泡。

25.说一下事件委托


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

26.JS 的 new 操作符做了哪些事情


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

27.改变函数内部 this 指针的指向函数（bind，apply，call 的区别）


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

28.JS 的各种位置，比 clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop 的区别？


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

29.JS 拖拽功能的实现


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

30.JS 中的垃圾回收机制


必要性：由于字符串、对象和数组没有固定大小，所有当他们的大小已知时，才能对他们进行动态的存储分配。JavaScript 程序每次创建字符串、数组或对象时，解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存，最终都要释放这些内存以便他们能够被再用，否则，JavaScript 的解释器将会消耗完系统中所有可用的内存，造成系统崩溃。
这段话解释了为什么需要系统需要垃圾回收，JS 不像 C/C++，他有自己的一套垃圾回收机制（Garbage Collection）。JavaScript 的解释器可以检测到何时程序不再使用一个对象了，当他确定了一个对象是无用的时候，他就知道不再需要这个对象，可以把它所占用的内存释放掉了。例如：
var a="hello world"; var b="world";
var a=b;
//这时，会释放掉"hello world"，释放内存以便再引用垃圾回收的方法：
标记清除、计数引用。

标记清除
这是最常见的垃圾回收方式，当变量进入环境时，就标记这个变量为”进入环境“,从逻辑上讲，永远不能释放进入环境的变量所占的内存，永远不能释放进入环境变量所占用的内存，只要执行流程进入相应的环境，就可能用到他们。当离开环境时，就标记为离开环境。
垃圾回收器在运行的时候会给存储在内存中的变量都加上标记（所有都加），然后去掉环境变量中的变量，以及被环境变量中的变量所引用的变量（条件性去除标记），删除所有被标记的变量，删除的变量无法在环境变量中被访问所以会被删除，最后垃圾回收器，完成了内存的清除工作，并回收他们所占用的内存。

引用计数法
另一种不太常见的方法就是引用计数法，引用计数法的意思就是每个值没引用的次数， 当声明了一个变量，并用一个引用类型的值赋值给改变量，则这个值的引用次数为 1,；相反的，如果包含了对这个值引用的变量又取得了另外一个值，则原先的引用值引用次数就减 1，当这个值的引用次数为 0 的时候，说明没有办法再访问这个值了，因此就把所占的内存给回收进来，这样垃圾收集器再次运行的时候，就会释放引用次数为 0 的这些值。
用引用计数法会存在内存泄露，下面来看原因：
function problem() {
var objA = new Object(); var objB = new Object();
objA.someOtherObject = objB; objB.anotherObject = objA;
}
在这个例子里面，objA 和 objB 通过各自的属性相互引用，这样的话，两个对象的引用次数都为 2，在采用引用计数的策略中，由于函数执行之后，这两个对象都离开了作用域，函数执行完成之后，因为计数不为 0，这样的相互引用如果大量存在就会导致内存泄露。
特 别 是 在 DOM 对 象 中 ， 也 容 易 存 在 这 种 问 题 ： var
element=document.getElementById （ ’‘ ）； var myObj=new
Object();
myObj.element=element; element.someObject=myObj;
这样就不会有垃圾回收的过程。