前端面试总结（看看那些是你不知道的）

一、什么是闭包？闭包的工作原理？闭包的优缺点？

       闭包最简单的理解就是在函数内部还有函数，为了解决JavaScript的局部变量问题,如何从函数外部访问到函数内部的局部变量。想了解更多请参考：什么是闭包？闭包的工作原理？优缺点

二、JS的垃圾回收机制？       

Js具有自动垃圾回收机制。垃圾收集器会按照固定的时间间隔周期性的执行。

JS中最常见的垃圾回收方式是标记清除。

工作原理：是当变量进入环境时，将这个变量标记为“进入环境”。当变量离开环境时，则将其标记为“离开环境”。标记“离开环境”的就回收内存。

工作流程：

      1.    垃圾回收器，在运行的时候会给存储在内存中的所有变量都加上标记。

      2.    去掉环境中的变量以及被环境中的变量引用的变量的标记。

      3.    再被加上标记的会被视为准备删除的变量。

      4.    垃圾回收器完成内存清除工作，销毁那些带标记的值并回收他们所占用的内存空间。

引用计数 方式

工作原理：跟踪记录每个值被引用的次数。

工作流程：

      1.    声明了一个变量并将一个引用类型的值赋值给这个变量，这个引用类型值的引用次数就是1。

      2.    同一个值又被赋值给另一个变量，这个引用类型值的引用次数加1.

      3.    当包含这个引用类型值的变量又被赋值成另一个值了，那么这个引用类型值的引用次数减1.

      4.    当引用次数变成0时，说明没办法访问这个值了。

      5.    当垃圾收集器下一次运行时，它就会释放引用次数是0的值所占的内存。

但是循环引用的时候就会释放不掉内存。循环引用就是对象A中包含另一个指向对象B的指针，B中也包含一个指向A的引用。

因为IE中的BOM、DOM的实现使用了COM，而COM对象使用的垃圾收集机制是引用计数策略。所以会存在循环引用的问题。

     解决：手工断开js对象和DOM之间的链接。赋值为null。IE9把DOM和BOM转换成真正的JS对象了，所以避免了这个问题。

三、什么会造成内存泄漏？

      虽然有垃圾回收机制但是我们编写代码操作不当还是会造成内存泄漏。

1.意外的全局变量引起的内存泄漏。

    原因：全局变量，不会被回收。

    解决：使用严格模式避免。

2. 闭包引起的内存泄漏

    原因：闭包可以维持函数内局部变量，使其得不到释放。

    解决：将事件处理函数定义在外部，解除闭包,或者在定义事件处理函数的外部函数中，删除对dom的引用。

3. 没有清理的DOM元素引用

    原因：虽然别的地方删除了，但是对象中还存在对dom的引用

    解决：手动删除。

4.被遗忘的定时器或者回调

    原因：定时器中有dom的引用，即使dom删除了，但是定时器还在，所以内存中还是有这个dom。

    解决：手动删除定时器和dom。

5.子元素存在引用引起的内存泄漏

   原因：div中的ul li  得到这个div，会间接引用某个得到的li，那么此时因为div间接引用li，即使li被清空，也还是在内存中，并且 只要li不被删除，他的父元素都不会被删除。

  解决：手动删除清空。

四、解释原型与原型链？

    如果面试官问到，对于我基本是举例说明了，这里提供他人的博客敬请参照：https://www.jianshu.com/p/dee9f8b14771

五、JS事件机制？

JS的事件机制有事件流（三阶段：事件捕获，目标阶段、事件冒泡）、事件对象，事件处理程序等，具体的请参考以下：

https://www.cnblogs.com/lazychen/p/5664788.html

https://www.jianshu.com/p/916230ad9229

六、CSS盒模型？box-sizing属性

CSS盒模型：由elements（HTML标签）+ padding + border + margin构成；

box-sizing: content-box | border-box | inherit;

content-box ： 默认值，宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框；（就是说padding与border不影响元素的内容区）；

border-box ：宽度和高度分别应用到元素的内容框。在宽度和高度之内绘制元素的内边距和边框；（就是说padding与border会影响元素的内容区，需要从原来设定的宽高中减去padding与border才是真正的内容区的宽高）；

inherit：从父级继承box-sizing属性的值。

 六、深拷贝、浅拷贝？

 1.浅拷贝：简单的来说，浅拷贝就是增加了一个'指针'指向已存在的内存（JavaScript并没有指针的概念，这里只是用于辅助说明），浅拷贝只是拷贝了内存的地址，子类的属性指向的是父类属性的内存地址，当子类的属性修改后，父类的属性也会随之被修改。

   2.深拷贝：深拷贝就是增加一个“指针”，并申请一个新的内存，并且让这个新增加的“指针”指向这个新的内存地址，使用深拷贝，在释放内存的时候就不会像浅拷贝一样出现重复释放同一段内存的错误，当我们需要复制原对象而又不能修改元对象的时候，深拷贝就是一个，也是唯一的选择。

只拷贝第一级数组元素（数组中只有string,boolean,number等类型的值）：

a. 直接遍历一个数组：

var array = [1, 2, 3, 4];
function copy (array) {
   let newArray = []
   for(let item of array) {
      newArray.push(item);
   }
   return  newArray;
}
var copyArray = copy(array);
copyArray[0] = 100;
console.log(array); // [1, 2, 3, 4]
console.log(copyArray); // [100, 2, 3, 4]

b. slice( 该方法返回一个从已有的数组中截取一部分元素片段组成的新数组,不改变原来的数组！，不带参数默认返回跟原数组长度相同的新数组)；

c. concat(该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本)。

 

以下是实现复杂对象深拷贝的两种方法：

1.通过JSON.stringify()跟JSON.parse()实现：

function deepClone(obj){
    let _obj = JSON.stringify(obj),
        objClone = JSON.parse(_obj);
    return objClone
}    
let a=[0,1,[2,3],4],
    b=deepClone(a);
a[0]=1;
a[2][0]=1;
console.log(a,b);

2.通过函数递归调用实现： 

 const obj1 = [
            {
                id:1,
                name:'javascript',
                work: {
                    adderss:'知春路1号',
                    phone:'2132412',
                    like: {
                        fun:function() {
                            return 'plays'
                        },
                        option:'work',
                    },
                    play:['1',{
                        option:function() {
                            this.name ='1'
                        }
                    }]
                }
            }, 
            {
                id:2,
                name:'javascript2',
                work: {
                    adderss:'知春路2号',
                    phone:'suhsuhiuh',
                    like: {
                        fun2:function() {
                            return 'sifhiehu'
                        },
                        option:'wodfefewfewrk',
                    }
                }
            },
        ];
        function copy(obj) {
            let newObj = obj.constructor === Array ? [] : {};
            if(typeof obj !== 'object') return;
            for(let i in obj) {
                newObj[i] = typeof obj[i] === 'object' ? copy(obj[i]) : obj[i];
            }
            return newObj;
        }
        let obj2 = copy(obj1);
        obj2[1].name = '张三';
        console.log(obj1,obj2);

 

 

具体请参考：

 https://blog.csdn.net/gongzhongnian/article/details/77335974   

https://blog.csdn.net/weixin_37719279/article/details/81240658

 

以上是个人的总结，不一定对呦，敬请参考；有什么错误请告知。