个人实习面经——腾讯（CSIG）
博主目前在蚂蚁集团-体验技术部，AntV/S2 是博主所在团队的开源项目——多维交叉分析表格，欢迎使用，感谢到 S2 github 仓库点赞 star，有任何关于前端面试、就业、技术问题都可给在文章后留言。
一面（ 2021/3/12）：
1、自我介绍。
2、介绍一下做的可视化的项目。
3、说一下JS 中原生对象和宿主对象。
- 原生对象的定义是：“独立于宿主环境的ECMAScript实现提供的对象”。即ECMAScript本身带有的基本对象，而不包含浏览器等宿主提供的对象。包括：
Number、Srting、Date、Boolean、Object、Array、Function、RegExp、Error、TypeError、EvalError等。 - 内置对象也是原生对象的一种，它的定义是：“由ECMAScript实现提供的，独立于宿主环境的对象，在ECMAScript开始执行时出现。”我们不需要明确实例化内置对象，它在程序开始执行时已经被实例化了，可以直接使用，目前的内置对象有：
Global、Math。 - 宿主对象是ECMAScript实现的宿主环境提供的对象，宿主是指网页运行的环境，比如“操作系统”、“浏览器”，对于浏览器提供的BOM和DOM都是宿主对象。
4、JS 中的继承的方式。
- 原型链继承：
重点： 新实例的原型等于父类的实例
特点： 新实例可以继承的属性：实例构造函数的属性、父类构造函数的属性、父类原型的属性（新实例不能继承父类实例的属性）
缺点： 新实例无法向构造函数传参；继承单一；所有新实例都会共享父类实例的属性。
function Person() {
this.name = "gfh";
}
Person.prototype.getName = function() {
console.log("name:", this.name);
}
function Child() {}
// 新实例的原型等于父类的实例
Child.prototype = new Person();
let child1 = new Child();
child1.getName();
- 借助构造函数继承
重点： 用 call() 或 apply() 方法将父类构造函数引入子类构造函数。
特点： 只继承了父类构造函数的属性，没有继承父类原型的属性；解决了原型链继承的缺点；可以继承多个构造函数的属性（多个 call()）；在子实例中可向父实例传参。
缺点： 只能继承父类构造函数的属性（不能继承方法）；无法实现构造函数的复用；每个新实例都有父类构造函数的副本，臃肿。
function Person() {
this.name = "gfh";
this.hobbies = ["eatting", "sleeping"];
}
Person.prototype.getName = function() {
console.log("name:", this.name);
}
function Child(age) {
// 通过 call() 方法将父类构造函数引入子类构造函数
Person.call(this);
this.age = age;
}
let child1 = new Child(24);
let child2 = new Child(25);
console.log(child1.name); // gfh
console.log(child1.age); // 24
child1.hobbies.push("coding");
console.log(child1.hobbies); // ["eatting", "sleeping", "coding"]
console.log(child2.hobbies); // ["eatting", "sleeping"]
- 组合继承（组合原型链继承和借用构造函数继承）（常用）
重点： 组合了两种模式的优点，传参和复用。
优点： 可以继承父类构造函数的属性，可以传参、可以复用；每个新实例引入的构造函数属性是私有的。
缺点： 调用两次父类构造函数，耗内存；子类的构造函数会代替原型上的那个父类构造函数。
function Person(name) {
this.name = name;
this.hobbies = ["eatting", "sleeping"];
}
Person.prototype.getName = function() {
console.log("name:", this.name);
}
function Child(name,age) {
// 构造函数继承
Person.call(this, name);
this.age = age;
}
// 原型链继承
Child.prototype = new Person();
let child1 = new Child("gfh",24);
let child2 = new Child("zs",25);
console.log(child1.name, "-", child1.age); // gfh-24
console.log(child2.name, "-", child2.age); // zs-25
child1.getName(); // name:gfh
- 原型式继承
重点： 用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了可以随意增添属性的实例或对象。Object.create()就是这个原理。
优点： 类似于复制一个对象，用函数来包装。
缺点： 所有实例都会继承原型上的属性；无法实现复用。
function CreateObj(obj) {
function F() {}
F.prototype = obj;
console.log(obj.__proto__ === Object.prototype); // true
console.log(F.prototype.constructor === Object); // true
return new F();
}
let person = {name: "zs", friends: ["ls", "ww"]};
let p1 = CreateObj(person);
let p2 = CreateObj(person);
p1.name = "ls";
console.log(p2.name); // "zs"
p1.friends.push("zl");
console.log(person); // {name: "zs", friends: ["ls", "ww", "zl"]}
- 寄生式继承
重点： 给原型式继承外套了个壳子
优点： 没有创建自定义类型，只是套了个壳子返回对象，这个函数顺理成章就成了新对象。
缺点： 没有用到原型，无法复用。
let person = {name: "zs", hobbies: ["eatting", "sleeping"]};
function CreateObj(obj) {
function F() {}
F.prototype = obj;
return new F();
}
let p1 = CreateBoj(person);
let p2 = Object.create(person);
console.log(p1.name); // "zs"
console.log(p2.hobbies); // ["eatting", "sleeping"]
function CreateChild(obj) {
let newobj = CreateObj(obj);
newobj.sayName = function() {
console.log("name:", this.name);
}
return newobj;
}
let c1 = CreateChild(person);
c1.sayName(); // name: "zs"
- 寄生组合式继承（常用）
重点： 修复了组合继承的问题。
function Parent(name) {
this.name = name;
this.hobbies = ["eatting", "sleeping"];
}
Parent.prototype.sayName = function() {
console.log(this.name);
}
function Child(name, age) {
Parent.call(this, name);
this.age = age;
}
function CreateObj(obj) {
function F() {};
F.prototype = obj;
return new F();
}
function prototype(child, parent) {
let prototype = CreateObj(parent.prototype);
prototype.constructor = child;
child.prototype = prototype;
}
prototype(Child, Parent);
let child1 = new Child("zs", 24);
console.log(child1); // Child {name: "zs", hobbies: ["eatting", "sleeping"], age: 24}
- class 继承
class Parent {
constructor() {
this.hobbies = ["eatting", "sleeping"];
}
addHobbies() {
this.hobbies.push("codding");
}
}
class Child extends Parent {
constructor() {
super();
}
}
let child1 = new Child();
child1.addHobbies();
child1.hobbies; // ["eatting", "sleeping", "codding"]
5、算法题：跳台阶（做出来了但是空间复杂度不是最优，创建了一个数组）。
6、Vue 如何注册一个全局组件，局部组件。
- 全局组件的注册方法：
Vue.component("组件名",{方法});
在 main.js 中引入组件，通过 Vue.component注册，如下：
Vue.component("my-component", {
template:"", // 或者使用``
data:{},
mathods: {},
// 生命周期函数等
})
在任何其他组件都可以通过
- 局部组件的注册：定义一个对象，包含template、data、methods等。在父组件中引入：
<template>
<my-component></my-component>
</template>
import MyComponent from "./MyComponent.vue";
export default {
components: {
MyComponent // 直接初始化
}
}
7、Vue 中插槽的理解。
使用场景： 在构建页面的过程中，需要把一些经常用到的公共部分抽取出来作为一个单独的组件，但在实际使用这个组件的时候，不能完全满足我们的需求，这时候需要使用插槽来分发内容。
过程： 父组件引用子组件时，希望向子组件传递模板内容，子组件让父组件传递过来的模板内容在所在的位置显示，子组件中的
作用： 可以让用户扩展组件，更好的复用组件和对其定制化处理。
分类：
3. 默认插槽
直接使用
4. 具名插槽
子组件：name: “slotName”，父组件： ，v-slot 可以使用 # 代替。
5. 作用域插槽
主要解决父组件在向子组件插槽传递模板内容时，存在访问子组件数据的问题。
参考这篇文章
8、Vue 在版本更新中，插槽有哪些变化。
vue 2.6.0之后通过 v-slot: slotName 来使用，并且 v-slot 只能添加在 上，和已经废弃的 slot 属性不同。
9、组件间传值的方式。
- props（父传子）
父组件：
子组件：
props: {
name: {
type: String,
requird: true
}
}
- this.$emit（子传父）
子组件：
<h1 @click="changeTitle">Titleh1>
methods: {
changeTitle() {
this.$emit("titleChanged", "titleValue")
}
}
父组件：
<p @titleChanged="updateTitle">父组件p>
methods:{
updateTitle(e) {
this.title = e;
}
}
- 兄弟组件间传值（拥有共同父组件）
方法：先子传父，再父传子。 - 任意组件间传值（包含兄弟组件）
在 main.js 中挂载方法：
let bus = new Vue();
Vue.prototype.bus = bus;
（子）组件A：
<button @click="sendTo">子组件一</button>
data() {
return {
name: "zs"
}
},
methods: {
sendTo() {
this.bus.$emit("sendTo", this.name);
}
}
(子)组件B：
data() {
return {
name: ""
}
},
methods: {
this.bus.$on("sendTo", params => {
this.name = params;
})
}
- 使用 vuex
补充：父子组件方法的相互调用。
- 父调子
父组件：
<button @click="useChildMethods">父组件</button>
<child ref="child"></child>
methods: {
useChildMethods() {
this.$refs.child.childMethods();
}
}
子组件：
methods: {
childMethods() {
console.log("子组件的方法。");
}
}
- 子调父
子组件：
<button @click="childMethod"></button>
methods: {
childMethods() {
this.$emit("parent", "childParams");
}
}
父组件：
<child @parent="parentMethods"></child>
methods: {
parentMethods(value) {
console.log("子组件传过来的参数", value);
}
}
还可以使用 this.$parent方法。
10、Vue 和 React 的区别。
- 监听数据变化的原理不同。 Vue 通过 getter/setter 和一些函数的劫持，能精确知道数据的变化；而 React 默认通过比较的方式（diff）进行的，如果不进行优化，回导致大量的VDOM的重新渲染。
- 数据流的不同。 Vue 组件与 DOM 之间通过 v-model 双向绑定；React 一直不支持双向绑定，提倡的是单向数据流，称之为 onChange/setState() 模式。
- 组合不同功能的方式不同。 Vue 是通过 mixin; React 是通过HoC（高阶组件）。
- 组件间的通信。 在子组件向父组件传递消息的过程中，Vue 更倾向于使用事件，而 React 使用回调函数。
- 模板渲染的方式不同。 在表层上，模板的语法不同，React 通过 JSX 渲染模板，而 Vue 通过一种拓展的 HTML 语法渲染。在深层上，模板的原理不同，React 在组件JS代码中通过原生的JS语法实现模板中的常见语法，包括插值、循环、条件等，而 Vue 是在组件和JS代码分离的单独模板中，通过指令来实现，如：v-if。
- 渲染过程不同。 Vue 可以更快的计算出Virtual DOM 的差异，这是因为它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染组件树；而 React 在应用状态改变时，全部子组件都会重新渲染。
- 框架本质不同。 Vue 是 MVVM 框架，由 MVC 发展而来；而 React 是前端组件化框架，由后端组件化发展而来。
11、Vuex 的理解。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。state、getters、actions、mutations、modules。
12、二分法的理解（能说、举了一个二分查找的例子）。
二分法是在一个有序数组中查找目标值的方法。
步骤：
- 从数组的中间元素开始搜索，如果目标值等于中间元素，则搜索过程结束，否则执行下一步；
- 如果目标元素大于 / 小于中间值，则在大于 / 小于中间值的那一半区域中查找，然后重复步骤1中的操作；
- 如果某一步数组为空，则找不到目标值。
13、举出二分查找的使用场景（没举出来，面试官说了一个扑克牌排序）。
- 查找第一个值等于给定值的元素
- 查找最后一个值等于给定值的元素
- 查找第一个大于等于给定值的元素
- 查找最后一个小于等于给定值的元素
对于扑克牌排序，如果是一边摸牌一边排序整理，使用插入排序；如果是全部拿在手中了，使用快速排序。
14、为什么搞前端。
研究生阶段项目需要。
15、大学生活的感受。
本科丰富，研究生项目。
16、反问。
业务。
二面（ 2021/3/17）：
1、自我介绍。
2、如何接触前端的。
3、HTML5新特性
4、
通过鼠标所在的坐标来判断。