2020.10.20英语前端电话面试总结

人生第二次前端面试，这次面的这个前端岗位是需要有很好的英语口语沟通能力的，我英语很差，面试官让我用英语自我介绍几句就说了解到了我的水平了，嘤嘤嘤···所以英语这方面就没什么好说的了，我也知道自己英语差~

所以还是记录一下问到的技术方面的题目吧

1. 对函数式编程的理解

【我的回答】：函数式编程是一种编程范式，相同的输入永远得到相同的输出，不会产生副作用。

【面试官】：嗯···

（我答得不是很全面）

参考答案：

阮一峰老师《函数式编程初探》：

"函数式编程"是一种"编程范式"（programming paradigm），也就是如何编写程序的方法论。它属于"结构化编程"的一种，主要思想是把运算过程尽量写成一系列嵌套的函数调用。

函数式编程具有五个鲜明的特点：

1. 函数是"第一等公民"
2. 只用"表达式"，不用"语句"
3. 没有"副作用"
4. 不修改状态
5. 引用透明

函数式编程的意义：

1. 代码简洁，开发快速
2. 接近自然语言，易于理解
3. 更方便的代码管理
4. 易于“并发编程”
5. 代码的热升级

2. JS基础数据类型有哪些

【我的回答】：boolean、number、string、undefined、null、object、ES6新增了Symbol、ES2020新增了bigint

【面试官】：嗯还可以

参考答案：这个答案就是我回答到的boolean、number、string、undefined、null、object，然后ES6新增了Symbol，ES2020新增了bigint

3. 闭包是什么

【我的回答】：闭包是JS在运行过程中的一种现象，一般发生在函数作为参数、函数作为返回值的时候，里面的变量没有得到销毁，就产生了闭包。

【面试官】：那是返回的函数内是闭包还是函数引用的变量产生了闭包？

【我的回答】：是返回的函数内所引用到了外部变量产生了闭包

【面试官】：额···

（这个问题我当时答得不好，乱七八糟说了一大堆，感觉自己也讲不清楚了）

参考答案：

还是引用阮一峰老师《学习Javascript闭包（Closure）》：

由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。 所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。 闭包可以用在许多地方。 它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

4. JS的事件机制是怎样的

【我的回答】：是指事件循环吧，JS执行的时候有个主任务执行栈，主任务中如果遇到异步任务会放到回调队列中，等主任务全部执行完毕后，回调队列中的任务会进入到主任务中。其中异步任务又分为宏任务和微任务。

【面试官】：说一下微任务

【我的回答】：微任务是在本轮任务执行完毕后立即执行，例如Promise。而宏任务是在主任务执行栈的任务全部执行完毕后才会进入主任务执行栈中执行。

参考答案：

JS是单线程语言，指JS执行环境中那个负责执行代码的线程只有一个。但是JS的运行环境以及JS的某些API在运行时是可以开启新的线程的。当JS代码的回调栈中进行某些耗时任务时，会将这些耗时任务放到WebAPI中，等到可以执行的时候，就会进入消息队列中。当回调栈空的时候，会被Event Loop监听到，Event Loop会从消息队列中取出第一个任务放到回调栈中让主任务执行。

JS回调队列中的任务称之为【宏任务】，而宏任务执行过程中可以临时加上一些额外需求，可以选择作为一个新的宏任务进到队列中排队(如setTimeout)，也可以作为当前任务的【微任务】，直接在当前任务结束后立即执行。

微任务的目的是为了提高整体的响应能力，目前绝大多数异步调用都是作为宏任务执行，Promise 、MutationObserver、process.nextTick 是作为微任务在本轮调用的末尾执行。

5. const 和 let 的区别

【我的回答】：const和let是定义块级作用域变量的，const定义的是常量、let定义的是变量

【面试官】：const定义的变量可以修改吗

【我的回答】：const定义的原始类型变量不可以修改，const定义的应用类型变量不可以修改变量的引用地址，但是可以修改变量对象的属性值。

参考答案：

ES6 新增了let和const命令，但是所声明的变量，只在命令所在的代码块内有效。const声明一个只读的常量。一旦声明，常量的值就不能改变。

const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

6. Vue的数据双向绑定的原理

【我的回答】：是通过value属性和change方法实现的

【面试官】：怎么实现的？

【我的回答】：元素的值绑定到value上，然后监听change事件，在change事件触发时更新value

【面试官】：怎么实现监听事件和更新的？

【我的回答】：就是监听change事件啊

【面试官】：不止是这样···

(第二天我才想起来这个问题应该考的是Vue原理···被自己蠢哭)

参考答案：

Vue 数据双向绑定主要是指：数据变化更新视图，视图变化更新数据。其中，View变化更新Data，可以通过事件监听的方式来实现，所以 Vue数据双向绑定的工作主要是如何根据Data变化更新View。

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。

这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。

之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

主要功能：

监听器 Observer：对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。

解析器 Compile：解析 Vue 模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。

订阅者 Watcher：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。

每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新——这是一个典型的观察者模式

订阅器 Dep：订阅器采用 发布-订阅 设计模式，用来收集订阅者 Watcher，对监听器 Observer 和 订阅者 Watcher 进行统一管理。

7. Object.defineProperty有什么作用

【我的回答】：是用来监听对象属性的变化的，set方法可以设置属性，get方法可以获取属性，可以监听到属性的修改，但是监听不到属性的新增和删除

【面试官】：为什么监听不到属性的删除

【我的回答】：这个我不知道唉，JS这个API就是这么定义的，为什么监听不到属性的删除那就涉及JS底层原理了吧

【面试官】：······

参考答案：

Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性。

Object.defineProperty(obj, prop, desc)

1. obj 需要定义属性的当前对象
2. prop 当前需要定义的属性名
3. desc 属性描述符

在Vue2.0中，对于Object.defineProperty来说，处理数组与对象是一视同仁的，只是在初始化时去改写get和set达到监测数组或对象的变化，对于新增的属性，需要手动再初始化。对于数组来说，只不过特别了点，push、unshift值也会新增索引，对于新增的索引也是可以添加observe从而达到监听的效果；pop、shift值会删除更新索引，也会触发defineProperty的get和set。对于重新赋值length的数组，不会新增索引，因为不清楚新增的索引有多少，根据ecma规范定义，索引的最大值为2^32 - 1，不可能循环去赋值索引的。

8. CSS实现垂直居中几种方式

【我的回答】：flex实现起来最简单

【面试官】：那你说说flex如何实现

【我的回答】：先设置flex-direction为column,就是纵向布局了，然后设置justify-content为center，就是垂直居中了，对吧

【面试官】：那还要水平居中呢

【我的回答】：那就再设置一个align-item为center就可以了

参考答案：

代码仓库地址：https://gitee.com/jiailing/WebTest/tree/master/CSS%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E5%B8%83%E5%B1%80%E6%96%B9%E6%A1%88

CSS-Grid.html

display:table和vertical-align:middle

flex布局.html

line-height和vertical-align对图片进行垂直居中.html

line-height对单行文本进行垂直居中.html

padding实现子元素的垂直居中.html

弹性布局.html

绝对定位和transform.html

绝对定位和负外边距对块级元素进行垂直居中.html

绝对定位和负外边距进行垂直居中.html

绝对定位结合margin:auto.html

设置第三方基准.html

9. flex: 1是什么意思、flex如何实现放缩、flex属性的三个参数有什么含义

【我的回答】：flex为一个数字的时候，是比例，比如说有两个子元素的flex分别为1和1，那它俩在父元素中的占比就是1:1，如果这两个子元素的flex分别为1和2,那它俩在父元素中的占比就是为1:2

【面试官】：那如果flex的属性为三个参数呢，分别是什么含义

【我的回答】：flex属性值还可以为三个参数吗，这个我不知道···

【面试官】：恩是可以的，那你说说flex如何实现放缩

【我的回答】：是指cover、contain吗

【面试官】：这个属性叫什么

【我的回答】：额···不记得了

【面试官】：flex你需要复习复习

参考答案：

菜鸟教程：https://www.runoob.com/css3/css3-flexbox.html

flex 属性用于指定弹性子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

注意： 如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

各个值解析:

• auto: 计算值为 1 1 auto
• initial: 计算值为 0 1 auto
• none：计算值为 0 0 auto
• inherit：从父元素继承
• [ flex-grow ]：定义弹性盒子元素的扩展比率。一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
• [ flex-shrink ]：定义弹性盒子元素的收缩比率。一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
• [ flex-basis ]：定义弹性盒子元素的默认基准值。项目的长度。合法值：“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数字。

面试官人挺好的，他感受到我英语不好后，还是考察了我一些技术问题。总共聊了17分钟，结束时说明了这个岗位需要英语沟通能力好的，然后给了我一些鼓励，还给了我一些建议，让我再复习复习flex布局、闭包、还有Vue双向数据绑定的原理。

前端知识肯定是要再好好准备的，除此之外，我想我还得提升一下我的英语了，我感觉我的英语应该还有的救吧，毕竟曾经也过了六级(主要是运气爆棚)，阅读能力也还OK(自我感觉)，就是嘴巴说不出来，耳朵听不懂，应该还是缺乏了英语口语交际训练。现在就给自己立下一个练好口语的flag，加油！