前端开发面试（一）

导读：今天面试字节跳动结果不是很理想，深刻的体会了自己的知识体系的不足，以及准备不充分，所以做一个总结，也是为以后面试提供一些经验吧。

一、面试首先要掌握的一些知识点

以下是HR在面试前一天发给我的，跟面试时有一点点的出入：
需要对以下内容都有了解：
1.盒子模型/css布局/笔试水平居中的方法
2.闭包/GIT/浏览器循环机制
3.项目优化/This指向的问题
4.把秒时间戳改成2020-5-9 00：00显示
5.url的链接最后返回一个对象{a:1,b:2}的实现方法
6.写promise
7.关于es6的问题
8.关于js原生的问题
9.实现封装一个组件
10.将_转换为驼峰命名
11.深浅拷贝
12.vue和react的生命周期
13.写vue组件
14.call, apply, bind的区别
15.type of，axios, jsonp的相关知识
16.写一个todolist
17.写一个person类，里面需要有username和age，还有一个方法，还有代码的执行顺序

二、面试时

1、第一个问题：如何使一个宽高为100px的盒子在屏幕水平垂直居中?
我答的是使用 绝对定位将top值为50%、left值为50%这样就能将盒子垂直水平居中了；（由于昨天笔试的时候不注意。这里是否在中心点没看）
面试官说还需要添加一个值，反正最后我是磕磕巴巴的说还需要添加margin值，但是就是想不到要添加多少像素了

下面这个图就是在绝对定位的基础上添加一个margin-left：-50px;margin-top:-50px;

.box {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -100px;
    width: 200px;
    height: 100px;
    background: red;
}

可参考链接：关于盒子的垂直水平居中

2、第二个问题什么是盒子模型？
答：

把所有的网页元素都看成一个盒子，它具有 content，padding，border，margin四个属性，这就是盒子模型

3、第三个问题 this的指向问题？
答：
默认绑定：全局环境中，this默认绑定到window.
隐式绑定：一般地，被直接对象所包含的函数调用时，也称为方法调用，this隐式绑定到该直接对象。
隐式丢失：隐式丢失是指被隐式绑定的函数丢 失绑定对象，从而默认绑定到window。
显式绑 定：通过call()、apply()、bind()方法把对象绑定到this上，叫做显式绑定。
new绑定：如果函数或者方法调用之前带有关 键字new，它就构成构造函数调用。对于this绑 定来说，称为new绑定

4、第四个问题call()、apply()有什么区别?
答：更简单地说，apply和call功能一样，只是传入的参数列表形式不同也就是说：call调用的为单个，apply调用的参数为数组

5、第五个问题用ES6里面的class写一个person类，里面需要有username和age

class Person
{
private String name;
private int age;
public Person(String name, int age)
{
this.name = name;
this.age = age;
}
public String toString()
{
return "Person[Name:" + name +", Age" + age + "]";
}
}

6、打印结果是多少？

window.a = 1;
function foo() {
var b = 2;
console.log(b + this.a);
console.log(b + a);
}
function foo1() {
var a = 4;
foo();
}
foo1();

结果：3、3

7、打印的顺序

console.log('begin')
setTimeout(()=>{
console.log('setTimeout')
},0)
new Promise(resolve=>{
console.log('Promise')
})
console.log('end')

结果为 begin、promise、end、setTimeout
由于settimeout为异步任务，需让主线任务执行完成后再来执行

7、vue的计算属性是什么？
由于我想不起来了。面试官就说跳过下一下，这就尴尬了。
答案：1.首先vue的计算属性是computer，它是实时响应的，计算属性会依赖于他使用的data中的属性，只要是依赖的属性值有改变，则自动重新调用一下计算属性
2.如果它所依赖的属性值没有发生改变，那么计算属性是从它的缓存中来的，并没有重新编译

8、vue的watch是什么？
我答的不是很准确，到这里就知道凉凉了，面试官说 下次准备好了再来投递吧。那么这次面试就到这里吧。。。。
答案：一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。
扩展
watch和computer的区别在哪里？
watch是监听一个变量或者常量的变化，computer可以监听多个变量

今天就先写到这里吧 ，后面会专门开一栏来写面试的，也欢迎大家都来交流交流。