你不知道的N条前端面试题（二）

这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战

1. 闭包是什么，有什么特性？有什么负面影响？

   • 函数执行后返回结果是一个内部函数，并被外部变量所引用，如果内部函数持有被执行函数作用域的变量，即形成了闭包；
   • 特性：1.可以从内部函数访问外部函数的作用域中的变量，且访问到的变量长期驻扎在内存中，可供之后使用；2.避免变量污染全局；3.把变量存到独立的作用域，作为私有成员存在；
   • 影响：1.对内存消耗有负面影响；因内部函数保存了对外部变量的引用，导致无法被垃圾回收，增大内存使用量，所以使用不当会导致内存泄漏；2.对处理速度有负面影响；闭包的层级决定了引用的外部变量在查找时经过的作用域链长度；3.可能获取到意外的值；
   • 应用场景：1.模块封装，防止变量污染全局；2.在循环中创建闭包，防止取到意外的值；3.防抖节流；4.定时器；5.惰性处理；

2. 如何阻止事件冒泡和默认行为？

   • 阻止事件冒泡：w3c：event.stopPropagation()；IE：event.cancelBubble = true；
   • 取消默认行为：w3c：event.preventDefault()；IE：event.returnValue = false；

3. 查找、添加、删除、移动 DOM 节点的方法

   • 查找：getElementById() getElementsByTagName() getElementsByClassName() querySelector() querySelectorAll()
   • 添加：createElement() appendChild()
   • 删除：removeChild()

     const list = documet.getElementById('myList')
     list.removeChild(list.childNodes[0])
     

   • 移动：appendChild()

     const p1 = document.getElementById('p1')
     div2.appendChild(p1)
     

4. 如何减少 DOM 操作？

   • 缓存 DOM 查询结果
   • 多次 DOM 操作，合并到一次插入

5. 解释 jsonp 的原理，为何它不是真正的 ajax ？

   • 利用 <script> 标签没有跨域限制的“漏洞”来达到与第三方通讯的目的。当需要通讯时，本站脚本创建一个 <script> 元素，地址指向第三方的 API 网址，形如：<script src="http://www.example.com/api?param=1"></scirpt>，并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。第三方产生的响应为 json 数据的包装（故称之为 jsonp），形如：callback({ "name": "hax", "gender": "Male" })，浏览器会调用 callback 回调函数，并传递解析后 json 对象作为参数，完成一次数据交互。

     <script>
         window.abc = function(data) {
             console.log(data)
         }
     </script>
     <script src="http://localhost:8000/jsonp.js?username=xxx&callback=abc"></script>
     
     // jsonp.js
     abc(
         { name: 'xxx' }
     )
     

   link script img iframe a 这些标签的外链是不受同源策略的限制；

6. document load 和 ready 的区别？

   • load：页面的全部资源加载完才会执行，包括图片、视频等
   • ready：DOM 渲染完即可执行，此时图片、视频还可能没有加载完

7. == 和 === 的不同

   • == 会尝试类型转换
   • === 严格相等

8. 函数声明和函数表达式的区别?

   • 函数声明：function fn() {...}
   • 函数表达式：const fn = function() {...}
   • 函数声明会在代码执行前预加载，而函数表达式不会

9. new Object() 和 Object.create() 的区别?

   • {} 等同于 new Object()，原型都是 Object.prototype
   • Object.create(null) 没有原型
   • Object.create({...}) 可指定原型