小米2022校招前端实习一面总结

牛客网视频面
牛客网没有代码提示很不友好，不过面试官人很好会给提示
但我没有刷面试题加上基础不牢，导致面试效果不好，只做了四道题就结束面试了
记录下来查漏补缺，下面是面试结束后的总结和正确答案（得好好复习基础和刷面试题了，捂脸~）

1、盒模型

问：说一下对盒模型的理解

1. Content box（内容）: 显示内容的区域，通过 width 和 height 设置大小
2. Padding box（内边距）: 盒子的内边距 padding ，包裹 Content 内容
3. Border box（边框）: border 边框包裹内容和内边距
4. Margin box（外边距）: margin 外边框是盒模型的最外层区域

2、手写样式题，实现三列布局（圣杯布局）

问：用代码实现以下要求

这是一道非常简单的手写样式题，考察的就是对几种常见布局的掌握

//我用的是弹性布局作答的，代码如下
.root {
    width: 100vw;
    height: 300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.left {
    width: 100px;
    height: 100%;
    background-color: red;
}
.center {
    flex: 1;
    height: 100%;
    background-color: yellow;
}
.right {
    width: 100px;
    height: 100%;
    background-color: green;
}

效果如下:

问：能不能用除了弹性布局以外的方法实现刚刚的效果
答：float 浮动布局和 position 定位布局

3、宏任务、微任务题

问：以下代码的执行输出顺序
考察的是对宏任务和微任务的理解掌握

//输出顺序是：1 5 7 2 6 3 4

解析：
众所周知js是一个单线程的脚本语言

因此js实现异步的执行顺序：

先执行同步任务代码 -> 遇到宏任务就存到宏任务队列 -> 遇到微任务就存到微任务队列中 -> 当所有同步任务执行完 ，执行微任务队列 -> 当微任务队列执行完，执行宏任务队列 -> 宏任务中如果遇到微任务就继续加入到微任务队列 -> 执行完宏任务队列还会再去查看微任务队列是否有代码需要执行…循环直到所以代码执行完毕

new Promise((resolve, reject)=>{}); 是一个同步任务，我一开始以为是异步就直接答错了，复盘时才发现 new Promise 创建的是同步任务，then 方法之后的才是微任务，所以先执行输出 1 5 7 ，再执行微任务队列输出 2 6 3 ，再执行宏任务队列输出 4

4、原型链题

问：以下代码输出什么
考察原型链的相关知识点

//输出：
a.a is not a function
2
1
2

解析(原型链可能理解有误，仅供参考，后续复习会查漏补缺这篇文章的此处)：

所有的函数和对象的原型链最终都会找到 Object.prototype 为止
因此 a.b() 和 A.b() 都会找到 Object.prototype.b 并输出2

a 是一个对象，a 的原型 __proto__ ，a.__proto__ 也就是 a 的 prototype上没有 a() 方法，因此链式到 a.__proto__.__proto__ 也就是到 Object 的 prototype上找，也没有找到就会输出 a.a is not a function

A 是一个构造函数，A.__proto__ 也就是 A.prototype 上没有找到 a() 方法，就会链式到 A.prototype.constructor.__proto__.a 输出 1

总结

还是有很多东西要重温复习的，特别基础的东西特别重要，面试题这块也要好好刷一下（捂脸~）