preface

Hello everyone, this is an article recently about the interview summary, is currently the senior students, the article form mainly show in the form of questions and answers, there may be not comprehensive, hoped everybody comment, on the one hand is to record their knowledge, on the other hand is to share out to need little buddy!!!!!!

All the knowledge points are slowly sorted into Github to give me the Star 😊~

Because I have been busy looking for internship and graduation recently, I have no time to sort it out. I hope you can go over the basics.


1. Var, let, const

  • Function promotion takes precedence over variable promotion, which puts the whole function at the top, whereas variable promotion just puts the declarator at the top

  • Var is improved to use undefined before it is declared. Let, const cannot be because it creates a temporary dead zone

  • Let does not allow the same variable to be declared repeatedly in the same scope as const. Let does not allow the same variable to be declared repeatedly in the same scope as const. Declared objects can be modified

2. Talk about built-in types

  • JSThere are built-in types, which can be divided into two main types: basic types (The stack) and objects (The heap)
  • There are six basic types:null.undefined.boolean.number.string.symbol
  • Object (Object) is a reference type that involves shallow and deep copy issues

Typeof Displays normally for basic types except null

typeof 1 // 'number'
typeof '1' // 'string'
typeof undefined // 'undefined'
typeof true // 'boolean'
typeof Symbol(a)// 'symbol'
--------------------------------------------
typeof []  // 'object'
typeof {}  // 'object'
Copy the code

3. Implement the Instanceof principle

Instanceof can correctly determine the type of object by looking it up in a chain of prototypes

function myInstanceof(left,right){
  let prototype = right.prototype;
  left = left.__proto__;
  while(true) {if(left === null || left === undefined)
      return false
    if(prototype === left)
      return true
    left = left.__proto__
  }
}
Copy the code

4. Prototype and prototype chain

  • Each function has its ownprototype
  • Every object has it__proto__Property that points to the prototype of the constructor that created the object. This property actually points toprototype, so use_proto_To access the
  • Objects can be accessed through__proto__To find properties that don’t belong to that object,__proto__Objects are connected together to form a prototype chain

5. This point

You can change this to call, apply, and bind. Pass arguments to queues, arrays, and functions, respectively

The arrow function does not have this. The this in this function depends only on the this of the first function outside it that is not the arrow function

function foo() {
	console.log(this.a)
}
var a = 1
foo()

var obj = {
	a: 2.foo: foo
}
obj.foo()

// In both cases' this' only depends on the object before the function is called, and the second case has precedence over the first case

// The following is the highest priority: 'this' is bound only to' c 'and cannot be referred to by' this' in any way
var c = new foo()
c.a = 3
console.log(c.a)

// Another option is to use call, apply, bind to change this, which is next in priority to new
Copy the code

6. Talk about how new works

  • Generates a new object
  • Link to the prototype
  • The bindingthis
  • Returns a new object
/ / implementation new
function create(Con, ... args){
  let obj = {} // Generate a new object
  obj.__proto__ = Con.prototype // Link prototypes
  let res = Con.apply(obj,args)
  return res instanceof Object ? res : obj // Make sure you return an object
}
Copy the code

7. Closure

The definition of A closure is simple: if function A returns A function B, and function B uses A variable of function A, function B is called A closure.

function A() {
  let a = 1
  function B() {
      console.log(a)
  }
  return B
}
Copy the code

Classic Interview questions

for ( var i=1; i<=5; i++) {
	setTimeout( function timer() { // setTimeout Asynchronously enters the queue to wait for the completion of the synchronization task
		console.log( i );
	}, i*1000 );
}
Copy the code
// The first solution closure
for (var i = 1; i <= 5; i++) {
  (function(j) {
    setTimeout(function timer() {
      console.log(j);
    }, j * 1000);
  })(i);
}
// The second solution lets form block-level scopes
for ( let i=1; i<=5; i++) {
	setTimeout( function timer() { 
		console.log( i );
	}, i*1000 );
} 
/ / equivalent to
{ // form block-level scopes
  let i = 0
  {
    let is = i
    setTimeout( function timer() {
        console.log( i );
    }, i*1000 );
  }
  i++
  {
    let ii = i
  }
  i++
  {
    let ii = i
  }
  ...
}

Copy the code

8. Dark and light copy

  • Shallow copy

The first can be implemented using object.assign, and the second can be implemented using the extension operator (…).

let a = {
  age:21
}
let b = Object.assign({},a) // let b = {... a}
a.age = 18
console.log(b.age) / / 1
Copy the code
  • Deep copy

Deep copy mainly solves the problem of the same reference address

Parse (json.stringify (object))
// This method has limitations and cannot resolve nested reference objects
let a = {
    age: 18.name: {first:'wysoka'}}let b = JSON.parse(JSON.stringify(a))
a.name.first = 'web'
console.log(b.name.first) // wysoka

// The second method is a custom method
function deepcopy(obj){
  let res = obj instanceof Array ? [] : {}
  for(const [k,v] of Object.entries(obj)){
    res[k] = typeof v == 'object' ? copy(v) : v
  }
  return res;
}
Copy the code

9. Anti-shake and throttling

Anti – shake: in a period of time, the last operation shall prevail, in the specified time, repeat the operation and re-timing

// The easy version
function debounce(Fn, time){
  var t = null;
  return function(){
    clearTimeout(t);
    t = setTimeout(fn，time);
  }
}
Copy the code

Throttling: for example, state-owned enterprises will go off work at the designated time and output at the specified time. The refresh frequency of 60HZ in the browser is equivalent to playing the role of throttling

// The easy version
function throttle(The callback, duration){
  var lasttime = 0;
  return function(){
    var now = new Date().getTime();
    if(now - lasttime > 1000){ callback(); lasttime = now; }}}Copy the code

10. Several methods of array deduplication

  • Use ES6 for de-weighting
function unique(arr){
  return Array.from(new Set(arr)) // equivalent to [...new Set(arr)]
}
Copy the code
  • Two-level for loop
for (let i=0, len=arr.length; i<len; i++) {
    for (let j=i+1; j<len; j++) {
       if (arr[i] == arr[j]) {
         arr.splice(j, 1); len--; j--; }}}Copy the code
  • indexOf / includes
function removal(a,b){
  let arr = a.concat(b);
  return arr.filter((item,index) = >{
    //return arr.indexOf(item) === index
    //return arr.includes(item)})}Copy the code

11. Event triggering is divided into three stages

  • Capture stage, in target stage, bubble stage
  • Bubble events: When you use event bubbles, child elements fire first and parent elements fire laterstopPropagation()
  • Capture events: When you use event capture, the parent element fires first and the child element fires laterpreventDefault()
  • DOMEvent flow: Supports both event models: capture and bubble events


πŸ† nuggets technical essay | double festival special articles