前端面试中，回答不出的那些问题

Posted 2021-03-07 jzhey

前两天电话面试了一个公司的前端，差不多问题都能回答出一点，但是一旦向下深挖，就不会了，还是自身基础打得不够啊，怕以后面试还是会遇到这些个问题，所以就觉得把面试官问我的，我回答不上来的，且现在还记得问题记录一下，方便以后巩固复习，顺便分享给面试的小伙伴

1. 深度拷贝和浅度拷贝了解过吗，是否可以说一下

当时回答：了解过，浅度拷贝的话，拷贝的如果是基本数据类型的话，他就会原样拷贝，如果拷贝的时引用数据类型，比如说对象，数组，函数这类的，他只能拷贝他的应用地址，所以拷贝完成，修改引用数据类型里面的数据时，原来的也会发生修改（当时有点紧张所以说的不是很清楚，再解释一下，a对象里面又有基本数据类型和引用数据类型，拷贝a得到b，修改b里面的引用数据类型的数据时，a也会发生变化），深度拷贝的话，他会拷贝的更加彻底，当他拷贝的时引用数据类型的数据，他会递归向下继续拷贝，直到拷贝的数据都是基本数据类型。
面试官继续问：你刚才提到了递归，那你能说一下，深度拷贝的递归出口是什么？
问道这个问题时，心里暗喜，我可是敲过深度拷贝的代码的，但是还是因为紧张，想不起来了，哎，果然面试总归会紧张，跟面试官说，等下我想下，然后手心就开始出汗，后悔面试之前没有再敲一遍代码了，终于几十秒过去，想起来了，判断这个数据是不是引用数据类型，如果不是，结束递归，???，还是想起来了，开没开心几秒呢，面试官继续问：当深度拷贝中出现两个对象相互引用，该如何处理？你懂的，我傻了，相互引用？？？？？？？？我咋从来没有想过这个问题呢，想了一会，告诉面试官，我们是不是可以判断这两个数据的地址是不是相等的是不是就好了，面试官：可是我不知道，哪两个对象相互引用，你怎么去判断地址是否相等呢 ？，完了完了，我已经彻底傻了，只能认输......

面试完查的资料：可以使用一个WeakMap结构存储已经被拷贝的对象，每一次进行拷贝的时候就先向WeakMap查询该对象是否已经被拷贝，如果已经被拷贝则取出该对象并返回。

//判断是数组还是对象
function getType(target){
    // console.log(Object.prototype.toString.call(target).slice(8,-1))
    return Object.prototype.toString.call(target).slice(8,-1)
}

function cloneUtil(target,hasObj = new WeakMap()){
    let result;

    // 判断数据类型
    if(getType(target) === 'Array'){
        result = []
    } else if(getType(target) === 'Object'){
        result = {}
    } else {
        return result
    }

    for (let i in target) {
        let item = target[i]
        
        //当遍历的数据中仍然有数组/对象时，重新按照之前的步骤 进行拷贝，直到所有拷贝数据的类型都是基本数据类型
        if(getType(item) === 'Object' || getType(item) === 'Array'){
            //判断hasObj中是否已经拷贝过该对象，如果已经被拷贝则取出该对象并返回。
            if(hasObj.has(item)) return hasObj.get(item)
            hasObj.set(item,{})
            let cloneitem = cloneUtil(item,hasObj)
            result[i] = cloneitem
        } else{
            result[i] = item
        }
    }

    return result
}

let obj = {
    name:'Bob',
    age:22,
    sex:{
        option1:'男',
        option2:'女'
    }
}

let cloneObj = cloneUtil(obj)
cloneObj.sex.option1 = 'xxx'
obj.obj = obj
console.log(obj)
console.log(cloneObj)

2. vue项目中你用了ui框架，比方说element-ui，你要修改ui框架提供的组件样式的时候，你会怎么去操作

当时回答：vue的style标签中，会添加一个scoped属性，防止样式的污染，但是你要修改element-ui组件的话，再带有scoped属性的style标签中去修改，是不会达到想要的结果，vue组件是可以有多个style标签的，所以当你要修改element-ui组件的样式时，可以添加一个没有scoped的style，就可以修改组件样式。

面试官继续追问：那我就是想要在有scoped属性的style标签里面去修改，那要怎么处理？

面试官这个问的时候，我顿时emmm傻了，仔细想来了想，记得如果项目用来stylus，less这样的预处理器，可以用样式穿透来实现，我就这么回答了，但是本人没有实践过，所以还是有点慌慌的，面试完之后就去查了资料。资料显示，我的回答是对的，举个例子把，看一下到底怎么穿透。

<style lang="stylus" scoped>
.a >>> .b { 
    /* ... */ 
}
</style>

//或者

<style lang="scss" scoped>
.homePage /deep/ .el-main {
    padding: 0;
}

3. call，apply了解过吗，能自己实现一个call，apply吗，还有其他什么立即绑定的函数吗

当时回答：了解过，call，apply都是更改this指向的，然后其他的我都没回答出来，后来面试完之后想想其他立即绑定还有bind啊，哎，傻了傻了

补完知识：

let person ={
    name: 'bob',
    age: 18
}

function student (){
    console.log(this.name,this.age,sex,like)
}
student.call(person,'nan','eat')

//call，apply的原理相当于，把上面的两个合并成立这个下面一个

let person = {
    name: 'bob',
    age: 18,
    fn:function student (){
        console.log(this.name,this.age,sex,like)
    }
}

person.fn('nan','like')

Function.prototype.myCall = function (context = window){//如果传入context没有赋值，就赋默认值window
    if(Object.prototype.toString.call(context) !== '[object Object]'){
        console.log('不是对象')
        return
    }
    let fn = Symbol('fn')//产生一个唯一不重复的值，以免冲突
    context[fn] = this//这里的this，是调用了myCall的函数，比方说a.mayCall()，那a就是这里的this
    let args = [...arguments].slice(1)//这里是传值
    let result = context[fn](...args)//运行这个函数
    delete context[fn] //删除context上的方法
    return result
}

Function.prototype.myApply = function (context = window){
    if(Object.prototype.toString.call(context) !== '[object Object]'){
        console.log('不是对象')
        return
    }
    let fn = Symbol('fn')
    context[fn] = this
    let args = arguments[1]
    let result = context[fn](...args)
    delete context[fn]
    return result
}

let person = {
    name: 'bob',
    age: 18
}

function student(sex,like){
    console.log(this.name,this.age,sex,like)
}

student.myCall(person,'nan','eat')
student.myApply(person,['nan','eat'])

4.因为之前问了事件循环机制是怎么样子操作的，当时回答的时候，说了js单线程的，然后就有了这个问题，js如果不是单线程会怎么样？后面再回答es6里面除了let，const新增的，es6里面还有什么你记得的内容吗，当时中间有回答了async 和 promise，所以，js单线程，又出了一道问题，promise js单线程是怎么运行过程（突然描述不清楚了，大概就是这个意思）？

当时回答：js如果不是单线程的话，对dom会有影响，但是具体什么影响我记不清楚了，然后面试官就把答案告诉我了：如果js被设计了多线程，多个线程都要操作一个dom元素，如果有一个线程要修改一个dom元素，另一个线程要删除这个dom元素，这时候就会产生问题。

下面的那个promise 在js上运行过程我又没说出来，哎，面试完之后躺在床上好好的想了下，promise里面不就是装异步函数的么，啥ajax请求不是都是放里面的么，那不就是js运行到这边的时候，会交给对应的管理模块管理，满足条件之后，进入回调队列，然后，js主线程上的同步代码执行完成之后，通过事件轮询机制，看回调队列里是否又东西，有的话就把他钩到主线程上去运行，嗯，当时人傻已经实锤了，换种问法，问事件循环机制就不知道怎么说了，所以啊，小伙伴们，记得面试的时候要冷静，冷静，冷静，虽然我面试的时候也这么跟我自己说的??

5. 隐式类型转换，2+{a:2} 会出现什么结果

当时回答：emmmmmmmmm了半天，还是没回答出来

6. 数据结构，链表出现环要怎么处理

5,6两个问题先放在这怕忘记，知识点还没补上，所以暂时就不写正确答案了，补好了会在写上的

总体感觉给自己挖了不少坑，但是平易近人的面试官告诉我，就算我不自己挖坑，他也还是会问，emmm，好吧，不后悔自己挖坑了，这只是一面我回答不出来的一些问题，还有些记不住了，就没有写上去，还有二面，到时候有不知道的，还会写上去的