2020.10.20 English front-end telephone interview summary

This is the second front-end interview in my life. This front-end position needs to have good oral English communication skills. My English is very poor. The interviewer asked me to introduce myself in English and said that I understood my level.嘤嘤嘤···so there is nothing to say in English, I also know that my English is poor~

So let's record the technical questions asked

1. Understanding of functional programming

[My answer]: Functional programming is a programming paradigm. The same input will always get the same output without side effects.

[Interviewer]: Um...

(My answer is not very comprehensive)

Reference answer :

Teacher Ruan Yifeng "Introduction to Functional Programming ":

"Functional programming" is a "programming paradigm" (programming paradigm), that is, the methodology of how to write programs. It belongs to a kind of "structured programming" . The main idea is to write the calculation process as a series of nested function calls as much as possible.

Functional programming has five distinct characteristics:

Functions are "first class citizens"
Only use "expression", not "statement"
no side effects"
Do not modify status
Referential transparency

The meaning of functional programming:

Simple code, fast development
Close to natural language, easy to understand
More convenient code management
Easy to "concurrent programming"
Hot code upgrade

2. What are the basic data types of JS

[My answer]: boolean, number, string, undefined, null, object, ES6 added Symbol, ES2020 added bigint

[Interviewer]: Yeah

Reference answer : This answer is the boolean, number, string, undefined, null, object I answered, and then ES6 adds Symbol, ES2020 adds bigint

3. What is a closure

[My answer]: Closure is a phenomenon in the running process of JS, which generally occurs when a function is used as a parameter and a function is used as a return value. The variable inside is not destroyed, and a closure is generated.

[Interviewer]: Is the closure in the returned function or the variable referenced by the function produces a closure?

[My answer]: The external variable referenced in the returned function produces a closure

[Interviewer]: Uh...

(I didn't answer this question well at the time, and I said a lot in a mess, and I felt that I couldn't explain it clearly)

Reference answer:

Still quote the " Learning Javascript Closure (Closure) " by Teacher Ruan Yifeng :

Since in the Javascript language, only the sub-functions inside the function can read the local variables, the closure can be simply understood as "a function defined inside a function". So, in essence, a closure is a bridge that connects the inside of the function with the outside of the function. Closures can be used in many places. It has two biggest uses, one is to read the variables inside the function mentioned earlier, and the other is to keep the values of these variables in memory.

4. What is the event mechanism of JS?

[My answer]: It refers to the event loop. When JS is executed, there is a main task execution stack. If an asynchronous task is encountered in the main task, it will be placed in the callback queue. After the main task is executed, the callback queue The task will enter the main task. Among them, asynchronous tasks are divided into macro tasks and micro tasks.

[Interviewer]: Talk about microtasks

[My answer]: Micro tasks are executed immediately after the current round of tasks are executed, such as Promise. The macro task is executed in the main task execution stack after all tasks in the main task execution stack are executed.

Reference answer:

JS is a single-threaded language, which means that there is only one thread responsible for executing code in the JS execution environment. However, the runtime environment of JS and certain APIs of JS can open new threads at runtime. When certain time-consuming tasks are performed in the callback stack of the JS code, these time-consuming tasks will be placed in the WebAPI, and when they can be executed, they will enter the message queue. When the callback stack is empty, it will be monitored by the Event Loop, and the Event Loop will take the first task from the message queue and put it on the callback stack for the main task to execute.

The task in the JS callback queue is called [macro task], and some additional requirements can be temporarily added during the execution of the macro task, and it can be selected as a new macro task into the queue (such as setTimeout), or as the current [Micro task] of the task will be executed immediately after the current task ends.

The purpose of microtasks is to improve the overall responsiveness. At present, most asynchronous calls are executed as macro tasks. Promise, MutationObserver, and process.nextTick are executed as microtasks at the end of this round of calls.

5. The difference between const and let

[My answer]: const and let define block-level scope variables, const defines constants, and let defines variables

[Interviewer]: Can the variables defined by const be modified?

[My answer]: The primitive type variable defined by const cannot be modified, and the application type variable defined by const cannot modify the reference address of the variable, but the attribute value of the variable object can be modified.

Reference answer :

ES6 adds letand constcommands, but the declared variables are only valid in the code block where the command is located. constDeclare a read-only constant. Once declared, the value of the constant cannot be changed.

constIn fact, what is guaranteed is not that the value of the variable cannot be changed, but that the data stored in the memory address pointed to by the variable cannot be changed. For simple types of data (numerical value, string, Boolean value), the value is stored at the memory address pointed to by the variable, so it is equivalent to a constant. But for data of composite types (mainly objects and arrays), the memory address pointed to by the variable is only a pointer to the actual data, and it constcan only be guaranteed that the pointer is fixed (that is, it always points to another fixed address). As for whether the data structure it points to is variable, it is completely out of control. Therefore, you must be very careful when declaring an object as a constant.

6. The principle of Vue's two-way data binding

[My answer]: It is achieved through the value attribute and the change method

[Interviewer]: How did it happen?

[My answer]: The value of the element is bound to the value, and then the change event is monitored, and the value is updated when the change event is triggered

[Interviewer]: How to monitor events and update?

[My answer]: Just listen to the change event

[Interviewer]: More than that...

(The next day I remembered that this question should be tested on the Vue principle...I was crying stupidly by myself)

Reference answer:

Vue data two-way binding mainly refers to: data changes update view, view changes update data. Among them, View changes to update Data can be achieved through event monitoring, so the work of Vue data two-way binding is mainly how to update View according to Data changes.

When you pass a normal JavaScript object into a Vue instance as the data option, Vue will traverse all the properties of this object and use Object.defineProperty to convert all these properties to getter/setter.

These getters/setters are invisible to users, but internally they allow Vue to track dependencies and notify changes when the property is accessed and modified.

Each component instance corresponds to a watcher instance, which records the “touched” data property as a dependency during the component rendering process.

Later, when the setter of the dependency is triggered, the watcher will be notified so that its associated components will be re-rendered.

The main function:

Observer: It traverses the data object, including the properties of the sub-property object. Use Object.defineProperty() to add setters and getters to the properties. In this case, assigning a value to this object will trigger the setter, and then you can monitor the data change.

Parser Compile: Parse the Vue template instructions, replace all the variables in the template with data, then initialize the rendering page view, bind the update function to the node corresponding to each instruction, and add subscribers who monitor the data. Once the data changes, After receiving the notification, call the update function to update the data.

Subscriber Watcher: Watcher subscribers are the communication bridge between Observer and Compile. The main task is to subscribe to the message of attribute value changes in Observer. When the message of attribute value change is received, the corresponding update function in the parser Compile is triggered .

Each component instance has a corresponding watcher instance object, which will record the attribute as a dependency during the component rendering process, and then when the setter of the dependency is called, it will notify the watcher to recalculate, so that its associated component can be updated -This is a typical observer pattern

Subscriber Dep: The subscriber adopts a publish-subscribe design model, which is used to collect subscriber watchers, and perform unified management of listener Observer and subscriber Watcher.

7. What is the role of Object.defineProperty

[My answer]: It is used to monitor the changes of object properties. The set method can set the properties, and the get method can get the properties, and can monitor the modification of the properties, but cannot monitor the addition and deletion of the properties.

[Interviewer]: Why can’t I monitor the deletion of attributes?

[My answer]: I don’t know this. The JS API is defined in this way. Why can’t you monitor the deletion of attributes? It involves the underlying principles of JS

【Interviewer】:······

Reference answer:

Object.defineProperty()The function is to directly define a new attribute on an object, or modify an existing attribute.

Object.defineProperty(obj, prop, desc)

obj The current object whose properties need to be defined
prop the name of the property that needs to be defined
desc attribute descriptor

In Vue2.0, for Object.defineProperty, processing arrays and objects are treated the same, except that they are rewritten during initialization getand setmonitored for changes in arrays or objects. New properties need to be reinitialized manually. For arrays, it’s just a bit special. Push and unshift values will also add indexes. For new indexes, observe can also be added to achieve the effect of monitoring; pop and shift values will delete and update the index, which will also trigger defineProperty. get and set. For the array that is re-assigned to length, no new index will be added because it is not clear how many new indexes are added. According to the ecmaspecification, the maximum value of the index is 2^32 - 1, and it is impossible to assign indexes in a loop.

8. CSS to achieve vertical centering in several ways

[My answer]: Flex is the easiest to implement

[Interviewer]: Then tell me how to implement flex

[My answer]: First set flex-direction to column, which means vertical layout, and then set justify-content to center, which means vertical centering, right?

[Interviewer]: Then it needs to be in the middle level

[My answer]: Then set another align-item to center.

Reference answer:

Code warehouse address: 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 layout.html

Line-height and vertical-align center the image vertically.html

line-height vertically center a single line of text.html

Padding realizes the vertical centering of child elements.

Flexible layout.html

Absolute positioning and transform.html

Absolute positioning and negative margins vertically center block-level elements.html

Absolute positioning and negative margins for vertical centering.html

Absolute positioning combined with margin:auto.html

Set a third-party benchmark.html

9. What does flex: 1 mean, how does flex achieve scaling, and what is the meaning of the three parameters of the flex attribute?

[My answer]: When flex is a number, it is a ratio. For example, if the flex of two child elements is 1 and 1, then the ratio of the two in the parent element is 1:1. If these two child elements The flex is 1 and 2, then their ratio in the parent element is 1:2

[Interviewer]: If the properties of flex are three parameters, what do they mean?

[My answer]: Can the flex attribute value still be three parameters? I don’t know about this...

[Interviewer]: Well, it's okay, then you can talk about how flex achieves scaling

[My answer]: Does it mean cover and contain?

[Interviewer]: What is this attribute called

[My answer]: Uh... don’t remember

[Interviewer]: flex you need to review

Reference answer:

Novice tutorial: https://www.runoob.com/css3/css3-flexbox.html

flex Attributes are used to specify how to allocate space for flexible child elements.

flexAttribute flex-grow, flex-shrinkand flex-basisattribute shorthand property.

Note: If the element is not a child element of the flexbox model object, the flex property has no effect.

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

Analysis of each value:

auto: The calculated value is 1 1 auto
initial: The calculated value is 0 1 auto
none: The calculated value is 0 0 auto
inherit: inherit from the parent element
[flex-grow ]: Define the expansion ratio of the flex box element. A number that specifies how much the project will expand relative to other flexible projects.
[flex-shrink ]: Define the shrinkage ratio of the flex box element. A number that specifies how much the project will shrink relative to other flexible projects.
[flex-basis ]: Define the default base value of the flex box element. The length of the item. Legal values: "auto", "inherit" or a number followed by "%", "px", "em" or any other length unit.

The interviewer is very good. After he felt that my English was not good, he still investigated some of my technical problems. I talked for a total of 17 minutes. At the end, I explained that this position requires good English communication skills. Then I gave me some encouragement and some suggestions. Let me review the flex layout, closures, and Vue two-way data binding. Set principle.

Front-end knowledge must be prepared well. In addition, I think I have to improve my English. I feel that my English should be saved. After all, I have passed the sixth level (mainly luck Bursting), the reading ability is still OK (self-feeling), but the mouth can't speak, the ears can't understand, it should still lack oral English communication training. Now set up a flag for yourself to practice speaking well, come on!