小滴课堂22年新版互联网大厂前端高频面试题（3）~持续更新中

---

前言

小滴课堂，旨在让编程不在难学，让技术与生活更加有趣。 随着互联网+的时代，在线教育技术越来越便捷，小滴课堂依托在线教育时间以及空间上的便利，为广大IT从业者提供了更为方便、快捷的学习交流途径、提供大量高质量的IT在线课程。更多教程请访问xdclass.net（添加VX：xdclass99）

一、高频面试题之CSS3-flflex布局常见面试题

回答

（一）如何实现内容宽度等分

//html
<div class="box">
 <div style="background: red;">html5</div>
 <div style="background: yellow;">css3</div>
 <div style="background: blue;">js</div>
</div>
//css
.box {
 display: flex;
}
.box div {
 flex:1;
}

（二）左右布局，⼀侧定宽，另⼀侧⾃适应

//html
<div class="box">
 <div class="left">html5</div>
 <div class="right">css3</div>
</div>
//css
.box {
 display: flex;
}
.box .left {
 width: 300px;
 background: red;
}
.box .right {
 flex: 1;
 background: yellow;
}

二、高频面试题之关于this指向问题

回答

记住⼀个原则即可谁调用this就指向谁（除了⼀些改变this指向的函数）

接下来就开始看例⼦结合上面的这个原则

例子一：

var a = 1
function test () {
 console.log(this.a)
}
test(); //输出1

这里的test其实就是window调用的，只是它简写了

window.test()调用者为window，所以this指向window，而全局的变量声明相当于window.x

例⼦⼆：

function test() {
 console.log(this.a);
}
var obj = {};
obj.a = 1;
obj.m = test;
obj.m(); // 1

由于这里调用者是obj，所以this指向obj，所以输出的this.a其实就是obj.a

例⼦三：

var x = 2;
function test() {
 this.x = 1;
}
var obj = new test();
console.log(obj.x) // 1

这里就⽐较特殊了，在我们js的课程里面讲过了，构造函数的时候有什么操作是隐性操作我们看不到的呢？就是他会定义this为⼀个新对象然后最后返回这个this

所以这里的obj.x拿到的就是test⾥⾯的this.x

例子四：

var x = 0;
function test() {
console.log(this.x);
}
var obj = {};
obj.x = 1;
obj.m = test;
obj.m.apply() // 0

这里很简单，通过了apply改变了this指向，由于apply没有传⼊东西，为空时默认调用全局对象，即window，所有this指向windowthis.x即window.x

三、高频面试题之原型链与作用域链的理解

回答

（一）原型链是针对构造函数的，它是由原型对象组成的

1、属性查找：从实例本身⼀层层往上查找，直到访问到对象的原型

2、属性修改：只会修改实例对象本身的属性，如果不存在，则进⾏添加该属性，如果需要修改原型的属性时，则可与用a.prototype.b = xxx,但是这样回造成所有继承于该对象的实例的属性发生改变

（二）作用域链是针对变量的

1、作用域的特点就是，先在自己的变量范围中查找，如果找不到，就会沿着作用域往上找。

//全局作⽤域
var tim = 1
function levelOne () {
 var tim = 2
 function levelTwo () {
 var tim = 3
 console.log(tim)
 }
 levelTwo()
}
levelOne()

2、如果再levelTwo方法没找到tim变量就会往levelOne方法找，如果还找不到就继续往上找，这就是作用域链

四、减少组件的重复渲染useMemo和useCallback的使用

回答

思路

1、useMemo

（1）在第⼀次渲染执⾏，把返回值缓存起来，并监控⼀个变量，变量不变则返回值不变

const newXd = useMemo(() => {
 console.log(111);
 return xd;
}, [xd]);

（2）结合 memo 减少组件的不必要渲染，依赖的变量变化时再次执⾏，返回计算值

const Test = memo(({ xd }) => {
 console.log('Test组件渲染了');
 return <div>{xd}</div>;
});

2、useCallback（结合memo）

（1）在第⼀次渲染执⾏，把函数缓存起来，并监控⼀个变量，变量不变则返回函数不变

const handleClicks=useCallback(()=>{
 // 你要做的事情
},[xd])

（2）结合 memo 解决组件的重复渲染

const Test = memo(({ handleClicks }) => {
 console.log('Test组件渲染了');
 return <div onClcik={handleClicks}>'⼩滴课堂'</div>;
});

五、箭头函数的使用有什么需要注意的？

回答

（一）特点

1、在使⽤=>定义函数的时候，this的指向是定义时所在的对象，⽽不是使⽤时所在的对象

2、不能够⽤作构造函数，这就是说，不能够使⽤new命令，否则就会抛出⼀个错误

3、不能够使⽤函数内置的arguments对象

4、不能使⽤yield命令

（二）普通函数代码

class Animal {
 constructor() {
 this.type = "animal";
 }
 say(val) {
 setTimeout(function () {
 console.log(this); //window
 console.log(this.type + " says " + val);
 }, 1000)
 }
}
var animal = new Animal();
animal.say("hi"); //undefined says hi

解析

超时调⽤的代码都是在全局作⽤域中执行的，因此函数中this的值在非严格模式下指向window对象，在严格模式下是undefifined”。也就是说在⾮严格模式下，setTimeout中所执行函数中的this，永远指向window！！

（三）箭头函数代码

class Animal {
 constructor() {
 this.type = "animal";
 }
 say(val) {
 setTimeout(() => {
 console.log(this); //Animal
 console.log(this.type + ' says ' + val);
 }, 1000)
 }
}
var animal = new Animal();
animal.say("hi"); //animal says hi

（四）箭头函数总结：

1、不需要function关键字来创建函数

2、省略return关键字

3、继承当前上下文的 this 关键字