前端个人面试真题碾压互联网一线大厂

1.document.parentNode和document.parentnode

document.parentNode -> null （有属性但没有值）
document.parentnode -> undefined （没有属性）
如果说当前对象有这个属性，这个属性没有值是null；如果没有这个属性为undefined

2.let vs var区别

1.let没有变量提升（但在词法解析阶段也得知某一个变量是否是私有变量）
2.let不允许在相同的作用域下重复声明
3.let解决了JS中的暂时性死区问题
4.let创建的全局变量没有给window设置对应的属性
5.let会产生块级作用域
…

你理解的闭包是什么，优缺点？

解释：函数执行会形成一个全新私有作用域，保护里面的变量不收外界的干扰，这种保护机制就是闭包
官方解释：函数执行会形成一个私有栈内存作用域，函数不销毁，与里面的私有变量不冲突，并且也可以保存下来。

闭包就是保存和保护。保护私有变量与外界没有联系，不收干扰。保存就是保存私有变量不销毁。
标准回答技巧：

1.我封装了一个组件，大量运用了闭包。。。

2.我研究Jquery源码，发现就是闭包保护起来的

3.我在研究react源码，发现rudex就是利用了闭包
优缺点：过多的运用闭包会形成性能上的消耗，所以尽量减少闭包的使用。

3.实现弹出5个索引，说明原理

在html中快速书写多标签方式：button{按钮$}*5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>思考</title>
    <script src="1.js"></script>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        //需求弹出对应的索引
        var buttons = document.querySelectorAll('button');
         /*第一种方式 自定义属性（性价比最高的方式）
        循环给所有的按钮绑定事件，使用自定义属性，给每一个button都加一个自定义属性，叫myIndex，每一轮循环的时候都把当前它对应的索引存在myIndex自定义属性值，第一个button是0，第二个button是1，this是当前点的是谁，就是当前点的索引this.myIndex
       for (var i=0; i<buttons.length;i++){
           var item = buttons[i];
           item.myIndex = i;
           item.onclick =function(){
               alert(this.myIndex);
           }
       } */
     /*第二种方式 将var变成let （最简单的方式）
     for (let i=0; i<buttons.length;i++){
          let item = buttons[i];
           item.onclick =function(){
               alert(i);
               //如果使用var来定义，循环之后的结果都是5，点击的时候遇到function的方法里面i，i不是里面的私有变量，往上级作用域找，上级作用域就是全局，全局中循环下的i都变成了循环的结果5。
               /*专业解释不行的理由：（作用域链查找机制理解）单击每一个按钮执行下面的方法，方法执行会形成私有作用域，在私有作用域当中遇到变量i，i不是私有变量，往上级作用域找，上级作用域就是全局，全局中循环下的i都变成了循环的结果5 
               let原理类似闭包，形成块级作用域，都是每一轮循环，产生私有作用域，保存住当前i的值，供后期调取使用
           }
       } */
       /*第三种方式 自执行函数,闭包方式 */
       //分析：每一次循环产生一个闭包，每一次执行一个自执行函数，用n来接收，第一次循环，形成一个闭包，传一个0进来，第二轮循环i++，又执行自执行函数，形成一个闭包，传一个1，用n接收，n是私有的， })(i);这个i是全局下的i，自执行5次，形成5个闭包，buttons是全局的，全局下的某一个东西（item）的onclick属性，占用了自执行函数的堆（销毁的情况2种：return一个函数，外面接收不销毁，）只要一个小函数，一个堆，被外边引用了就不销毁了，所以私有变量n不销毁
      for (var i=0; i<buttons.length;i++){
          (function(n){
             var item = buttons[i];
             item.onclick =function(){
               alert(n);
                }
        })(i);
      }
         /*第四方式 forEach类数组方式
         [].forEach.call(buttons, (item, index) => {
             item.onclick = function (){
                 alert(index);
             }
         });*/
       </script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2f7liKcA-1579078780576)(./1579054561368.png)]

来源：oschina

链接：https://my.oschina.net/u/4550918/blog/4311363

标签

面试

javascript

react

prism

jquery