2018 web 前端面试总结

第50题 js事件委托

事件冒泡：事件委托是利用事件的冒泡原理来实现的，何为事件冒泡？就是事件从最深的节点开始，然后逐步向上传播事件。
举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>

<body>
    <ul id="ul1">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
</body>

<script type="text/javascript">
    // var oUl = document.getElementById("ul1");
    // oUl.onclick = function(){
        // alert(123);
    // }


    window.onload = function(){
        var oUl = document.getElementById("ul1");
            oUl.onclick = function(ev){
                var ev = ev || window.event; // ev就是event（事件）对象
                var target = ev.target || ev.srcElement; //事件对象target（目标）
                if(target.nodeName.toLowerCase() == 'li'){ //nodeName（节点名称），toLowerCase字符转小写
                    alert(123);
        　　　　　　alert(target.innerHTML);
                }
            }
        }
</script>
</html>

第59题 js同源策略

同源策略就是，协议、主机名、URL端口，三者相同的文档；
让同源策略失效的三个方法：
1.使用Document对象里面的domain属性，修改里面的主机名；
2.跨域同源共享，使用方法Origin；
3.跨文档消息，使用Windows对象里面的postMessage() 方法。

第60题数组去重方法

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript">
        var arr = ['abc','abc','ss','ss','2','d','d'];
        //新数组
        var newArr = [];
        //遍历数组
        for(var i=0;i<arr.length;i++){
            //indexOf()有两个作用：
            //1.在字符串中查找某个字符第一次出现位置，不存在返回-1；
            //2.在数组中查找某元素第一次出现的位置，存在返回键位，不存在返回-1；
            if(newArr.indexOf(arr[i])==-1){ 
                newArr.push(arr[i]);
            }
        }
        console.log(newArr);
    </script>
</body>
</html>

NAVER 面试总结

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript">
        //第一道题
        var A = function(){
            return 2;
        }
        function A(){
            return 1;
        }
        console.log(A());

        //第二道题
        if(true){
           function B(){return 1}
        }
        function B(){return 2}
        console.log(B());
    </script>
</body>
</html>

解析：Js 代码的编译阶段会找到所有的声明:变量声明 (var a) 和函数声明 (function a(){}) , 在代码被执行前的编译阶段首先被处理。过程就好像变量声明和函数声明从他们代码中出现的位置被移动到执行环境的顶部，这个过程就叫做提升。 只有声明操作会被提升，赋值和逻辑操作会被留在原地等待执行”。
楼主出示的代码中, 以下两个函数的声明：function A() {return 1;}, 和 function B(){return 2;}, 在编译阶段被提升了。

然而在动态运行的过程中，无名函数 var A = function(){return 2;} 动态地覆盖了原先的声明，故输出为2;
在动态运行的过程中, 逻辑运算 if(true){…}的结果，又从新定义了 Function B(){return 1;}. 故输出为 1。

2018 web 前端面试总结

猜你喜欢