面试官小姐姐声音很好听，很温柔，问的问题也不难，但就是答不上，脑袋晕晕的，大脑一片空白。
- 项目
- CSS
- JS
- 算法题
1. 项目
前端权限控制
项目介绍时说做了前端权限控制，然后就问怎么做的权限控制。（回答了为什么用基于角色的权限控制）
前端优化
提到做了一些前端优化（CDN，组件拆分按需加载，第三方组件按需引入），讲了为什么用CDN，好处；组件懒加载（没答上来），第三方组件按需引入（讲到用了Echarts的雷达图来展示员工的能力，巴拉巴拉说了一些，不光是引入了radar，还引入了提示框和标题组件）； 追问怎么看JS大小占比的，回答用的Vue-CLI，用的什么命令，还记得显示分析页面资源占比的页面里面有些什么东西吗，左边显示的有些什么，里面会显示静态资源占比吗（当时都答了些啥啊。。。）。
Vue-CLI打包文件大小分析：npm run preview -- --report
2. CSS
flex实现九宫格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清楚默认样式 */
* {
margin: 0;
padding: 0;
}
/* 正方形九宫格 */
.box {
width: 600px;
height: 600px;
display: flex;
flex-wrap: wrap; // 关键属性
}
.box div {
background-color: red;
width: 33%;
height: 33%;
margin: 1px;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
3. JS
-
var, let和const的区别；
-
事件执行机制；
- 追问宏任务和微任务有哪些；
-
作用域和作用域链；
-
看代码说输出（两个题都是this指向问题）
const name="global";
var obj = {
name: '123',
getName:() =>{
console.log(this.name);
}
}
obj.getName();
/**输出
* undefined
*/
JS执行环境分为浏览器环境（V8）和Node.js执行环境。
/* 分析过程 */
var obj = {
name: '123',
getName: () => {
console.log(this);
}
}
obj.getName();
在V8中，输出为Windos对象，说明字面量定义的对象obj的箭头函数getName的this并不是指向obj的。如果箭头函数改为普通函数，则getName的this执行obj。为什么getName是箭头函数时，this没有指向obj而是指向Window？因为用对象字面量方法所创建的对象，执行上下文是位于全局中。
这里要明确普通函数和箭头函数this指向的差异。普通函数的this指向调用该函数的上下文对象，箭头函数的this指向定义该函数的上下文对象。怎么理解这两句话？看下面这段代码：
function King() {
this.royaltyName = "Henry";
// 箭头函数的this指向King，因为这个箭头函数在King里面定义的；
setTimeout(() => { console.log(this.royaltyName) }, 1000);
}
function Queen() {
this.royaltyName = "Elizabeth";
// this指向Window对象，因为W
setTimeout(function() { console.log(this.royaltyName) }, 1000);
}
new King();
new Queen();
/**
* Henry
* undefined
*/
这道题在V8和Node.js中执行结果有差异，因为两者的全局对象不一样。
V8的全局对象是window，Node.js的全局对象是global，但注意global并不是Node.js环境中最外层的全局对象，最外层是module.exports。
var name = '123';
var obj = {
name: '456',
getName: function () {
function printName () {
console.log(this.name);
}
window.printName();
}
}
obj.getName();
/**输出
* window.printName is not a function（浏览器环境）
* Cannot read property 'getName' of undefined（Node环境）
*/
4.算法题
// 二叉树深度优先遍历（非递归）
8
1 6
5,3 7
1. 定义二叉树节点（×）
2. 循环构建二叉树（×）
3. 迭代遍历
不需要构建二叉树！！！直接写迭代遍历的逻辑，昏搓搓的。
\
