<> More interview questions have been updated in the applet
<>WX search 【MST Question bank 】 Applet view
<>css Redrawing and reflow of Chinese characters
Repaint ： When a node needs to change its appearance without affecting the layout . backflow ：DOM Structure modification DOM When the geometry changes , Backflow occurs .
The common geometric attributes are width,height,padding,margin,left,top,border Or is it DOM Node increases or decreases . Ways to reduce redrawing and reflow .
use css3 New attributes ：translate replace top Equidirectional value . Avoid frequent use style, It's using class.
<> What is the difference between arrow function and ordinary function ?
Ordinary function this： this Always represents its direct caller . By default , No direct caller found ,this refer to window. In strict mode , In a function that does not have a direct caller
this yes undefined. use call,apply,bind binding ,this Refers to the bound object . Arrow function this： in use => When defining functions ,this
What's the point Object in which to define , It's not the object you're using ; Cannot be used as a constructor , That is to say , Can't use new command , Otherwise, an error will be thrown ; Can't use
arguments object ; out of commission yield command ;
<> Scan for more interview questions
<> Talk about it let,var,const The difference between
var There is no block level scope , Support variable promotion . let Block level scope , Variable promotion is not supported . Duplicate declaration is not allowed , Temporary dead zone . Can't pass window. Variable name . const
Block level scope , Variable promotion is not supported , Duplicate declaration is not allowed , Temporary dead zone . Declare a variable. Once declared, it cannot be changed , Change report error .
<> Implement a new Pseudo code of
Create an object Connection prototype binding this Returns the object function _new(){ let obj = new Object(); let Con = [].
shift.call(arguments); obj.__proto__ = Con.prototype; let result = Con.apply(obj
,arguments); return typeof result === 'object' ? result : obj }
<> prototype , Prototype chain
Prototype chain ： Each instantiated object has __proto__ object , It points to the constructor that constructs the object prototype attribute . At the same time, the object can be __proto__ Object to find properties that do not belong to itself ,
prototype ： It is a concept produced in the process of implementing inheritance .
<> inherit
The principle is ： Copy the properties and methods of the parent class to override the prototype object of the child class Archetypal inheritance Constructor inheritance Combinatorial inheritance Parasitic Inheritance Parasitic combinatorial inheritance class wait // Parasitic combinatorial inheritance method
function Father(...arr) { this.some = ' Parent property '; this.params = arr; } Father.
prototype.someFn = function() { console.log(1); } Father.prototype.someValue =
'2'; function Son() { Father.call(this, 'xxxx'); this.text = '2222'; } Son.
protptype= Object.create(Father.prototype); Son.prototype.constructor = Son;
<>Object,create What did you do
Object._create = function(obj){ function F(){}; // A new constructor is created F F.prototype =
obj; // The constructor is then added F The prototype of points to the parameter object obj return new F(); // Return constructor F Instance object of , So the instance inheritance is realized obj Properties of .
}
<> closure
A closure is a function that has access to variables within a function , That is to say, nested functions within functions , Internal functions access external function variables , As a result, the garbage collection mechanism does not recycle the current variable . This kind of operation , There may be a memory leak . The advantage is that you can design private methods and variables .
<> Garbage collection mechanism （ The extension of closure ）
js Has a special garbage collection mechanism , When a variable loses its reference in memory ,js It will be recycled through a special algorithm , And free the memory . It is divided into the following two stages ：
Marking stage ： Garbage collector , Traverse from the root object , Every object accessed is marked as reachable .
Clearance phase ： The garbage collector traverses the memory linearly , If it is found that the object is not marked as reachable , Then it will be recycled by the garbage collection mechanism . This involves reference counting , Every reference is ignored ‘➕1
’ If the flag is cleared , Then it will be recycled .
<> Brief introduction of deep and shallow copy
Shallow copy Usually, there is only one layer of this object inside the object to be copied . Common methods Object.assign Method Extension operator ...obj Deep copy
It is usually nested two or more complex objects common method JSON.parse(JSON.stringfy(object));
This method is ignored undefined, ignore Symbol, ignore function. Only suitable for simple deep copy Handwriting recursion method to achieve . Through the deep copy provided by the third party library .
<> Throttling and anti chattering of functions
Anti chattering function ： Turn multiple triggers into the last ; function debounce(fn,wait){ let timer = null; return
function (){ let arg = arguments; if(timer){ clearTimeout(timer); timer = null;
} timer = setTimeout(()=>{ fn.apply(this,arg) },wait) } } function clg(){
console.log('clg') } window.addEventListener('resize',debounce(clg,1000))
<> Throttling function ： Turn multiple execution into a function executed every other time node
function throttle(fn,time){ let lastTime = null; return function(){ let nowTime
= Date.now(); if(nowTime - lastTime > time || !lastTime){ fn(); last = nowTime }
} } function sayHi(){ console.log('hi') } setInterval(throttle(sayHi,1000),500)
<>call,apply difference
Similarities ： It's all redirection this Pointer method . difference ：call and apply The second parameter of is not the same ,call Is a list of several parameters .apply It's an array Write one call method
// Before that, we need to get to know each other again call Method let mock = { value : 1 }; function mockNum(){ console
.log('value',this.value) } mockNum.call(mock) // Changed the this The direction of , current this Point to mock object
The implementation method is to change let mock = { value:1; mockNum:function(){ console.log('value',this.
value) } } mock.mockNum(); So the result of the above operation is the following steps ： 1. Set a function as a property of an object 2.
And call the properties of this function 3. Delete the function Function.prototype.Mycall = function(context){ let obj =
context|| window; obj.fn = this; // This step can be seen as this In fact, it refers to the current function . let args = [...
arguments].slice(1); // Returns an array that removes the first element ; let result = obj.fn(...args); // Call function
delete obj.fn; return result; } // Do it let mock = { value : 1 }; function
mockNum(){ console.log('value',this.value); } mockNum.Mycall(mock) // value 1
<> Then write another one according to the above method apply method
Function.prototype.Myapply = function (context){ let obj = context || window;
obj.fn = this; let result = arguments[1] ? obj.fn(arguments[1]) : obj.fn([]);
delete obj.fn; return result; } let mock3 = { arr: [1, 2, 3, 4, 5], }; function
arrx2(arr) { return this.arr.concat(arr).map((x) => x * 2); } console.log(
"arrx2", arrx2.myApply(mock3));
<>bind
bind The method is to return a new function directly , It needs to be called manually . Create a new function , When the new function is called ,bind() The first parameter of the method will be used as the running parameter this
, After that, a series of parameters will be passed in as his parameters ; characteristic ：1. Returns a function . 2. You can pass in parameters ; Write one bind method for example ： let foo = {
value: 1 }; function bar() { console.log('bindFoo',this.value); // return
this.value // Consider that the function may have a return value } let bindFoo = bar.bind(foo); bindFoo() // 1 //
If there is a return value bindFoo() === 1; Function.prototype.Mybind = function(obj){ if(typeof
this !== 'function') throw new Error('not a function'); let self = this; let
args= [...arguments].clice(1); return function F(){ if(this instanceof F){
return new self(...args,...arguments); } return self.apply(obj,args.concat([...
arguments])); } }
<> On function call
As a normal function call Functions are called as methods Calling functions using constructors Calling a function as a function method
<> Trapping and bubbling
capture ： It is a relationship that starts from the root element and progresses to the target element ; Top down Bubbling ： It is the process of bubbling from the target element to the root element ; Imagine a bubble in the water from the bottom up .
⚠️stopPropagation It is generally understood that it is used to prevent events from bubbling , In fact, this function can also prevent capture events .
<>instanceof principle
instanceOf It's used to judge what's on the right prototype Is it on the prototype chain on the left , Tell us if the left is an instance of the right . function instanceof(left,
right) { // Get the prototype of the type let prototype = right.prototype // Get the prototype of the object left = left.
__proto__// Determine whether the type of the object is equal to the prototype of the type while (true) { if (left === null){ return false }
if (prototype === left){ return true } left = left.__proto__ } }
<>typeof
typeof Test object , The division function is function Out of type . Like a common array , Object or regular , Dates and so on object; You need to pay attention ： typeof
Symbol() // 'symbol' typeof null // object typeof undefined // undefined typeof
null Detection output object because js Original version , Using 32 Bit system , The label of the type is stored in the lower order of each cell 000 yes object type .null All of them 0, So when we use
typeof When testing js Wrong judgment bit object
<> sketch cookie,localstorage,seesionstorage
cookie 4kb about Every time I carry it with me HTTP In the head , If used cookie Saving too much data can cause performance problems The default is to close the browser , But you can also set the expiration time
localstorage5M Save in browser only , Do not participate in communication with the server Unless manually cleared , Otherwise, it will be kept forever SessionStorage 5M
Save in browser only , Does not participate in communication with the server, only in the current session ( window ) It's effective under the circumstances , Cleared after closing a window or browser , The expiration time cannot be set
<>js How to solve cross domain problems
The currently known cross domain method is ： jsonp Cross domain , principle ：script A cross domain method to implement the vulnerability of tag without cross domain restriction , Support only get request . Security issues are threatened .
cors Cross domain , Through the back-end server ,Access-Control-Allow-Origin. postMessage window A property method of .
websocket nginx Reverse proxy iframe Cross domain
<>webpack proxy Cross domain
First of all, we need to understand webpack proxy Cross domain can only be used in the development phase , Temporarily solve the cross domain problem caused by the local request server .
Not suitable for online environment . Configure in webpack Of devServer Attribute .
webpack In devsever After configuration , The packaging phase temporarily generates a node The server , A browser requesting a server is equivalent to requesting a local service .
<> Depth first and breadth first
Breadth first ： Try to access the target node as close to it as possible , And then go down layer by layer , Up to the farthest node level .
Depth first ： Start from the start node , Go all the way down to the last node , Then go back , Go on to the next path . Know how to find all the nodes .
<> Browser disabled cookie How to deal with it
It's usually used url Rewriting technology for session tracking , Every interaction , All of them will be here url Add after sid=xxx Similar parameters . The server identifies users in this way .
<>setTimeout And setInterval The difference between
setTimeout Indicates that a call is executed after an interval of time , and setInterval It's a cyclic call every other period of time , Until cleared .
Memory ,setTimeout You only need to enter the macro queue once ,setInterval Code execution time is not calculated , It is possible to execute code multiple times
<> More interview questions have been updated in the applet
<>WX search 【MST Question bank 】 Applet view
Technology