Front-end development interview (1)

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

1. Some knowledge points to be mastered in the interview

The following is sent to me by HR the day before the interview. There is a little discrepancy with the interview: You
need to understand the following:
1. Box model/css layout/Written test level center method
2. Closure/GIT/Browse Circulation mechanism
3. Project optimization/The problem pointed to by This
4. Change the second timestamp to 2020-5-9 00: 00 to display
5. The URL link finally returns an object {a:1,b:2} implementation method
6. Writing
promises 7. Questions about es6
8. Questions about js native
9. Implementing encapsulation of a component
10. Converting _ to hump naming
11.
Deep copy 12. The life cycle of
vue and react 13. Writing vue components
14. The difference between call, apply, bind
15. Type of, axios, jsonp related knowledge
16. Write a todolist
17. Write a person class, which needs a username and age, there is a method, and the order of code execution

2. During the interview

1. The first question: 如何使一个宽高为100px的盒子在屏幕水平垂直居中?
My answer is to use absolute positioning to set the top value to 50% and the left value to 50% so that the box can be centered vertically and horizontally; (because I did not pay attention to the written test yesterday. Is it at the center point? I didn’t see it) The
interviewer said that I need to add a value. In the end, I stubbornly said that I need to add a margin value, but I just can’t think of how many pixels to add
Insert picture description here
. :-50px;margin-top:-50px;

Insert picture description here

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

Refer to the link: About the vertical and horizontal centering of the box

2. Second question 什么是盒子模型?
Answer:

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

3, third problem this的指向问题?
A:
default binding: the global environment, the default binding to the this window.
Implicit binding: In general, when the function call is contained in the direct object, also known as a method call, the this implicit Bind to the direct object.
Implicit loss: Implicit loss means that the implicitly bound function loses the bound object, and thus is bound to the window by default.
Explicit binding: Bind the object to this through the call(), apply(), and bind() methods, which is called explicit binding.
New binding: If a function or method call is preceded by the keyword new, it constitutes a constructor call. For this binding, it is called new binding

4. call()、apply()What is the difference between the fourth question ?
Answer:更简单地说,apply和call功能一样,只是传入的参数列表形式不同也就是说:call调用的为单个,apply调用的参数为数组

5. The fifth question用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();

Results: 3, 3

7、打印的顺序

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

The result is begin, promise, end, setTimeout.
Since settimeout is an asynchronous task, it needs to be executed after the main task is completed.

7. vue的计算属性是什么?
Because I can't remember it anymore. The interviewer just said to skip it, which is embarrassing.
Answer: 1. 首先vue的计算属性是computer,它是实时响应的,计算属性会依赖于他使用的data中的属性,只要是依赖的属性值有改变,则自动重新调用一下计算属性
2.如果它所依赖的属性值没有发生改变,那么计算属性是从它的缓存中来的,并没有重新编译

8. vue的watch是什么?
My answer is not very accurate . I know it's cold here. The interviewer said next time I'm ready to deliver it. So that's it for this interview. . . .
Answer: What is the difference between 一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。
extended
watch and computer?
Watch is to monitor the changes of a variable or constant, and the computer can monitor multiple variables

The italic style will be written here first, and there will be a special column for interviews later, and everyone is welcome to communicate .

Guess you like

Origin blog.csdn.net/weixin_45054614/article/details/112895032