preface

The following are the interview questions of The Hangzhou endpoint (the interview lasted 43 minutes, the front pulled hips, the back was a little better), and their self-summary:

1. Self introduction + project introduction

2. Vue bidirectional data binding principle

My answer:

Using “data hijacking” in combination with the publist-subscriber mode, the setter and getter of object.definedProperty () is used to hijack various properties of the data, notifying subscribers when the data changes and triggering the corresponding listener callback.

3. Vue listens to arrays

My answer:

I said I don’t think I can listen on arrays, but I thought I could deep:true, but I didn’t say… Overwrite the array method…

4. Vuex

My answer:

Vuex is the state management mode of Vue, which is equivalent to a shared warehouse, which can be accessed by other pages. There are five properties in Vuex:

  1. State, store data.

  2. Getters: Obtains data, which is equivalent to computed.

  3. Mutations: The only way to modify the store state is synchronous.

  4. Actions: Presents the data modified by Mutations, which is asynchronous.

  5. Module: When a store file is too large, it can be split into multiple modules and combined together.

Summary answer:

1. Vuex is the state management mode of Vue, equivalent to a shared warehouse, which can be accessed by other pages; 2. The Vuex state store is reactive. When the Vue component reads the state from the store, if the state of the store changes, the component that uses the store will also be updated. 3. State: Stores data. The component uses store.state. To get data. 4. Getters: Obtains data, equivalent to computed state, through this.$store.getters. To obtain. 5. Mutations: The only way to modify the store state is through synchronization functions such. Store.com. MIT (method name, value). Actions: Submit the revised data for asynchronous operation. Module: Modular Vuex. When a store file is too large, it can be divided into multiple modules, so that each Module has its own State, Getters, Mutations, Actions and Module.Copy the code

5. Axios interceptor

My answer:

Use the response interceptor only, and go to the error page when the returned status code is not 200. (Without elaborating…)

Summary answer:

(403: No access; 404: Resource does not exist. 500: Server internal error. 503: Requests are too frequent, try again later).

6. Js data type judgment reference data type

My answer:

  1. Basic data types: Number, String, Boolean, Null, Undefined, Symbol(ES6 added), BigInt(ES11 added);

  2. Reference data types: Function, Array, Object, Date, RegExp. (Forgot to mention the difference…)

3. Instanceof and Object. The prototype. ToString. Call () summary of answer:

  1. Say which ones

  2. Basic data types are stored in the stack, reference data types are stored in the heap, and their Pointers are stored in the stack.

  3. Typeof: Can determine the basic data type

  4. How to determine the reference data type: use instanceof;

    You can also use the Object. The prototype. ToString. Call ()

    Array: array.isarray ()

7. Instanceof

Instanceof null and undefined (Error is reported)

The left side of instanceof must be the object

Little Red Book P142: The problem with using Instanceof is to assume that there is only one global execution context. If you have multiple frames in your web page, you might have two different execution contexts involved, and therefore two different versions of the Array constructor. If you pass an array from one frame to another, the constructor for that array will be different from the one created locally in the second frame.

So there’s array.isarray () again, which determines whether a value is an Array, regardless of which global execution context it was created in.

8. Instanceof principle

My answer: access whether the method exists on the prototype.

The instanceof operator detects whether the constructor’s prototype property is present on the prototype chain of an instance object

9. Instanceof

My answer: new an instance that points its __proto__ attribute to the constructor’s prototype

Summary answer:

10. Prototype, prototype chain

If the constructor does not have that method, then it will look for that method in the constructor’s prototype. At the top of the prototype chain is Object.

Summary answer:

The concept of a stereotype: When each javascript object (except null) is created, it is associated with another object. This object is called a stereotype, and each object “inherits” properties from the stereotype.

person. __ proto __ == Person.prototype

Person = Person.prototype.constructor
Copy the code

11. Inheritance

My answer: I said there were six, but I didn’t list them because I forgot the pros and cons of each…

Summary answer:

  1. Borrowing constructors: Use call() or apply() in subclass constructors

  2. Prototype chain inheritance: An instance of a parent class acts as a prototype for a child class

  3. Composite inheritance: Combines the best of the first two

  4. Prototype inheritance: prototype (shallow copy) that assigns objects to the null object constructor with an empty object as the middle

  5. Parasitic inheritance: Using the original type inheritance to make a shallow copy of a target object, enhancing the ability of the shallow copy

  6. Parasitic combinatorial inheritance: Implement inheritance using a combination of constructor borrowing passing parameters and parasitic patterns (the most recommended approach)

I’ll write a separate article later.

12. How new instantiates the object

My answer:

  1. New is an empty object
  2. Refers the object’s __ proto__ to the constructor’s prototype

And then I forgot (change this point)

Summary answer:

  1. Create an empty object let person = {}

  2. Point the proto of the new object to the constructor’s prototype person.__ proto __ = person.prototype

  3. Change this to point to person.call (Person) //{}. Constructor ()

  4. Save the address of the initialized new object in the variable to the left of the equals sign

13. This points to (Strict mode)

My answer:

  1. Global context
  2. Inside the function
  3. Eval (not recommended)
  4. In strict mode: this is undefined

Summary answer:

  1. In the global context, this refers to window in either strict or non-strict mode

  2. Function context, non-strict mode: this refers to the calling function, non-strict mode: this is undefined

  3. The eval consider

  4. This of the arrow function: this of its nearest outer normal function, and cannot be changed

  5. When the new keyword calls the function, this points to the instance object

  6. Object calls, pointing to objects

14. Change the way this points

My answer:

  1. Call () : The arguments passed are one by one

  2. Apply () : The arguments passed are arrays

  3. Bind () : returns a new function. Multiple bind’s are valid only the first time

15. = = = {} {}

My answer: false, objects are reference types and exist in the heap. Each object has its own space.

16. Closures, pros and cons

My answer: formally, a function returns a function within a function that has a reference to a variable in its parent scope. Advantages: Private variables (privileged methods of constructors), scope disadvantages of extended variables: Memory leaks if not freed (occupying memory that we can’t use)

17. Anti-shaking and throttling

My answer:

Bufferproof: The input box continues to input for a fixed period of time, and when this period of time is not input, this function is executed.

Application scenario:

  1. Input box search content, through anti – shaking to save traffic;

  2. Constantly firing the window.resize event (to change the window size), you can use stabilization.

Code implementation: timerThrottling: No matter how many times the throttling is triggered within the specified time, it only executes the last time, that is, only once per unit of time.

Application scenario: Continuous mouse click is performed only once per unit time

Code implementation:

  1. The time stamp

  1. The timer

18. The difference between arrow function and ordinary function

My answer:

  1. Omit the function keyword and return;

  2. When there is only one argument, the parentheses can be omitted. If multiple parameters are specified, parentheses must be used. When the code is a single line, you can omit the curly braces;

  3. Does not have this itself, inherits this from the nearest normal function in the current context, and cannot change what this points to;

  4. You can’t use new to instantiate objects, so there are no prototypes.

  5. Without arguments, use REST instead.

19. Js lazy loading

My answer: wrong, I thought asynchronous loading was lazy loading…

The script tag can be set as defer and async to implement deferred loading. Defer: Asynchronously download the script until the document is parsed and the script is executed (in order). Async: Asynchronously download the script, which is executed immediately after the download is completed.

Summary answer:

Lazy loading:

  1. Use setTimeout to load lazily;

  2. The js script is at the end.

Asynchronous loading:

  1. Defer: Download the script asynchronously until it is executed (in order) after the document is parsed;

  2. Async: asynchronous download steps. The steps are executed immediately after the download is complete. After the steps are executed (the execution order is not guaranteed), the page continues to parse.

20. Document. Write and document. InnerHTML

My answer: After the interviewer says it two or three times, I can’t hear what the first one is saying. Then I hear the docunent.innerhtml, I think document.right, I’m thinking, I’ve never seen that before… And finally I answered innerHTML and innerText.

A quick review of innerHTML and innerText:

  1. InnerHTML: Gets text information, including tags
  2. InnerText: Gets text information, not labels

21. Rearrange and redraw

My answer:

Reordering is also called backflow: When DOM nodes are added or deleted, the position size changes, resulting in backflow;

Redraw: Changing the color, font, and visibility of an element will cause a redraw.

A rearrangement must redraw, but a redraw will not rearrange.

22. js which operations can cause memory leaks

My answer:

  1. closure

  2. Unexpected globals (global variables declared inside a function)

  3. Timers and timers that are not empty

23. The flow of events

My answer: capture phase -> event phase -> bubble phase, as an example.

Summary answer:

DOM2 level, addEventListener event listener, event bubble;

Capture phase -> Event phase -> Bubble phase

Window -> Document -> < HTML > -> < body>… < div> -> < span> < span> < div>… < body> -> < html> -> Document -> Window

Example: If you click < span> to output 1, click < div> to output 2;

  1. If you click on < span>, it will print 1, then 2;
  2. Click < div> to output only 2.

24. The Event. The target and the Event. The currentTarget.

My answer: I heard an event. target, and the other one was event. parentTarget….

Event.currenttarget: The object to which the Event is bound (the current element bound to the Event)

25 Browser event loop

My answer: only the browser event loop, not the Node event loop:

The browser is divided into synchronous tasks and asynchronous tasks, synchronous tasks on the main thread in order to execute, asynchronous tasks into the task queue, and the task queue is divided into macro tasks and micro tasks.

  1. After the synchronization task is executed, check the task queue. If there are macro tasks and micro tasks, execute the micro task first and then the macro task.
  2. If microtasks are generated during the execution of microtasks, they will be added to the microtask queue and executed in sequence until all microtasks are completed, and then macro tasks will be executed.
  3. If a microtask is generated during the execution of a macro task, the microtask is executed after the current macro task is completed. The macro task is executed after all microtasks are completed.

26 Macro tasks and microtasks

My answer:

Browser macro tasks: I/O, setTimeout, setInterval, requestAnimationFrame

Browser microtasks: promise.then. Catch. Finally, MutationObserver

Node Macro tasks :I/O, setTimeout, setInterval, and setImmediate

Node microtasks: process.nextTick, promise.then. Catch. Finally

Macro tasks include:

MacroTask The browser Node
I/O ✅ ✅
setTimeout ✅ ✅
setInterval ✅ ✅
setImmediate ❌ ✅
requestAnimationFrame ✅ ❌

Microtasks include:

MicroTask The browser Node
process.nextTick ❌ ✅
MutationObserver ✅ ❌
Promise.then catch finally ✅ ✅

27. Understanding Promise

A method of asynchronous programming that optimizes callback hells to accept two arguments (resolve, reject), both of which are functions; There are three states: pending, fulfilled, and rejected. The returned result is also a Promise object. The state can change only once.

28 Promise Static methods

My answer: promise.all and promise.race

29. New ES6 features

  1. Let, const
  2. class
  3. Deconstruction assignment
  4. Arrow function
  5. promise
  6. Async and await

30. The difference between let and const var

My answer:

  1. There is no variable promotion, there is a temporary dead zone, use in advance will report an error;

  2. There is block-level scope, var does not;

  3. You cannot declare variables twice;

  4. Const variables must be assigned, declared constants cannot be modified, and declared objects can modify properties.

31. for… Of with the for… in

My answer: For… Object.keys() for… object.keys () for… In: Specifies the name of the property for iterable objects to traverse. Traversing groups is not recommended

32. HTTP status code

My answer:

3. 302: Found // Temporary redirection 4. 304: Not Modified // Resource is Not Modified, use negotiation cache 5. 400: Bad Request // A syntax error occurs in the Request message. 401: Unauthorized // No login is required and authentication is required. 404: Not Found 10.408: Request time-out // Request timed out 11.500: Internal Server Error 12.503: Service Unavailable // The server is busy or under maintenance (requests are too frequent) 13.505: HTTP Version not Supported // The REQUESTED HTTP Version is not SupportedCopy the code

33. Strong cache and negotiated cache

Check out this article

34. Why do you need three handshakes

My answer:

First time: Prove that the client can send data.

The second time: prove that the server can receive data and send data;

Third time: Prove that the customer can also receive data.

35. BFC

Block Formatting Context is used to solve the problem of overlapping margins of two boxes with uniform parent elements.

Trigger condition:

  1. Body root element (largest BFC);

  2. Position: absolute or fixed;

  3. display(inline-block table-cell table-caption flex);

  4. Float is not none;

  5. Overflow is not visibility (hidden, scroll, auto, inherit).

36. Flex

  1. Flex-direction: Defines the direction of the main axis:

    Row (default) : Horizontal, starting from the left. Row-reverse: Horizontal, starting from the right. Column: Vertical direction, from top to bottom. Column-reverse: indicates the vertical direction from bottom to top.Copy the code

  2. Flex-wrap: Whether the project wraps:

    Nowrap (default) : No line feeds. (1,2,3,4,5,6) wrap (1,2,3,4) (5,6) wrap-reverse (1, 2, 3, 4) (5, 6)Copy the code

  3. The flex – flow: (flex – direction) (flex – wrap). Default value :row nowrap

  4. Author-content: How items are arranged on the main axis

    1. Flex-start: left-aligned
    2. The flex – end: right alignment
    3. Center: a center
    4. Space-between: Two segments are aligned so that items are equally spaced and divided
    5. Space-around: Each project is equally spaced on both sides, so the projects are twice as far apart as the edges

  5. Align-items: How items are aligned on cross axes

    1. Flex-start: Cross-axis start alignment
    2. Flex-end: Cross axis focus alignment
    3. Center: Aligns the midpoint of the cross axis
    4. Baseline: Baseline alignment of the first line
    5. Stretch: The default value. No height is set or auto is set. The container is full

  6. Align-content: How items are aligned on cross axes when multiple axes are aligned (one axis, this attribute is invalid)

    1. Flex-start: left-aligned
    2. The flex – end: right alignment
    3. Center: a center
    4. Space-between: Two segments are aligned so that items are equally spaced and divided
    5. Space-around: Each project is equally spaced on both sides, so the projects are twice as far apart as the edges

    Reference the justify – content

37. The left width is fixed, and the right width is adaptive

My answer:

  1. Left set width and height, left float; Margin-left: width of the box on the left;
  2. Parent display: Flex, left left set width and height, right only height, width 100%;
  3. Margin-left: width of box on left; margin-left: width of box on left;
  4. BFC, left float, right overflow: hidden.

38. TypeScript

My answer: not much. I used generics and interfaces for the React project, detected errors while writing code, and regulated coding.

39. Ask

Requirements for interns

Learning methods

The last

Generally speaking, these knowledge points are basically know, but did not answer too complete, this time did not enter, efforts for two months, such as autumn recruit again. Come on!