• Typeof Instanceof distinction and implementation

Typeof is used to determine the basic data types, null, and undefined, string, number, Boolean, symbol (es6)

Instanceof is used to determine whether an instance (new) belongs to a type, that is, whether there is an attribute on the stereotype chain

The instanceof principle is to check whether the prototype property of the right object is in the prototype chain of the left object. It will traverse the prototype chain of the left object until it finds the prototype of the right object

Object.prototype.__proto__ in unmodified casenull
Copy the code

Instanceof implementation

function newInstance(left, right){
    const rightVal = right.prototype
    let leftVal = left.__proto__
    while(true) {if(leftVal === null) {return false
        }
        if(leftVal === rightVal){
            return true
        }
        leftVal = leftVal.__proto__
    }
}

let Person = function(){}
let po = newPerson() newInstance(Po, Person) returnstrue
Copy the code

  • Null is different from undefined

Ruan Yifeng teacher

Null represents an object with no value, converted to a value of 0, the end of the object prototype chain

Undefined indicates the original value of no value, which is converted to a value. NaN variables are declared without assigning values. When a function is called, undefined is returned by default

  • Several ways to judge arrays

  1. Object.prototype.toString.call([]) === “[object Array]”

  2. Array.isArray([])

  3. [] instanceof Array

  4. [].constructor === Array

  • A method to remove the weight of an array

 let arr = [1.2.3.4.5.6.6.7]

 1.const resultList = [...new Set(arr)]

 2. let resultList = []
    arr.forEach(item= > {
      if(resultList.indexOf(item) < 0){
          resultList.push(item)
      }  
    });
 3. let resultList = arr.filter((item, index) = > 
       arr.indexOf(item, 0) === index
    )
Copy the code

  • Promise principle and implementation

  • Event loop macro task micro task

  • Let var difference and related knowledge points

Block-level scopes, variable promotion, temporary dead zones, repeated declarations

Classic topic

The use of var

for (var i = 0; i < 3; i++) {
    setTimeout(function () {
      console.log(i)
    }, 1000);
}
Copy the code

All three setTimeouts share a unique I.

Use the let

for (let i = 0; i < 3; i++) {
    setTimeout(function () {
      console.log(i)
    }, 1000);
}
Copy the code

  • Enter the URL to see the page process

  • Target is different from currentTarget

Classic is used on UL LI. Instead of binding the click event to each LI, it is tied to the parent UL

Target refers to the hit li

CurrentTarget refers to the UL of the binding

  • Javascript garbage collection mechanism

The javascript automatic garbage collection mechanism does not require a relationship between when memory is allocated and when memory is freed to participate in the connection

Tags are used to identify and remove junk data; After leaving the local scope, variables in the region that are not referenced by the external scope are cleared later

1. Mark-collation: a large area of discontinuous memory fragments may be left after some garbage data is cleared and certain memory space is released. As a result, continuous memory may not be allocated for some objects in the future, and the memory space needs to be collated.

2. Alternate execution: Because JavaScript runs on the main thread, js execution will be suspended when garbage collection mechanism is implemented. If garbage collection execution time is too long, it will bring obvious lag phenomenon to users.

Normally global state variables are not automatically reclaimed,

Stack space: Base data type, execution context

Heap space: Complex data types (Object, function, array)

Memory leak scenario:

1. Improper use of closures

2. The forget timer

3. Global variable (refers to the variable is not declared directly assigned value)

4. Separate DOM nodes

5. Printing of the console

Page performance optimization

Check whether there are too many network requests, resulting in a slow data return, you can do some caching

It is also possible that the bundle of a resource is too large, and you can consider splitting it

Then check the JS code to see if there are too many loops somewhere that are taking too long on the main thread

The browser rendered too many things in one frame, causing a lag

There can be a lot of repeated rearranging and redrawing during page rendering

Event delegation

  1. Performance of DOM traversal: Additional cost of for or other loop traversal
  2. The principle of event delegation: Event bubbling
  3. Limitations: Mousemove supports bubbling but computates position, and focus, blur, etc., do not support bubbling, which cannot be done with event delegation

Event delegate: Delegate functions that respond to events from one element to another element

For example, UL LI binds the event of hitting LI to UL, and binds the response events required by the inner layer to the outer layer through the event bubbling mechanism

Extend the difference between Target and eventTarget

Target: Refers to the hit Li

EventTarget: Indicates the ul bound