Summary of front-end interview questions

Summary of front-end interview questions

HTML related

What are block elements and inline elements?

HTML can classify elements (display) into three types: inline elements (display:inline), block elements (display:block), and inline-block elements (display:inline-block)

Features of block elements: such as div, p, nav, aside, header, footer, section, article, ul-li, address, etc.

  • Able to recognize width and height
  • The up, down, left, and right of margin and padding are valid for it
  • Can wrap
  • Multiple block element tags are written together, the default arrangement is from top to bottom

The meaning of inline elements: such as span, b, i, img, a, etc.

  • Invalid setting of width and height
  • For margin, only the left and right directions are valid, but up and down are invalid; the padding setting is valid both up and down, left and right, which will expand the space
  • Will not automatically wrap

CSS related

Box model

JavaScript related

Value type

Contains: undefined, boolean, number, string, symbol

Reference type

Contains: [], {}, function, null

The difference between value type and reference type

Value type: The value of the value type is placed in the stack memory (another way of saying: the pointer points directly to the value)

Reference type: the value of the reference type is placed in the heap memory (another calligraphy: the address of the pointer to the value)

//value type var a = 100 var b = a b = 200 console .log(a) //100 //Reference type var obj1 = { a : 100 } var obj2 = obj1 = obj2.a 200 is Console .log (obj1.a) //200 is duplicated code

Judgment type

What types can typeof judge?

  • Identify all value types
  • Recognition function
  • Determine whether it is a reference type (not subdivided)

Deep copy

/** * Deep copy */ const obj1 = { age : 20 , name : 'xxx' , address : { city : 'beijing' }, arr : [ 'a' , 'b' , 'c' ] } const obj2 = deepClone(obj1) obj2.address.city = 'shanghai' obj2.arr[ 0 ] = 'a1' console .log(obj1.address.city) console .log(obj1.arr[ 0 ]) /** * Deep copy * @param {Object} obj the object to be copied */ function deepClone ( obj = {} ) { if ( typeof obj !== 'object' || obj == null ) { //If obj is null, or not an object or array, return directly obj } //Initialization return result let result if (obj instanceof Array ) { result = [] } else { result = {} } for ( let key in obj) { //Ensure that key is not a prototype property if (obj.hasOwnProperty(key)) { //Recursive call! ! ! result[key] = deepClone(obj[key]) } } // return result } Copy code

Prototype and Prototype Chain

ES5-ES6 prototype, prototype chain

All reference types (arrays, objects, functions) have object characteristics, and can freely extend properties (except "null")

const obj = {} obj.a = 100 const arr = [] arr.a = 200 function fn () {} = fn.a 300 duplicated code

All reference types (arrays, objects, functions) have a proto property (implicit prototype property), and the property value is an ordinary object

All functions and classes have a prototype (explicit prototype) attribute, and the attribute value is also an ordinary object

All reference types (arrays, objects, functions), the proto attribute value (implicit prototype attribute) points to the "prototype" attribute value of its constructor

Prototype chain: When trying to get a property of an object, if the object itself does not have this property, then it will go to its _proto_ (that is, the prototype of its constructor (explicit prototype)) to look for

Execution context (abbreviation: context)

Concept: The context of variables or functions determines what data they can access and their behavior.

Features: Each context has an associated variable object, which contains all variables and functions defined in this context

The global context is the outermost context, which is the window object

My popular understanding: context is a matter of scope. External properties or methods can be used internally, but internal properties or methods cannot be used externally

The problem pointed to by this

The value of this in all scenarios is determined when the function is executed, not when it is defined

In the arrow function, this points to the definition of the arrow function

function fn1 () { console .log( this ) } fn1 //Print result: window -------------------------------------------------- ---- fn1.call({ x : 100 }) //Print the result: {x: 100} -------------------------------------------------- ---- const fn2 = fn1.bind({ x : 200 }) fn2() //Print the result: {x: 200} -------------------------------------------------- ---- const zhangsan = { name : ' ' , sayHi () { console .log( this ) //this is the current object } wait () { setTimeout ( function () { console .log( this ) //this points to window }) } } -------------------------------------------------- ------ const zhangsan = { name : ' ' , sayHi () { console .log( this ) //this is the current object } wait () { setTimeout ( () => { console .log( this ) //this points to the current object }) } } -------------------------------------------------- -------- class People { constructor ( name ) { this .name = name this .age = 20 } sayHi () { console .log( this ) } } const zhangsan = new People( ' ' ) zhangsan.sayHi () //Print the results: zhangsan Object copy the code

Handwriting bind

Function .prototype.newBind = function () { //Disassemble the parameters into an array console .log( 'arguments' , arguments ) const newArr = Array .prototype.slice.call( arguments ); console .log( "newArr" , newArr); //Get this (the first item of the array) const newThis = newArr.shift(); //xxx const self = this in xxx.newBind(....) ; return function () { return self.apply(newThis, newArr); }; }; function fn1 ( a, b ) { console .log( "this" , this ); console .log(a, b); return "Hello" ; } const fn2 = fn1.newBind({ x : 100 }, 10 , 20 ); fn2(); Copy code

Closure

Concept: Closures refer to functions that use variables in the scope of another function, usually implemented in nested functions.

Closure: The search of free variables is in the place where the function is defined, and the higher-level scope is searched, not in the place of execution

function create () { const a = 100 return function () { console .log(a) } } const a = 200 fn = create() fn() //Output result: 100 --------------------Dividing line------------------- function print ( fn ) { const a = 100 fn() } const a = 200 function fn () { console .log(a) } (Fn) Print //output: 200 copy the code

Application of closures in actual development

  • Hide data
  • Make a simple cache tool
function createCache () { const data = {}; return { set : function ( key, value ) { data[key] = value; }, get : function ( key ) { return data[key]; }, }; } const newData = createCache(); newData.set ( "A" , 100 ); Console .log (newData.get ( "A" )); duplicated code

Asynchronous and single threaded

js is a single-threaded language and can only do one thing at the same time

The difference between asynchronous and synchronous

  • Based on js is a single-threaded language
  • Asynchrony does not block code execution
  • Synchronization will block code execution

Asynchronous application scenarios

  • Network request, such as ajax image loading
  • Timed tasks, such as setTimeout
/* Promise image loading instance*/ function loadImg ( src ) { return new Promise ( ( resolve, reject ) => { const img = document .createElement( "img" ); img.onload = () => { resolve(img); }; img.onerror = () => { reject( new Error ( "Image loading failed" )); }; img.src = src; }); } const url1 = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2F1812.img.pp.sohu.com.cn%2Fimages%2Fblog%2F2009%2F11%2F18%2F18%2F8% 2F125b6560a6ag214.jpg & REFER = HTTP%. 3A%. 2F% 2F1812.img.pp.sohu.com.cn & App = 2002 & size = f9999,10000 & Q = A80 & n-= 0 & G = 0n & FMT = JPEG sec = 1,625,236,813 & T = b636a3bec755a4639ad07f59b28fe2cc "? ; const URL2 = " HTTPS://gimg2.baidu.com/image_search/src=http%3A%2F%2F2c.zol-img.com.cn%2Fproduct%2F124_500x2000%2F748%2FceZOdKgDAFsq2.jpg&refer=http%3A%2F%2F2c.zol-img.com .cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625236813&t=0ec6f945dc883b312daef0050bbdc290" ; loadImg(url1) .then( ( img ) => { console .log(img.width); return img; //ordinary object }) .then( ( img ) => { console .log(img.height); return loadImg(url2); //Promise object }) .then( ( img ) => { console .log(img.width); return img; }) .then( ( img ) => { console .log(img.height); }) .catch ( ( EX ) => Console .log (EX)); duplicated code

event loop (event loop/event polling)

Micro tasks and macro tasks

Micro task: setTimeout setInterval Ajax Dom event

Macro task: Promise async/await

The execution timing of micro tasks is earlier than that of macro tasks

The difference between microtasks and macrotasks

  • The micro task is triggered before the DOM is rendered, and the macro task is triggered after the DOM is rendered.

React framework


updating