看看这些前端面试题，带你搞定高频知识点（七）

javascriptjavascript 2023-08-28 19:09:16 753
摘要： 每天10道题，100天后，搞定所有前端面试的高频知识点，加油！！！，在看文章的同时，希望不要直接看答案，先思考一下自己会不会，如果会，自己的答案是什么？想过之后再与答案比对，是不是会更好一点，当然如果你有比我更好的答案，欢迎评论区留言，...

每天10道题，100天后，搞定所有前端面试的高频知识点，加油！！！，在看文章的同时，希望不要直接看答案，先思考一下自己会不会，如果会，自己的答案是什么？想过之后再与答案比对，是不是会更好一点，当然如果你有比我更好的答案，欢迎评论区留言，一起探讨技术 之美。

面试官：请你谈谈JS的this指向问题

1）我们要知道在全局的时候去得到这个this的话，this都会指向windows，因为我们在全局的情况下使用的东西都会被挂载到window上。

<script>
    console.log(this) // 指向window
    function a(){
        console.log(this)
    }
    a() // 相当于 window.a()，指向的依旧是 window
</script>

2）我要知道this的指向是会指向上一个调用者的，代码如下：

看完了代码，我们知道虽然本质上是由于a才调用了d函数，但是中间还是有一层是c调用了d函数，所以this指向上一级会有一个就近原则的，这点很重要！！！

<script>
    var a = {
        b:10,
        c:{
            b:12,
            d:function(){
                console.log(this)
            }
        }
    }
    a.c.d() // {b: 12, d: ƒ}
</script>

3）我们要知道箭头函数是没有作用域的，也就是说是没有自己的this，它的this永远向的是上一级的this，下面给出一道某大厂的面试题，大家可以猜一下最后的打印结果是什么？

假设你已经仔细的看完了这道面试题，相信你心中已经有了答案是66了，为什么呢？，要知道箭头函数是没有自己的this的，所以需要其去上一级去寻找this，而上一级处于全局作用域，所以打印的便是全局已经挂载的id数66。

<script>
    var id = 66
    function a(){
        setTimeout(()=>{
            console.log(this.id)
        },500)
    }
    a({id:22}) // 猜猜结果是什么？
</script>

那我们如何改变this的指向，去控制this指向我们想要的结果呢？给出如下三种方法：

<script>
    var id = 66
    function a(){
        setTimeout(()=>{
            console.log(this.id || this)
        },500)
    }
    // call => {} 改变之后并执行一次
    a.call({id:22}) // 打印22 

    // apply => [] 改变之后并执行一次
    a.apply([12]) // 打印 [12]

    // bind() 不调用，只改变this指向
    a.bind(a(id=32)) // 32
</script>

面试官：说一说call apply bind的作用和区别？

面试官：请你谈谈对事件委托的理解

<body>
<ul id="ul">
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<button id="btn">点我添加一个li</button>
<script>
    // 事件委托
    let ul = document.getElementById("ul")
    ul.addEventListener('click',(event)=>{
        console.log(event)
        event = event || window.event
        let target = event.target
        if(target.nodeName == 'LI'){
            alert(target.innerHTML)
        }
    })

    let btn = document.getElementById('btn')
    btn.addEventListener('click',()=>{
        let li = document.createElement('li')
        li.textContent = ul.children.length
        ul.appendChild(li)
    })
</script>
</body>

面试官：说一说promise是什么与使用方法？

面试官：说一说跨域是什么？如何解决跨域问题？

面试官：说一说JavaScript有几种方法判断变量的类型？

面试官：说一说JS实现异步的方法？

面试官：说一说数组去重都有哪些方法？

面试官：说一说es6中箭头函数？

面试官：说一说JS变量提升？

【推荐学习：javascript高级教程】

标签：