百度一二三面前端面经

百度一二三面 2020.09.26
一面会问很多细节
1.自我介绍
2.position属性
3.怎样用position实现元素覆盖；如果有两个元素A和B，分别有一个子元素，如何让A的子元素盖住B的子元素
4.浏览器同源，触发跨域的操作；iframe，怎么解决
5.非简单请求是什么，反向代理的原理,JSONP怎么实现
6.var, let, const
7.Promise具体实现，resolve, reject怎么实现的
8.bfs, dfs, 实现一个bfs
9.节流和防抖，选一个实现，防抖添加heading和tailing(触发时执行一次，到达时间执行一次，最后执行一次)

二面比较多的判断输出
记不清楚原题，写个大概
1.判断输出

var name = 'global'
function  a() {
    console.log(name)
}

function b(){
    var name = 'b';
    a();
}

b();

function a(){
    console.log('1');
}

a();
function a(){
    console.log('2');
}
a();

// ************
var a = function(){
    console.log('1');
}

a();
var a = function(){
    console.log('2');
}
a();

// ********
var name = 'global'
function a(){
    console.log(name);
}
a();

function b(){
    var name = 'b';
    function a(){
        console.log(name);
    }
    a();
}

// *******
var name = 'global'
function a(){
    console.log(this.name);
}
a();

function b(){
    var name = 'b';
    function a(){
        console.log(this.name);
    }
    a();
}

// ***
function a(){
    console.log('a')
    b();
    console.log('a end')
}

function b(){
    console.log('b');
    c();
    console.log('b end')
}

function c(){
    console.log('c');
}

a();

2.事件冒泡和捕获，点击div3，输出什么

<!DOCTYPE html>
<html>
    <title>Document</title>
    <head></head>
    <body>
        <div id="d1">
            div1
            <div id="d2">
                div2
                <div id="d3">
                    div3
                    <div id="d4">
                        div4
                    </div>
                </div>
            </div>
        </div>
        <script>
            document.getElementById('d1').addEventListener('click', function(){
                console.log('div1 capture')
            }, true)
            document.getElementById('d1').addEventListener('click', function(){
                console.log('div1 bubble')
            }, false)
            document.getElementById('d2').addEventListener('click', function(){
                console.log('div2 capture')
            }, true)
            document.getElementById('d2').addEventListener('click', function(){
                console.log('div2 bubble')
            }, false)
            document.getElementById('d3').addEventListener('click', function(){
                console.log('div3 capture')
            }, true)
            document.getElementById('d3').addEventListener('click', function(){
                console.log('div3 bubble')
            }, false)
            document.getElementById('d4').addEventListener('click', function(){
                console.log('div4 capture')
            }, true)
            document.getElementById('d4').addEventListener('click', function(){
                console.log('div4 bubble')
            }, false)
        </script>
    </body>
</html>

三面考察个人素质方面，没有技术考察

1.个人优缺点

2.坚持做的一件事

3.评价自己

4.与同事有冲突，怎么解决

#百度##校招##前端工程师##面经#