Here are 20 big factory interview questions for you to check

Implementation principle of new:

1. Creates an empty object. This in the constructor refers to the empty object
2. This new object is connected by the implementation [[prototype]]
3. The constructor method is executed, and properties and methods are added to the object referenced by this
4. If no other object is returned from the constructor, return this, the new object of the created one; otherwise, return the object returned from the constructor.

This refers to whoever calls it.

However, based on this sentence alone, we can not accurately determine the direction of this in many cases. So we need some rules to help us:

The direction of this can be determined in the following order:

This in the global environment

Browser environment: In the global execution environment (outside any function body) this refers to the global object Window, whether in strict mode or not;

Node environment: This is the empty object {} in the global execution environment (outside any function body), whether in strict mode or not;

Whether it isnewThe binding

If it is a new binding and the constructor does not return function or object, then this refers to the new object. As follows:

The constructor returns a value other than function or object. New Super() returns this object.

The constructor returns function or object, and new Super() returns an object of the Super variety.

Whether the function is called by call,apply, or bind. If so, this binds to the specified object.

There is also a special case to note here. If call,apply, or bind passes undefined or null as the first parameter, strictly this will pass null /undefined as the value. The default binding rule applied in non-strict mode, this refers to the global object (node: Global, browser: Window)

Implicit binding, where the call to a function is triggered on an object, i.e. there is a context object at the call location. Typical implicit calls are:xxx.fn()

Default binding, the default rule used when no other binding rule can be applied, usually a stand-alone function call.

Non-strict mode: Node environment, pointing to global object, browser environment, pointing to global object Window.

Strict mode: undefined is executed

Case of arrow function:

The arrow function does not have its own this; it inherits the this bound by the outer context.

Deep copy and shallow copy are for complex data types. Shallow copy copies only one layer, while deep copy copies layers.

Deep copy

Deep copy copies variable values. For variables of non-primitive type, recurse to primitive type variables and then copy. The deep-copy object is completely isolated from the original object, and the modification of one object does not affect the other object.

Shallow copy

Shallow copy copies each property of an object in sequence, but when the property value of an object is a reference type, the reference is copied, and the reference changes as well.

You can use for in, Object.assign, extension operators… , array.prototype.slice (), array.prototype.concat (), etc., e.g. :

It can be seen that the shallow copy only copies the attributes of the first layer. When the attribute value of the first layer is a basic data type, the new object and the original object do not affect each other. However, if the attribute value of the first layer is a complex data type, the new object and the original object point to the same memory address.

Deep copy implementation

Parse (json.stringify (obj))

Json.parse (json.stringify (obj)) is the simplest implementation, but it has some drawbacks:

1. Object whose attribute value is a function cannot be copied.
2. Properties on the prototype chain cannot be copied
3. Cannot handle data of type Date properly
4. Cannot process regexps
5. Ignore the symbol
6. Ignores undefined

2. Implement a deepClone function

1. If it is a basic data type, return it directly
2. If it isRegExporDateType, returns the corresponding type
3. If it’s a complex data type, recurse.
4. Consider circular references

Call and Apply do the same thing, changing the execution of this and executing the function immediately. The difference lies in the different ways of parameter transmission.

• func.call(thisArg, arg1, arg2, …) The first argument is the object to which this points, and the other arguments are passed in.

• Func.apply (thisArg, [argsArray]) : The first argument is the object to which this points, and the second argument is an array or class array.

Let’s think about how to simulate call.

First, we know that any function can call call, indicating that call is a method on the function prototype, and all instances can be called. Namely: the Function. The prototype. The call.

• incallMethod to get the callcall()function
• If the first argument is not passed in, the default is towindow / global(Non-strict mode)
• The incomingcallThe first argument to this is the object to which this points, as we know by the rules of implicit bindingobj.foo().foo()In thethisPoint to theobj; So we can call the function like thisthisArgs.func(... args)
• Return execution result

The implementation idea of Apply is the same as that of Call, but the parameter processing is slightly different. As follows:

Before we begin, we need to understand the concept of currization of functions.

Function corrification is the technique of converting a function that takes multiple arguments into a function that takes a single argument (the first argument of the original function) and returns a new function that takes the remaining arguments and returns the result.

The main functions of function Currization:

• Parameters of reuse
• Early return – Returns a new function that takes the remaining arguments and returns the result
• Deferred execution – Returns a new function and waits for execution

1. Use implicit type conversions

The == operator implicitly converts when the left and right data types are inconsistent.

The value of a == 1&&a == 2&&a == 3 means that it cannot be a basic data type. Because if a is null or undefined bool, it cannot return true.

So it can be inferred that a is a complex data type, and the only complex data type in JS is Object. Remember, what method is called when object is converted to a primitive type?

• If the [symbol.toprimitive] interface is deployed, call it and throw an error if it returns something other than a primitive data type.

• If the [symbol.toprimitive] interface is not deployed, valueOf/toString is called first, depending on the type to be converted

  1. Non-date objects,hint 是 default, the call sequence is:valueOf >>> toString, i.e.,valueOfIf the return is not a primitive data type, the call continuesvalueOfIf thetoStringIf it does not return a primitive data type, an error is thrown.
  2. ifhint 是 string(The Date object’s hint defaults to string) and is called in the following order:toString >>> valueOf, i.e.,toStringIf the return is not a primitive data type, the call continuesvalueOfIf thevalueOfIf it does not return a primitive data type, an error is thrown.
  3. ifhint 是 number, the call sequence is:valueOf >>> toString

2. Use data to hijack (Proxy/Object. DefineProperty)

3. An array oftoStringThe interface calls the array by defaultjoinMethod, overridejoinmethods

Boxes are the object and basic unit of CSS layout, and a page is made up of several boxes.

The element type and display attribute determine the type of the Box. Different types of boxes participate in different Formatting contexts.

Formatting Context

Formatting Context is a rendering area of the page and has a set of rendering rules that determine how its sub-elements will be positioned and how they relate to and interact with other elements.

Block Formatting Context (BFC), Inline Formatting Context (IFC), Flex Formatting Context (FFC) and Grid Formatting Context (GFC). FFC and GFC are newly added in CC3.

BFC layout rules

• In the BFC, the boxes are arranged vertically.
• In the BFC, the vertical distance between the two boxes is determined bymarginProperty determines. The margins of two adjacent boxes belonging to the same BFC will overlap.
• Within the BFC, the outer left edge of each box touches the left edge of the inner box (for the right-to-left format, the right edge touches). This is true even when there is a float. Unless a new BFC is created.
• The region of the BFC does not overlap with the float box.
• A BFC is a separate container on a page, and the child elements inside the container do not affect the outside elements. And vice versa.
• When calculating the height of the BFC, floating elements are also involved.

How do I create a BFC

• The root element
• Float element (float property is not None)
• Position is absolute or fixed
• Overflow is not a visible block element
• Display: inline-block, table-cell, table-caption

The application of the landing

1. Prevent margin overlap (two adjacent boxes within the same BFCmarginOverlap occurs, triggering the generation of two BFC’s, i.e., no overlap.)
2. Clear the internal float (create a new BFC because the float element is involved in calculating the height of the BFC according to the BFC rules)
3. Adaptive multi-column layout (BFC areas do not overlap with float boxes. Therefore, a new BFC generation can be triggered.)

Add async(html5) or defer(html4) properties to the

<script src=".. /XXX.js" defer></script>

The difference between defer and Async is that:

• deferWait until the entire page is properly rendered in memory (DOM structure is fully generated, and other scripts are executed), before window.onload;
• asyncOnce the download is complete, the rendering engine interrupts the rendering, executes the script, and continues rendering.
• If there are more than onedeferScripts are loaded in the order they appear on the page
• multipleasyncThe script does not guarantee the load order

Dynamically create script tags

A dynamically created script with SRC set will not be downloaded, but will be added to the document before the JS file is downloaded.

XHR asynchronously loads JS

There are six ways to implement inheritance in ES5:

1. Prototype chain inheritance

The basic idea of stereotype chain inheritance is to use stereotypes to make one reference type inherit the properties and methods of another.

Disadvantages:

1. When inheritance is implemented through a stereotype, the stereotype becomes an instance of another type, the original instance properties become the current stereotype properties, and the reference type properties of the stereotype are shared by all instances.
2. When creating instances of subtypes, there is no way to pass arguments to the constructor of a supertype without affecting all object instances.

2. Borrow constructors

Borrowing the constructor technique, the basic idea is as follows:

The supertype constructor is called in the constructor of the subtype.

Advantages:

1. Arguments can be passed to the superclass
2. Fixed a problem with stereotypes containing reference type values shared by all instances

Disadvantages:

1. Methods are defined in constructors, so function reuse is irrelevant, and methods defined in supertype stereotypes are invisible to subtypes.

3. Combinatorial inheritance (prototype chain + borrow constructor)

Combinatorial inheritance refers to an inheritance pattern that combines a stereotype chain and a borrowed constructor technique to give play to the best of both. Basic idea:

The inheritance of prototype attributes and methods is realized by using prototype chain, and the inheritance of instance attributes is realized by borrowing constructors. The function reuse is realized by defining methods on the prototype, and each instance has its own attributes.

Disadvantages:

• In any case, the supertype constructor is called twice: once when the subtype stereotype is created and once inside the subtype constructor.

Advantages:

• Arguments can be passed to the superclass
• Each instance has its own attributes
• Function reuse is realized

4. Original type inheritance

The basic idea of prototype inheritance:

Stereotypes allow you to create new objects based on existing objects without having to create custom types.

Inside object(), a temporary constructor is instantiated, the passed object is prototyped, and a new instance of the temporary type is returned. Essentially, object() makes a shallow copy of the passed object.

ECMAScript5 normalizes old-style inheritance by adding the object.create () method. This method takes two parameters: an Object to be used as a prototype for the new Object and (optionally) an Object that defines additional properties for the new Object (which can override properties of the same name on the prototype Object). In the case of one parameter, the object.create () and Object () methods behave the same.

In cases where there is no need to create constructors and just keep one object similar to another, old-style inheritance can work.

Disadvantages:

As with stereotype chain implementation inheritance, attributes containing reference type values are shared by all instances.

Parasitic inheritance

Parasitic inheritance is closely related to original inheritance. The idea of parasitic inheritance is similar to that of the parasitic constructor and factory pattern, which is to create a function that just encapsulates the inheritance process, internally enhances the object in some way, and finally returns the object as if it had really done all the work.

A new object is returned based on Person – — person2, which not only has all the attributes and methods of Person, but also has its own sayHi() method. Parasitic inheritance is also a useful pattern when considering objects rather than custom types and constructors.

Disadvantages:

• Using parasitic inheritance to add functions to an object is inefficient because functions cannot be reused.
• As with stereotype chain implementation inheritance, attributes containing reference type values are shared by all instances.

Parasitic combinatorial inheritance

The so-called parasitic combinatorial inheritance refers to inheriting attributes by borrowing constructors and inheriting methods through the mixed form of prototype chains. The basic idea is as follows:

Instead of calling the constructor of the supertype to specify the stereotype of the subtype, all we need is a copy of the stereotype of the supertype, essentially inheriting the stereotype of the supertype using parasitic inheritance and then assigning the result to the stereotype of the subtype. The basic pattern of parasitic combinatorial inheritance is as follows:

• Step 1: Create a copy of the supertype stereotype
• Step 2: Add to the created copyconstructorattribute
• Step 3: Assign the newly created object to the prototype of the subtype

At this point, we can replace the statement assigned to the subtype prototype by calling inheritPrototype:

Advantages:

The superclass constructor is called only once, which is more efficient. Avoid creating unnecessary, redundant attributes on suberType. prototype, while keeping the prototype chain intact.

Therefore, parasitic combinatorial inheritance is the most rational inheritance paradigm for reference types.

Hidden type

The screen is not the only output mechanism, for example, invisible elements on the screen (hidden elements), some of which can still be read by screen readers (because screen readers rely on accessibility trees to illustrate). To disambiguate them, we classify them into three categories:

• Completely hidden: Elements disappear from the render tree, taking up no space.
• Visually hidden: Not visible on the screen, taking up space.
• Semantic hiding: The screen reader is unreadable, but normally occupies empty space.

Completely hidden

1.displayattribute

display: none;
Copy the code

2. The hidden attribute

HTML5 new attribute, equivalent to display: None

<div hidden>
</div>
Copy the code

Visual concealment

1. The use ofpositionThe and box model moves elements out of the viewable range

1. Set up theposoition 为 absolute 或 fixed, by settingtop,leftEquivalent, move it out of visual area.

position:absolute;
left: -99999px;
Copy the code

2. Set up theposition 为 relative, by settingtop,leftEquivalent, move it out of visual area.

position: relative;
left: -99999px;
height: 0
Copy the code

3. Set the margin value to move it out of the viewable range (viewable range placeholder).

margin-left: -99999px;
height: 0;
Copy the code

2. Use transfrom

1. The zoom

transform: scale(0);
height: 0;
Copy the code

2. mobiletranslateX.translateY

transform: translateX(-99999px);
height: 0
Copy the code

3. rotatingrotate

transform: rotateY(90deg);
Copy the code

3. Set its size to 0

1. Width and height is 0, font size is 0:

height: 0;
width: 0;
font-size: 0;
Copy the code

2. Width height is 0, beyond hiding:

height: 0;
width: 0;
overflow: hidden;
Copy the code

4. Set transparency to 0

opacity: 0;
Copy the code

5.visibilityattribute

visibility: hidden;
Copy the code

6. Hierarchical coverage,z-indexattribute

position: relative;
z-index: - 999.;
Copy the code

Set a higher level element on top of the element.

7. Clip – path cutting

clip-path: polygon(0 0, 0 0, 0 0, 0 0);
Copy the code

Semantic hiding

Aria – hidden attribute

The screen reader software is unreadable and occupies space.

<div aria-hidden="true">
</div>
Copy the code

1. Variables defined by let/const do not get promoted, while variables defined by var do.

2. In the same scope, let and const are not allowed to be declared repeatedly. Var is allowed to be declared repeatedly.

3. Const must set the initial value when declaring a variable

4. Const Declares a read-only constant that cannot be changed.

The important point here is that in JS, complex data types, stored in the stack, are the memory addresses of the heap. The addresses in the stack are invariant, but the values in the heap can be changed. There is no fairly constant pointer/pointer constant ~

A picture is worth ten thousand words, as shown in the figure below. What does not change is the stack memory of 20 stored in A, and the stack memory of 0x0012FF21 stored in B (a fabricated number). While {age: 18, star: 200} is mutable.

Before starting to explain the JS context stack and scope, let’s first explain the concept of JS context and scope.

JS execution context

An execution context is an abstraction of the context in which the current JavaScript code is being parsed and executed. Any code that runs in JavaScript runs in an execution context.

Execution context types are:

• Global execution context
• Function execution context

To perform context creation, you need to do the following:

1. Create a variable object: first initialize the function arguments and promote the function declaration and variable declaration.
2. Scope Chain creation: During the creation phase of the execution-time context, the Scope Chain is created after the variable object.
3. Determine the value of this, ResolveThisBinding

scope

A scope is responsible for collecting and maintaining a series of queries made up of all declared identifiers (variables) and enforcing a very strict set of rules that determine access to these identifiers by currently executing code. — Excerpt from JavaScript You Don’t Know (Vol. 1)

There are two working models of scope: lexical scope and dynamic scope. JS uses the lexical working model. Lexical scope means that scope is determined by the position of variables and function declarations when writing code. (With and eval can modify lexical scopes, but are not recommended and are not specifically described.)

Scope is divided into:

• Global scope
• Function scope
• Block-level scope

JS execution context stack (hereafter referred to as execution stack)

The execution stack, also known as the call stack, has a LIFO (Last in, first out) structure for storing all execution contexts created during code execution.

Here are the rules:

• When JavaScript code is first run, a global execution context is created and pushed onto the current execution stack. Each time a function call occurs, the engine creates a new function execution context for that function and pushes the top of the current execution stack.
• When the function at the top of the stack completes, its corresponding function execution context pops out of the execution stack, and control of the context moves to the next execution context on the current execution stack.

To illustrate this with a code:

The Global Execution Context is first pushed as follows:

Pseudo code:

The global execution context is pushed first
ECStack.push(globalContext);

/ / execution fun1 ();
ECStack.push(<fun1> functionContext);

// call fun2 from fun1;
ECStack.push(<fun2> functionContext);

// call fun3;
ECStack.push(<fun3> functionContext);

//fun3 is executed
ECStack.pop();

//fun2 completes execution
ECStack.pop();

//fun1 completes execution
ECStack.pop();

//javascript continues to execute the following code sequentially, but there is always a globalContext at the bottom of the ECStack;
Copy the code

The scope chain

A scope chain is a process of looking up a variable from the current scope until it finds the global scope. If it doesn’t, it gives up. This layer by layer relationship is the scope chain.

Such as:

Fn2 chain of scope = [FN2, FN1, global scope]

“> < p style =” max-width: 100%

The function of the anti – shake function is to control the number of times the function is executed in a certain period of time. Stabilization means that the function will only be executed once in N seconds, and if it is triggered again in N seconds, the delay time is recalculated.

Example: Xiao Si is on a diet recently, but she eats a lot of snacks. To this end, she and her boyfriend agree that if they do not eat snacks for 10 days, they can buy a bag (do not ask why it is a bag, because it can cure all diseases). But if she eats a snack in between, she has to recalculate the time until she has gone 10 days without snacks before she can buy a bag. So, can’t shut up the small si, no chance to buy a bag (sad story)… That’s anti-shake.

Anti – shake function implementation

1. The first time the event is triggered,timeout 是 null, the calllater()If,immediate 为true, then call immediatelyfunc.apply(this, params); ifimmediate 为 falseAnd thenwaitAfter that, callfunc.apply(this, params)
2. If the event is triggered for the second timetimeoutHas been reset tonull(i.e.setTimeoutCountdown ends), then the process is the same as the first trigger, iftimeoutDon’t fornull(that is, the setTimeout countdown has not ended), then empty the timer and restart the timer.

If immediate is true, the function is called at the start of each wait delay. If immediate is false, the function is called at the end of each wait delay.

Application scenarios of anti-shake

1. Search box input query, if the user has been in the input, there is no need to keep calling to request the server interface, and so on when the user stops input, call again, set a proper time interval, effectively reduce the pressure on the server.
2. Form validation
3. Button submit event.
4. Browser window zooming, resize events (such as recalculating the layout after the window stops resizing), and so on.

> The role of the throttling function

The purpose of the throttling function is to specify a unit of time within which the function execution can be triggered at most once. If the function is triggered multiple times within the unit of time, only one execution can take effect.

Throttling function implementation

To disable first execution, pass {leading: false}; To disable the last execution, pass {trailing: false}

Application scenarios of throttling

1. Button click event
2. Drag and drop event
3. onScoll
4. Calculate the distance of mouse movement (Mousemove)

Definition of closure

JavaScript Advanced Programming:

Closures are functions that have access to variables in the scope of another function

The Definitive JavaScript Guide:

Technically speaking, all JavaScript functions are closures: they’re all objects, and they’re all associated with a scope chain.

JavaScript You Don’t Know

Closures occur when a function can remember and access its lexical scope, even if the function is executed outside the current lexical scope.

Create a closure

Closures allow functions to continue to access the lexical scope at definition time. Thanks to fn, foo’s inner scope is not destroyed after foo() is executed.

The role of closures

1. The ability to access the lexical scope in which a function is defined (preventing it from being recycled).

2. Privatization variable

3. Simulate block-level scopes

4. Create a module

The module pattern has two prerequisites (from JavaScript you Don’t Know)

• There must be an external enclosing function that must be called at least once (each call creates a new module instance)
• Enclosing functions must return at least one inner function so that the inner function can form a closure in the private scope and can access or modify the private state.

Before implementing the promise.all method, we must first know the function and characteristics of promise.all, because in clear Promise. All function and characteristics of the case, we can further write implementation.

Promise. All functions

Promise.all(iterable) returns a new Promise instance. This example will be a big pity if all promises in the iterable parameter are fulfilled or if no promise is included in the parameter, the state will become a big pity. If the promise parameter has a failed promise, the instance callback fails because of the return result of the first failed promise.

let p = Promise.all([p1, p2, p3]);
Copy the code

The state of P is determined by P1, P2 and P3, which can be divided into the following: There are two cases:

(1) Only when the states of P1, P2 and P3 become depressing, the state of P will become depressing. At this time, the return values of P1, P2 and P3 will form an array and be passed to the callback function of P.

(2) As long as p1, P2 and P3 are rejected, P becomes rejected, and the return value of the first rejected instance is passed to p’s callback function.

The characteristics of the Promise. All

Promise.all returns an instance of Promise

• If the argument passed is an empty iterable,Promise.all 会 synchronousReturns a completed statepromise
• If the parameters passed in do not contain any promises,Promise.all 会 asynchronousReturns a completed statepromise
• In other cases,Promise.allReturns aPendingThe state of thepromise.

Promise.all Indicates the state of the returned Promise

• If all the promises in the parameters passed in become completed,Promise.allThe returnedpromiseAsynchronously become complete.
• If one of the parameters passed in ispromiseFailure,Promise.allAsynchronously give the failed result to the failed state callback, regardless of the restpromiseWhether or not complete
• In any case,Promise.allThe returnedpromiseThe result of the completion state is an array

Promise. All implementations

> using the Array. The prototype. Flat

ES6 added the flat method for array instances, which “flattens” nested arrays into one-dimensional arrays. This method returns a new array with no effect on the original array.

Flat flattens only one layer by default. If you want to “flatten” a nested array of multiple layers, you need to pass flat an integer indicating the number of layers you want to flatten.

When the integer passed is greater than the number of nested layers of the array, the array is flattened into a one-dimensional array. The maximum number that JS can represent is math.pow (2, 53) -1, so we can define a flattening deep function like this

Utilize reduce and concat

Use Stack to unnest multiple layers of nested arrays indefinitely

Method 1: use ES6 to add data type Set

A Set is similar to an array, but the values of its members are unique and have no duplicate values.

Method 2: Use indexOf

Method 3: Use includes

Method 4: Use reduce

Method 5: Use Map

ES6 specifies that the default ‘Iterator’ interface is deployed in the ‘symbol. Iterator’ property of the data structure. A data structure is considered iterable as long as it has the ‘symbol. iterator’ property (the ‘symbol. iterator’ method corresponds to the iterator generator and returns an iterator object).

Characteristics of an iterable

• withSymbol.iteratorProperties,Symbol.iterator()Returns an traverser object
• You can usefor ... ofcycle
• byArray.fromConvert to an array

The native hasIteratorInterface data structure:

• Array
• Map
• Set
• String
• TypedArray
• The arguments object for the function
• The NodeList object

Although browsers have the same origin policy, the SRC attribute of the

Implementation principle:

• Step1: create the callback method
• Step2: Insert the script label
• Step3: The background receives the request, parses the callback method passed by the front end, returns the call of the method, and passes the data as parameter to the method
• Step4: the front end performs the method call returned by the server

Jsonp source code implementation

Use:

Server code (Node):