前端面试

最优解前端面试题答法

1. JS事件冒泡和事件代理（委托）

1. 事件冒泡

会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止。

<body>    <div id="parentId"> 查看消息信息 <div id="childId1"> 删除消息信息 </div>    </div></body><script>    let parent = document.getElementById('parentId');    let childId1 = document.getElementById('childId1');    parent.addEventListener('click', function () {        alert('查看消息信息');    }, false);    childId1.addEventListener('click', function () {        alert('删除消息信息');    }, false);     // 如出发消息列表里的删除按钮， 先执行了删除操作， 在向上冒泡执行‘ 查看消息信息’。        // 打印：删除消息信息 查看消息信息</script>

原生js取消事件冒泡

   try{

      e.stopPropagation();//非IE浏览器

    }

    catch(e){

        window.event.cancelBubble = true;//IE浏览器

    }

vue.js取消事件冒泡

<div @click.stop="doSomething($event)">vue取消事件冒泡</div>

2. 事件代理（委托）

a. 为什么要用事件委托：

比如ul下有100个li，用for循环遍历所有的li，然后给它们添加事件，需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；

如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；

b. 事件委托的原理

事件委托：利用事件冒泡的特性，将本应该注册在子元素上的处理事件注册在父元素上，这样点击子元素时发现其本身没有相应事件就到父元素上寻找作出相应。这样做的优势有：

1、减少DOM操作，提高性能。

2、随时可以添加子元素，添加的子元素会自动有相应的处理事件。

<div id="box">

        <input type="button" id="add" value="添加" />

        <input type="button" id="remove" value="删除" />

        <input type="button" id="move" value="移动" />

        <input type="button" id="select" value="选择" />

 </div>  

方式一：需要4次dom操作

    window.onload = function () {        

var Add = document.getElementById("add");        

var Remove = document.getElementById("remove");        

var Move = document.getElementById("move");        

var Select = document.getElementById("select");        

Add.onclick = function () {            alert('添加');        };        Remove.onclick = function () {            alert('删除');        };        Move.onclick = function () {            alert('移动');        };        Select.onclick = function () {            alert('选择');        }    }

方式二：委托它们父级代为执行事件

window.onload = function(){

            var oBox = document.getElementById("box");

            oBox.onclick = function (ev) {

                var ev = ev || window.event;

                var target = ev.target || ev.srcElement;

                if(target.nodeName.toLocaleLowerCase() == 'input'){

                    switch(target.id){

                        case 'add' :

                            alert('添加');

                            break;

                        case 'remove' :

                            alert('删除');

                            break;

                        case 'move' :

                            alert('移动');

                            break;

                        case 'select' :

                            alert('选择');

                            break;

                    }

                }

            }


}

用事件委托就可以只用一次dom操作就能完成所有的效果，比上面的性能肯定是要好一些的

3. 事件捕获

会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止。

    <div> <button>            <p>点击捕获</p>        </button></div>    <script>        var oP = document.querySelector('p');        var oB = document.querySelector('button');        var oD = document.querySelector('div');        var oBody = document.querySelector('body');        oP.addEventListener('click', function () {            console.log('p标签被点击')        }, true);        oB.addEventListener('click', function () {            console.log("button被点击")        }, true);        oD.addEventListener('click', function () {            console.log('div被点击')        }, true);        oBody.addEventListener('click', function () {            console.log('body被点击')        }, true);    </script>    点击<p>点击捕获</p>，打印的顺序是：body=>div=>button=>p</body>

流程：先捕获，然后处理，然后再冒泡出去。

2. 原型链

1. 原型对象诞生原因和本质

为了解决无法共享公共属性的问题，所以要设计一个对象专门用来存储对象共享的属性，那么我们叫它「原型对象」

原理：构造函数加一个属性叫做prototype，用来指向原型对象，我们把所有实例对象共享的属性和方法都放在这个构造函数的prototype属性指向的原型对象中，不需要共享的属性和方法放在构造函数中。实现构造函数生成的所有实例对象都能够共享属性。

构造函数：私有属性

原型对象：共有属性

2. 彼此之间的关系

构造函数中一属性prototype：指向原型对象，而原型对象一constructor属性，又指回了构造函数。


每个构造函数生成的实例对象都有一个proto属性，这个属性指向原型对象。

那原型对象的_proto_属性指向谁？-> null

3. 原型链是什么？

顾名思义，肯定是一条链，既然每个对象都有一个_proto_属性指向原型对象，那么原型对象也有_proto_指向原型对象的原型对象，直到指向上图中的null，这才到达原型链的顶端。

4. 原型链和继承使用场景

原型链主要用于继承，实现代码复用。因为js算不上是面向对象的语言，继承是基于原型实现而不是基于类实现的，

a. 判断函数的原型是否在对象的原型链上

对象 instanceof 函数（不推荐使用）

b. 创建一个新对象，该新对象的隐式原型指向指定的对象

Object.create(对象)

var obj = Object.create(Object.prototype);

obj.__proto__ === Object.prototype

c. new的实现

d. es6的class A extends B

因为es6-没有类和继承的概念。js实现继承本质是把js中的对象构造函数在自己的脑中抽象成一个类，然后使用构造函数的protptype属性封装出一个类（另一个构造函数），使之完美继承前一构造函数的所有属性和方法。因为构造函数能new出一个具体的对象实例，这就在js中实现了现代化的面向对象和继承。

3. 闭包和垃圾回收机制

闭包的概念

　　function f1(){　　　　var n=999;　　　　function f2(){　　　　　　alert(n);　　　　}　　　　return f2;　　}　　var result=f1();　　result(); // 999

在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。这就是Javascript语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。

既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗！

作用：一是前面提到的可以读取函数内部的变量，二是让这些变量的值始终保持在内存中，主要用来封装私有变量, 提供一些暴露的接口

垃圾回收

**垃圾回收机制：JavaScript 引擎中有一个后台进程称为垃圾回收器，它监视所有对象，并删除那些不可访问的对象

**

**注意点：**对于内存的管理，Javascript与C语言等底层语言JavaScript是在创建变量（对象，字符串等）时自动进行了分配内存，并且在不使用它们时“自动”释放。释放的过程称为垃圾回收。这个“自动”是混乱的根源，并让JavaScript（和其他高级语言）开发者错误的感觉他们可以不关心内存管理，

实现的原理：由于 f2 中引用了相对于自己的全局变量 n ，所以 f2 会一直存在内存中，又因为 n 是 f1 中的局部变量，也就是说 f2 依赖 f1，所以说 f1 也会一直存在内存中，并不像普通函数那样，调用后变量便被垃圾回收了。

所以说，在setTimeout中的函数引用了外层 for循环的变量 i，导致 i 一直存在内存中，不被回收，所以等到JS队列执行函数时，i 已经是 10了，所以最终打印 10个10。

五、使用闭包的注意点

1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

for (var i=1; i<=5; i++) {

    setTimeout( function timer() {

        console.log( i );

     }, i*1000 );

}

打印：5个6，原因js事件执行机制

办法一：

for (var i=1; i<=5; i++) {

    (function(j) {

        setTimeout( function timer() {

            console.log( j );

        }, j*1000 );

    })(i);

}

打印：依次输出1到5

原因：因为实际参数跟定时器内部的i有强依赖。通过闭包，将i的变量驻留在内存中，当输出j时，

引用的是外部函数的变量值i，i的值是根据循环来的，执行setTimeout时已经确定了里面的的输出了。办法二：

for (let i=1; i<=5; i++) {

    setTimeout( function timer() {

        console.log( i );

     }, i*1000 );

}

打印：依次输出1到5因为for循环头部的let不仅将i绑定到for循环中，事实上它将其重新绑定到循环体的每一次迭代中，

确保上一次迭代结束的值重新被赋值。

setTimeout里面的function()属于一个新的域，

通过var定义的变量是无法传入到这个函数执行域中的，

通过使用let来声明块变量能作用于这个块，所以function就能使用i这个变量了；

这个匿名函数的参数作用域和for参数的作用域不一样，是利用了这一点来完成的。

这个匿名函数的作用域有点类似类的属性，是可以被内层方法使用的。

4. js事件执行机制

事件循环的过程如下：

JS引擎（唯一主线程）按顺序解析代码，遇到函数声明，直接跳过，遇到函数调用，入栈；
如果是同步函数调用，直接执行得到结果，同步函数弹出栈，继续下一个函数调用；
如果是异步函数调用，分发给Web API（多个辅助线程），异步函数弹出栈，继续下一个函数调用；
Web API中，异步函数在相应辅助线程中处理完成后，即异步函数达到触发条件了（比如setTimeout设置的10s后），如果异步函数是宏任务，则入宏任务消息队列，如果是微任务，则入微任务消息队列；
Event Loop不停地检查主线程的调用栈与回调队列，当调用栈空时，就把微任务消息队列中的第一个任务推入栈中执行，执行完成后，再取第二个微任务，直到微任务消息队列为空；然后

去宏任务消息队列中取第一个宏任务推入栈中执行，当该宏任务执行完成后，在下一个宏任务执行前，再依次取出微任务消息队列中的所有微任务入栈执行。
上述过程不断循环，每当微任务队列清空，可作为本轮事件循环的结束。

链接：https://juejin.cn/post/6987429092542922783

0

2021-07-23

0 个评论

要回复文章请先登录或注册