Cause 1.

Today was the first interview for the candidates. Here is a record of the interview involved in a few knowledge points.

I will hand a bottle of water to the candidates for each interview, so that the candidates will be less nervous and in a better state for the interview. After all, the interview is a two-way choice, and the company also needs to find the right person as soon as possible. There are not so many psychological warfare online.

I also want to make fun of the fact that many interviewers, especially in the development industry, focus on what they are good at, completely ignoring a candidate’s strengths and making the interview experience a terrible one. The best way to do an interview is to use the candidate’s strengths to determine if he or she is a good fit for your team.

Your resume should be in accordance with the normal interview candidates questions involved in technical point, otherwise the interview a resume to you why, as for the resume did not covered in the knowledge necessary to ask, I don’t feel any necessary, because a lot of people at the time of writing a resume is to comprehensive, very anxious to write heard of knowledge points are familiar with. So just follow the resume. In addition to this, ask about the latest popular technology, mainly to test the candidate’s sensitivity to new technology and the ability to accept new things.

If there are questions that the candidate can’t answer, you need to answer them. After all, people come from far away to interview with you.

Finally, select a candidate who is good at the resume and ask them in depth, which I usually call grading. If the candidate answers the previous questions well, he or she has basically passed, and at the end, he or she will be graded. If you don’t answer the questions well, you can’t get to this part.

2. Proxy

In 2020, Proxy is no longer a strange word. It can do a lot, especially after Vue3.0 reconstructs Proxy. Many interviewers like to ask about Proxy and its comparison with Object.defineProperty.

Proxy is specially set access Proxy for objects, through Proxy can easily monitor the process of reading and writing objects, compared with defineProperty, Proxy is more powerful and even more convenient to use.

Here we define a Person object, and we use a new Proxy to create a Proxy object for our Person.

Proxy the first parameter to the constructor is the object we need agent, here is the person, the second parameter is an object, we can call this object Proxy processing object, the object can be accessed using the get method to monitoring properties, through the set method to introduce the object set properties of such a process.

const person = {
    name: 'yd'.age: 18
}

const personProxy = new Proxy(person, {
    get() {},
    set(){}})Copy the code

Let’s start with the get method. The simplest method takes two arguments: the first is the proxied target object and the second is the property name of the property accessed externally. The return value of this method will be externally accessed as the result of this property.

{
    get(target, property) {
        console.log(target, property);
        return property in target ? target[property] : undefined; }}Copy the code

The set method takes three parameters by default: the proxy target object, the name of the property we want to write to, and the value of the property we want to write to. We can do some checks, like if we set age, it has to be an integer, otherwise it will throw wrong.

{
    set(target, property, value) {
        console.log(target, property, value);
        if (property === 'age') {
            if (!Number.isInteger(value)) {
                throw new TypeError(` `${value} must be a integer); } } target[property] = value; }}Copy the code

What are the advantages of Proxy over Object.defineProperty?

First of all, the most obvious advantage is that Proxy is more powerful, which is specifically reflected in object.defineProperty can only listen to read or write of Object attributes, while Proxy can also listen to the deletion of attributes in the Object and the invocation of methods in the Object in addition to reading and writing.

The second advantage is to monitor array objects. In general, if you want to monitor array changes, you basically override array methods. This is how Vue is implemented. In the past, the most common way to use Object.defineProperty to monitor an array is to override the array’s manipulation methods. This is also the way in vue.js. The general way is to override the push, shift and other methods on the array’s prototype Object with custom methods. To hijack the process of the corresponding method call.

3. What types of keys are supported by objects

This question tests whether the candidate has a solid foundation of knowledge.

Most people assume that the key of an object is a string, if not a string in the past, but in ES2015 the key of an object can also be a Symbol.

const person = {
   	name: 'yd'[Symbol()] :18
}
Copy the code

This also leads to the Symbol below.

4. Symbol

Before ECMAScript2015, object property names were strings, and strings could be repeated. If repeated, there will be conflict.

In the past, the best way to solve this problem is agreement, but the agreement only avoids the problem and does not solve the problem completely. If someone breaks the contract in the process then the problem will still exist.

In order to solve this problem, ES2015 provides a new primitive data type Symbol, which translates as Symbol and translates as representing a unique value. The Symbol function creates a Symbol typeof data, and the result of typeof data is Symbol, which indicates that it is indeed a new type.

const s = Symbol(a);typeof s; / / symbol type
Copy the code

The most important feature of this type is that it is unique, which means that every value we create through the Symbol function is unique. He would never repeat himself.

Symbol() = = =Symbol(a);// false
Copy the code

Considering that the debugging Symbol creation during the development process is allowed to receive a string as the description text of this value, we can distinguish which Symbol is used several times, but this parameter is only used for description, the same description field will generate different values.

const s1 = Symbol('foo');
const s2 = Symbol('foo');

s1 === s2; // false
Copy the code

Objects have been allowed to use Symbol as attribute names since ES2015. That means that object property names can now be of two types, string and Symbol.

const person = {
    [Symbol()] :123[Symbol()] :456
}
Copy the code

If we need to reuse the same Symbol value globally, we can do so using a global variable or using a static method provided by the Symbol type. This is the static method for of Symbol, which takes a string as an argument. The same argument must correspond to the same value.

const s1 = Symbol.for('foo');
const s2 = Symbol.for('foo');

s1 === s2; // true
Copy the code

This method maintains a global registry that provides a correspondence between strings and symbols. Note that internally the string and Symbol relationship is maintained, which means that if the parameter is not a string, it is converted to a string.

const s1 = Symbol.for('true');
const s2 = Symbol.for(true);

s1 === s2; // true
Copy the code

5. JSONP

A lot of people’s understanding of JSONP is conceptual, and they don’t really understand how it works, how it can cross domains, and of course not just script tags that are not affected by the same origin policy, but jSONP is actually a back-end convention solution.

But it’s rarely used now. There are now more popular CORS solutions that are relatively secure, but JSONP still has its advantages.

Most people know that browsers have the same origin policy, which means that the address of the page that sent the request and the address of the requested interface must be the same domain name, protocol, and port, or the browser will block the request. Browser blocking does not mean that the request is posted, the request will still reach the server normally, if the server returns normally the browser will receive it, just not to the page we are on. This can be seen by looking at network.

Jsonp typically uses the SRC attribute of the Script tag. For the server, there are only two operations: request and response, and the request will be answered, no matter what the response is. There are too many types of requests.

A browser typing a URL is a request, an Ajax call to an interface is a request, and img and script SRC are requests. All of these addresses reach the server. Jsonp usually uses the script tag. First of all, we all know that the JS loaded by script has no cross-domain restrictions, because it is a script loaded, not an Ajax request.

You can assume that the browser limits the XMLHttpRequest object, and script doesn’t use it.

It is not enough that there is no restriction, but there is a more important point because a script is a label that executes a JS script, and the requested content is executed as JS.

As you can see, jSONP and Ajax require different parameters to be returned. Jsonp requires the service to return a JS script, while Ajax needs to return data.

Therefore, this requires the server to handle the jSONP request separately. Normally, the server interface will return the response data through the function call. For example, if the return content is yd, cb(‘yd’) will be returned.

cb('yd')
Copy the code

This is a script for a function call that will be executed immediately after it is loaded with the script tag if we define a cb function globally. When executed, the script calls the function we defined, and the arguments in the function are the values returned by the service. The front end is also available in this function.

function cb (data) {
    console.log(data);
}
Copy the code

So JSONP is a result of a common convention between the front and back ends.

6. CORS

Browsers use the same origin policy to limit cross-domain problems at the front and back ends, but also provide corresponding solutions.

The server can set the response header to allow cross-domain requests, so that the front end can successfully get the results of the response. So this also confirms that the front end doesn’t get the results, not because the server doesn’t return, but because the browser doesn’t give them to the front end.

Access-Control-Allow-Origin: www.xxxx.com
Copy the code

7. How does webpack proxy solve cross-domain problems?

Nginx, which introduces reverse proxies and load balancing, is the same as reverse proxies. It is the same as reverse proxies.

When we develop projects using WebPack, the Dev-server module of WebPack starts a server that not only does automatic updates for us, but also does reverse proxies.

We send the request to webpack-dev-server, and then webpack-dev-server requests the backend server. There is no cross-domain problem with the request between services, as long as the backend returns webpack-dev-server, and then back to the front end.

Well basically asked these questions, the boss said the interview time is controlled in 20 minutes or so.