What will the 2020 front-end interview ask?

The article is reproduced from the public number: Front-end craftsman (microsignal: frontJS)

2020 is destined to be an extraordinary year, the competitive pressure to find a job can be imagined, how to stand out from the many interviewers, summed up a wave of front-end common interview questions, I hope to help you!

1. Javascript scope and pre-resolution

What is pre-resolution?

In two steps:

Step 1: (The code has not yet been executed.) Before previewing the page, after writing)

Look for the var keyword in the program if you find a variable that was defined in advance to the var undefined

Look for ordinary functions in the program, and if found, the function is promoted, assigning the entire function to the function name.

If var are looking for var with the same name as the function, the function takes precedence.

Step 2: Resolve the code line by line. F ollow the order up and down. If you encounter a function definition, ignore it.

The point: The same applies to js pre-resolution within the function.

We use a few interview questions to understand the scope and pre-parsing principles

function fun(){ console.log(n); v ar n = 456; c onsole.log(n); } var n = 123; fun(n);

Guess what's out of this question? Maybe it's not what you think, why?

The code analysis is as follows:

Lines 1-5 define the function fun

Six lines define the variable n

Seven lines execute the function and pass in the variable n

Note: There is pre-resolution inside the fun function.

Pre-parsing and execution steps:

1. Before the Fun function starts executing, the var n is executed ahead of time and initialized to undefined

1. Ignored because function incoming argument n is not used.

1. Start executing line 2 with the output undefined

1. Execute the third line, at which point n is n s 456, which resets the n value to 456.

1. Execute line 4 and output the changed n.

Through the analysis of the above steps, you can learn the principle of pre-resolution (for variables with var to assign the initial value in advance)

Let's look at another question to see the pre-parsing of functions

Guess what's out of this question? Maybe it's not what you think, why?

The code analysis is as follows:

29 lines define a global variable

Lines 30-32 define a function f1

Lines 33-36 define a function f2

37 lines execute the function f2

38 lines output n

Pre-parsing and execution steps:

1. Before the code executes, pre-parse the initialization variables n, f1, f2, and place them all at undefined .

2. Then execute line 29 and assign a value to the variable n

3. Then execute lines 30-32 and assign a value to the function variable f1, i.e. f1 is a function

4. Then execute lines 33-36 to assign a value to the function variable f2

5. Execute line 37, i.e. execute the f2 function.

1. Before the f2 function executes, it is also pre-resolved, initializing n to undefined then assigning n to 456, and then calling the f1 function to execute.

1. f1 is executed in f2, so the scope of f1 should be f2 and 456 should be output?

There is no caller when the f1 function is executed on line 8.35, i.e. the f1 function is global scope and the output global n is 123

9. Line 38 outputs the global variable n directly, i.e. 123

Go ahead and ask another question:

Guess what's out of this question? Maybe it's not what you think, why?

The code analysis is as follows:

Pre-resolved variables defined only for var and function

Pre-parsing and execution steps:

1. Pre-parsing first initializes the variable length obj f1 and assigns the value to undefined

2. Then assign a value of 100 to the variable length

3. Then assign a value to the function variable f1 as a function

4. Then assign an object to the variable 'obj

5. Line 52, call the f2 function execution of the object obj incoming parameters f1 and 1

6. Line 47, the f2 function receives argument f1, and then executes the f1 function

7. Io., the f1 function executes no callers, the scope is global, this points to window outputs the global variable length that is, 100

8. Line 47, the f2 function receives argument f1, to get all arguments you need arguments the first arguments[0]==f1 the second arguments[1]==1 and so on.

9. Line 49, arguments[0]() . f1() .

10. Note arguments[0] is not the same as the scope of f1, line 48 executes f1 directly, no caller, scope is global scope, but the scope of arguments[0] is arguments that is, this argument arguments then output 2, because the property of arguments object is length

2. How the front end handles cross-domains

1. Why cross-domain problems occur

Sameoriginpolicy is a convention that is the core and most basic security feature of a browser, and if the same-origin policy is missing, the normal functionality of the browser may be affected. I t can be said that the Web is built on homologous policies, and browsers are only an implementation of homologous policies. S ame-origin policies prevent javascript scripts for one domain from interacting with the contents of another domain. The so-called homologous (i.e., in the same domain) is when two pages have the same protocol(protocol), host, and port number.

2, what is cross-domain

Any one of the protocols, domain names, and ports that request the url is different from the current page url.

The current page url	The requested page url	Whether to cross the domain	cause
http://www.w3cschool.cn/	http://www.w3cschool.cn/index.html	not	homology
http://www.w3cschool.cn/	https://www.w3cschool.cn/index.html	Cross-domain	The protocol is different (http/https
http://www.w3cschool.cn	http://www.baidu.cn/	Cross-domain	The primary domain name is different (w3cschool/baidu
http://www.w3cschool.cn/	http://123.w3cschool.cn	Cross-domain	Subdomains are different (www/123).
www.test.com:8080/	www.test.com:7001	Cross-domain	Port numbers are different

3, cross-domain solution

Set up document.domain to solve the problem of cookies that cannot read non-homologous pages

Cross-document communication API: window.postMessage()

【3】JSONP

【4】CORS

【5】Proxy

As a developer, the most concerned about cross-domain is generally 2 kinds of interaction across domains, that is, Proxy and CORS many of the development is only a momentary convenience, the use of Proxy after packaging found that there is a cross-domain, do not know how to solve, the following we pass the example a little bit for everyone to resolve.

Appears across domains

First, you need to reproduce the cross-domain, and first write a simple interface with node as follows

Using the command node start this service, you build the simplest back-end service interface, and then use front-end ajax to request the interface, as follows

Create a simple html page, plus the simple ajax request above, and you'll see cross-domain error in the browser console

From the log, "Access-Control-Allow-Origin" appears, indicating that the access source is not licensed, that is, across domains.

Proxy for cross-domain resolution

Now projects generally use scaffolding, that is, webpack which can use webpack own proxy feature to handle cross-domain, let's configure a simple webpack project, as follows

1. Create a profile webpack.config.js

Profile description The project entry file index.js src .js, the packaged output directory is dist and the cross-domain is handled using proxy i.e. all requests at the front end automatically jump to the url specified by target

Note that there is a prefix here that can't be written if not.

2. Create a src directory and index.js

3. Create engineering dependent file package.json

webpack startup command is configured in the dependency file

Npm run dev starts the service

Npm run start the service

Npm run build packaging command

When the service is started, open the browser input http://localhost:8080 to see a blank page and the console to see ajax request

Got the interactive data.

This approach is the most commonly used in development, but there is a problem after packaging, because after packaging there is no proxy cross-domain or will exist, how should it be resolved?

CORS for cross-domain resolution

This approach is configured on the back end, CORS the front end can access the back-end interface without any processing, whether at development or deployment time.

Let's comment out the proxy and use CORS as follows:

Once cors is configured, the interface is freely accessible.

At this point, you also need to change the front-end request address to a direct request back-end interface, as follows

Refresh the page and open the console to see the request address

In this way, there is no problem during the development phase or deployment, which is the two most commonly used methods in development.

3. What is closure? How to understand

Closure is a difficult problem for javascript and a feature of it. Many advanced applications rely on closures.

To understand closures, you first need to understand javascript global and local variables.

What makes the javascript language special is that global variables can be read directly inside a function, but local variables inside a function cannot be read outside the function.

How do I read local variables inside a function from the outside?

We sometimes need to get local variables inside the function, which would normally not be available! T his can only be achieved through workarounds. That is, inside the function, define another function.

1, the concept of closure

The f2 function in the code above is a closure.

The closure definitions of various professional literatures are very abstract, and my understanding is that closures are functions that can read internal variables of other functions.

Because in javascript only subfunctions inside a function can read local variables, closures can be simply understood as "functions defined inside a function."

So, in essence, closures are a bridge between the inside of a function and the outside of a function.

2, the purpose of the closure

Closures can be used in many places. Its biggest use is two, one is to read variables inside the function mentioned earlier, and the other is to keep the values of these variables in memory and not automatically cleared after a f1 call.

Why is this happening? The reason is that f1 is the parent function of f2, and f2 is assigned to a global variable, which causes f2 to always be in memory and f2 to be dependent on f1, so f1 is always in memory and is not recycled by the garbage collection mechanism after the call ends.

Closures are often used in our usual code, such as in constructors

Another way of writing

3, common closure of the writing

Another calling method

Define the function and call it immediately

4, the practical application of closure

With closures, we can do a lot of things. Examples are simulating object-oriented code styles, expressing code more elegantly and concisely, and improving code execution efficiency in some ways.

encapsulation

With person.name is unable to get the value of name if you want to get the value of name can pass

Console.log(person.getName()); G et directly to Zhang San people.setName ("Li SI"); R eset the new name print (person.getName()); Get Lee SI

inherit

Summary: A closure is a variable that a function refers to another function, because the variable is referenced so it is not recycled and can therefore be used to encapsulate a private variable. T his is both a advantage and a disadvantage, unnecessary closure will only increase memory consumption!

That's what W3Cschool编程狮 will ask about the 2020 front-end interview? Related to the introduction, I hope to help you.