JS

closure

Closures are functions that can read internal variables of other functions,
Here is an example

function fn(n,o) {
        console.log(o)
        return {
            fn:function (m) {
                return fn(m,n)
            }
        }
    }
    const obj = fn(0); obj.fn(1); obj.fn(2);
    const obj1 = fn(0).fn(1).fn(4).fn(3);

Enter a parameter and print the result
About closure

Please talk about the advantages and disadvantages of cookies

Advantages: high expansibility and availability
1)Data persistence
2)No server resources are required Cookie Stored on the client and read by the server after sending.
3) Configurable expiration rules. control cookie So that it won't last forever. The thief is likely to get an expired one cookie . 
4) Simplicity. Text based lightweight structure.
5) Through good programming, the control is saved in cookie Medium session The size of the object.
6) Through encryption and secure transmission technology( SSL )，reduce cookie The possibility of being cracked.
7) Only in cookie Store insensitive data in the, even if it is stolen, there will be no significant loss.

Disadvantages: 1) Cookie Restrictions on quantity and length.
		Quantity: per domain cookie The total number is limited.
			 a) IE6 Or lower version up to 20 cookie 
			 b) IE7 And later versions can end up with 50 cookie 
			 c) Firefox Up to 50 cookie 
			 d) chrome and Safari There are no hard restrictions 
		 Length: each cookie Length not exceeding 4 KB ( 4096B )，Otherwise it will be cut off.
	  2) Potential safety risks. Cookie May be intercepted or tampered with. If cookie If intercepted, it is possible to obtain all the information session Information.
	  3) User configured to disable. Some users have disabled browser or client device acceptance cookie Therefore, this function is limited.
	  4) Some states cannot be saved on the client. For example, to prevent duplicate submission of forms, we need to save a counter on the server side.
	  If we save this counter on the client, it won't work.

After the following code is executed, the output of the console is

ordinary

var a = 10; 
function a(){}
console.log(typeof a)

complex

console.log(v1);
var v1 = 100;
function foo() {
    console.log(v1);
    var v1 = 200;
    console.log(v1);
}
foo();
console.log(v1);

Variable promotion

Array. prototype. slice. The call (arr, 2) method is used to

Using the slice method on the Array prototype and the first parameter of the call function, let this in this method point to arr and pass parameter 2, which is actually equal to arr.slice(2), that is, intercept from subscript 2 to the end

call ,apply ,bind  change this point
apply: Call a method of an object to replace the current object with another object. For example: B.apply(A, arguments);Namely A Object application B Object.
call: Call a method of an object to replace the current object with another object. For example: B.call(A, args1,args2);Namely A Object call B Object.
call And apply Similarities between:
The meaning of method is the same, that is, the function of method is the same;
The function of the first parameter is the same;
call And apply The difference between the two: the incoming list forms are different
call Multiple parameters can be passed in;
apply Only two parameters can be passed in, so the second parameter is often passed in as an array
 Implementation principle
	Create a property for the target object and bind the method to be called to this property
	Run the property you just created directly
	Delete this property
	This is an indirect binding this And realized call
js How to implement inheritance
 	Prototype inheritance prototype，Constructor inheritance

j s inheritance

Function.prototype.mycall=function(con){   //Add the mycall method to the prototype object of the Function
    con.fun = this;  //this is the method to bind
    console.log(this) //function 
    con.fun();
    delete con.fun;
}

let obj1 = {
    name:"helloworld"
}

function fn(){
    console.log(this.name);
}

fn.call(obj1);   //helloworld

fn.mycall(obj1); //helloworld

Traverse all child nodes under the parent node of node A

vue played too much. I don't remember the js dom operation

j s dom

<script>
    var b=document.getElementById("a").parentNode.children;
    console.log(b)
</script>

Write a sum of 1 to 100 recursively

vue Recursion is also used when implementing two-way binding for data verification,
Recursive function is to call this function in the function body;
The use of recursive functions should pay attention to the function termination conditions to avoid dead loops;
function add(num1,num2){
var num = num1+num2;
    if(num2+1>100){
	 return num;
	} else {
  return add(num,num2+1)
    }
 }
var sum =add(1,2); 

The process of page rendering html?

The general process of rendering pages by browser:

1. The browser parses the HTML source code, and then creates a DOM tree. Parallel request css/image/js in the DOM tree, each HTML tag has a corresponding node, and each text will also have a corresponding text node. The root node of DOM tree is documentElement, which corresponds to HTML tag.

2. The browser parses the CSS code and calculates the final style data. Build CSSOM tree. It will directly ignore the illegal syntax in CSS code. When parsing CSS, the priority will be defined in the following order: browser defau lt setting < user setting < outer chain style < inline style < style in HTML.

3. DOM tree + cssom -- > rendering tree. Rendering trees are a bit like DOM trees, but there are differences.

The DOM tree completely corresponds to the html tag one by one, but the rendering tree will ignore elements that do not need rendering, such as the elements of head and display:none. Moreover, each line in a large piece of text is an independent node in the rendering tree. Each node in the rendering tree stores a corresponding css attribute.

4. Once the rendering tree is created, the browser can draw the page directly to the screen according to the rendering tree.

The above four steps are not completed in sequence at one time. If DOM or CSSOM is modified, the above process will be repeated. In fact, CSS and JavaScript often modify DOM or CSSOM many times.

How to interrupt an ajax request

One is to set the timeout so that ajax Automatic disconnection,
The other is manual stop ajax Request, the core of which is to call XML Object abort method, ajax.abort()

Talk about macro tasks and micro tasks?

Macro task: the top note in the current call stack is called macro task. (main code fast, timer, etc.).
Micro task: currently (in this event cycle) the macro task has been executed, and the task to be executed before the next macro task starts is a micro task.
(It can be understood as a callback event, promise.then，proness.nextTick Wait).
Events in macro tasks are placed in callback queue In, thread maintenance is triggered by events; The events of the micro task are placed in the micro task queue by js Engine thread maintenance.

What are the advantages and disadvantages of inheritance?

Borrowing constructor inheritance, use the call or apply method to bind the constructor of the parent object to the child object
Prototype inheritance, which points the prototype of the child object to an instance of the parent object
Combinatorial inheritance
Disadvantages of prototype chain inheritance

Literal rewriting prototypes breaks the relationship, uses prototypes of reference types, and subtypes cannot pass parameters to supertypes.
Borrowing constructor (class inheritance)

Although borrowing constructor solves the two problems just now, without prototype, reuse is impossible.
Combinatorial inheritance

Combinatorial inheritance is a commonly used inheritance method. The idea behind it is to use prototype chain to inherit prototype properties and methods, and borrow constructor to inherit instance properties. In this way, function reuse is realized by defining methods on the prototype, and each instance has its own properties.

Say closure?

The essence of closure is the scope chain formed by function nesting
The definition of closure is: function A has A function B inside, and function B can access the variables in function A, so function B is A closure

Array de duplication

Two layer circulation method
Using the key non repeatability of grammar itself

js

var arr=['12','32','89','12','12','78','12','32'];
    // Simplest array de duplication method
    function unique1(array){
        var n = []; //A new temporary array
        for(var i = 0; i < array.length; i++){ //Traverse the current array
            if (n.indexOf(array[i]) == -1)
                n.push(array[i]);
        }
        return n;
    }
    arr=unique1(arr);
    // The fastest and takes up the most space (space for time)
    function unique2(array){
        var n = {}, r = [], type;
        for (var i = 0; i < array.length; i++) {
            type = typeof array[i];
            if (!n[array[i]]) {
                n[array[i]] = [type];
                r.push(array[i]);
            } else if (n[array[i]].indexOf(type) < 0) {
                n[array[i]].push(type);
                r.push(array[i]);
            }
        }
        return r;
    }
    //Array subscript judgment method
    function unique3(array){
        var n = [array[0]]; //Result array
        for(var i = 1; i < array.length; i++) { //Traverse from the second item
        //The indexOf() method returns the first occurrence of a specified string value in the string
            if (array.indexOf(array[i]) == i) {
                n.push(array[i]);
                }
        }
        return n;
    }
    es6

es6 Method array de duplication
arr=[...new Set(arr)];
es6 Method array de duplication, the second method
function dedupe(array) {
  return Array.from(new Set(array));       //Array.from() can convert a set structure into an array
}

Array de duplication

The difference between get and post

1.get The parameter transmission method is through the address bar URL Pass, you can see it directly get Parameters passed,
	post Parameter transmission mode parameters URL invisible, get Put the requested data in URL Pass after? Connection, via&Perform parameter segmentation.
	psot Store parameters in HTTP Inclusion body of

2.get Data is transmitted through URL The length of the transmitted data is limited URL Size limits, URL The maximum length is 2048 characters.
post No length limit

3.get It doesn't matter if you step back, post Back will resubmit

4.get Requests can be cached, post Cannot be cached

5.get Request only URL code, post Support multiple coding methods

6.get The requested record will remain in the history, post Requests will not remain in history

7.get Only support ASCII Characters, post There are no character type restrictions

What do you know about the response code and meaning of http

1xx(Temporary response)
	100: The requester shall continue to make requests.
	101(Switching protocol) The requester has requested the server to switch the protocol, and the server has confirmed and is ready to switch.
2xx(success)
	200: The correct request returns the correct result
	201: Indicates that the resource was created correctly. For example, we POST If the user name and password are correct, you can return 201 after creating a user.
	202: The request is correct, but the result is being processed. At this time, the client can continue the request through polling and other mechanisms.
3xx(Redirected)
	300: The request was successful, but there were multiple choices.
	301: The request succeeded, but the resource was permanently transferred.
	303: use GET To access the new address to get the resource.
	304: The requested resource has not been modified
4xx(Request error)
	400: An error occurred in the request, such as unequal request headers.
	401: No certification information was provided. I didn't bring it with me when I asked Token Wait.
	402: Status code reserved for future needs.
	403: The requested resource does not allow access. That means you don't have permission.
	404: The requested content does not exist.
5xx(Server error)
	500: Server error.
	501: The request has not been implemented