Front-end interview questions JavaScript articles

Front-end interview questions CSS: https://my.oschina.net/u/3674939/blog/1637877

Front-end interview questions HTML: https://my.oschina.net/u/3674939/blog/1637883

Other front-end interview questions (security, performance, loading, etc.): https://my.oschina.net/u/3674939/blog/1643029

JS Three Mountains

What types can be obtained using typeof in JS

undefind、string、number、boolean、function、object

In particular, objects, arrays, and null are all objects (although functions are reference types, they can be recognized), because typeof cannot distinguish reference types

When to use '===' and when to use '=='

Double etc will be automatically forced conversion, which is risky.
It is recommended to use the third-class in the jQuery source code, which is what I personally wrote. Double etc. can be used to judge boolean values

JS variables are classified into those types according to their storage methods and describe their characteristics

value type
reference type

How to tell if a variable is an array type

instanceofkeywords can be used

Take a chestnut:

var arr = []
consoe.log(arr instanceof Array) //true

Write an example of inheritance

//构造函数方式
function Animal { this.name = 'pig' }
function Animal2 { Animal.call(this); this.age = 18 }
console.log(new Animal2())
//缺点：无法继承Animal的原型对象

//原型链方式
function Animal { this.name = 'pig' }
function Animal2 { this.age = 18 }
Animal2.prototype = new Animal();
console.log(new Animal2())
//缺点：实际上是共享，修改原型对象里的内容，其它继承的类也会同步修改

//组合方式
function Animal { this.name = 'pig' }
function Animal2 { Animal.call(this); this.age = 18 }
Animal2.prototype = Animal.prototype;
console.log(new Animal2())
//缺点：由于引用同一个原型对象，无法区分对象是由谁实例化的

//最终方式
function Animal { this.name = 'pig' }
function Animal2 { Animal.call(this); this.age = 18 }
Animal2.prototype = Obiect.create(Animal.prototype);
Animal2.prototype.constructor = Animal2;
console.log(new Animal2())
//解释：通过创建新的对象，不再是同一个，再指定构造函数属性为自己

Several ways to create objects

literal; object object; constructor; object create

Describe the process of new an object

Create an empty object and inherit the prototype object
Execute the constructor, this points to this empty object
Returns the new object if the return value is object, otherwise returns object

Your understanding of variable hoisting

When code is executed, variable and function declarations are hoisted to the top of the scope (where the variable has the value undefined )

If it is global, it will be promoted to the front of the script

If it is inside a function, it will be promoted to the front of the function, and this is also

The case of function expressions (anonymous functions)

Illustrate several different usage scenarios of this

Execute as a constructor
Execute as object property
Execute as a normal function
call apply bind

Create 10 a tags, click to pop up the corresponding serial number

for(var i=0;i<10;i++){
  (function(i){
  	var a = document.createElement('a');
    a.innerHtml=i+'<br>';
    a.onclick=function(e){
  		e.preventDefault();
      	alert(i)
	}
    document.body.appendChild(a)
  })(i)
}

How to understand scope

There are only function scopes and global scopes, and block-level scopes are added in ES6.

Variables declared outside the function are of global scope and can be used inside the function

Variables declared inside a function are function scoped and cannot be used outside the function

Scope chain: The process by which a free variable goes all the way up to find variables in its parent scope (when it was defined).

Free variables: variables not defined in the current scope

Supplement: Variables declared in curly braces are block-level scope and can only be used internally to reduce global pollution

Application of closures in actual development

Closures: a way to use a function to access internal variables in another function

Usage scenario: function as return value. function passed as parameter

What is the difference between synchronous and asynchronous?

Synchronous blocks code execution, asynchronous does not

Front-end using asynchronous scenarios?

Scheduled tasks:setTimeout setInverval
Network request: ajax request, dynamic <img> loading
event binding

JS operating mechanism

single thread;
task queue;
event loop event loop;

processes and threads

Process: a running application, which is a running environment of the application
Thread: used to execute code

Get a random number, which requires a string format of the same length

var random = Math.random();
var random = random+'00000000';
var random = random.slice(0,10);

Write a generic forEach function that iterates over objects and arrays

function foreach(obj,fn){
  var key;
  if(obj instanceof Array){
  	obj.forEach(function(item,index){
  		fn(index,item)
	})
  }else{
  	for(key in obj){
  		fn(key,obj[key])
	}
  }
}

JS WEB API

What is the basic data structure of DOM

Tree

What are the common APIs for DOM manipulation

Get DOM nodes, get parent node child nodes, add and delete nodes

What is the difference between attribute and property of a DOM node

property: is a modification of the property of an object
attribute: is a modification of the html tag attribute

How to detect the type of browser

navigator.userAgent

Disassemble the parts of the url

location

event

Event level:DOM0:element.onclick=()=>{} DOM2:element.addEventListener('click',()=>{},false) DOM3:增加支持更多事件类型

Event model:

Capture: from the top level down to the target element
Bubble: from the target element all the way up to the top

Describe the event flow mechanism

the sequence of events

Capture Phase => Target Phase => Bubble Phase

custom event

new Event()

handwritten ajax

var xhr=new XMLHttpRequest()
xhr.open('GET','/api',false);
xhr.onreadtstatechange = function(){
  if(xhr.readyState==4 && xhr.status==200){
  		conse.log(xhr.responseText)
	}
}
xhr.send(null);

cross domain

Reason: same-origin policy, cookie, localstorage, indexdb cannot be read, dom cannot be operated, and ajax cannot be sent

Front-end and back-end communication methods: ajax, websocket, CORS

solve:

JSONP: The <script> element is dynamically inserted into the webpage, and it sends a request to the cross-origin URL. After the server receives the request, it puts the data in a callback function with a specified name and returns it. Can only send get requests
window.postMessage: A new method has been added to the window object to allow cross-window communication
CORS: Cross-Origin Resource Sharing. server configuration
websocket: is a protocol provided by HTML5 for full-duplex communication over a single TCP connection.
Nginx reverse proxy

For detailed principles, please refer to Teacher Ruan Yifeng's blog

Describe the difference between cookies, sessionStorage and localStorage

local storage

cookieUsed by itself for client and server communication.

The storage is small, about 4k.

Each request will be carried, which will affect the efficiency of obtaining resources.

sessionStorage localStorageH5's local storage technology,

Large storage capacity

The difference between AMD, CMD, CommonJS

AMD: require.js, asynchronous, dependency prepend
CMD: swa.js, synchronous, nearby dependencies
CommonJS: server-side modularization specification,
- module.exports={key:value}Anonymous output (exposed), exports.key=valueobject output
ES6 modularity: export/import

Detailed principle reference: very complete and complete JavaScript module explanation