JS some small knowledge points

1. The type of JS

• Common value types: Boolean, symbol, string, number, undefined
• Reference types: array, Object, function, null

2. The typeof operator

• Identify all value types
• Identify the function
• Check if it is a reference type (cannot be subdivided)

3. = =

In addition to judge = = null when other use = = =, including the if (obj = = null) is equivalent to the if (obj = = = null | | obj = = = undefined) null = = undefined results to true

4. 0, ‘ ‘, undefined, null, NAN, false is falsely value, falsely value refers to!!!!! That is, the value returned by taking the opposite value twice

5. Object. __proto__ is null

6. An instanceof (an instanceof Array) implementation works by determining whether a’s __proto__ refers to Array’s prototype

7. closure

• Function as the return value

function fn(){
	const a = 100;
    return function(){
    	console.log(a)
    }
}
const fn1 = fn()
const a = 200
fn1()// 100
Copy the code

• Function as argument

function print(fn){
	const a =100
    fn()
}
const a = 200
function fn(){
	console.log(a)
}
print(fn)//200
Copy the code

Closures are lookups of free variables that look up to the parent scope where the function is defined, not where it is executed

8. The hasOwnProperty() method returns a Boolean value indicating whether the object has the specified property in its own properties (that is, whether it has the specified key).

9. The call, the apply, bind

• call

Function.prototype.mycall = function(obj){
  // Get the remaining elements
  const args = [...arguments].slice(1)
  obj.fn = this//this refers to the called fn1
  console.log(this)
  constnewfn = obj.fn(... args)delete obj.fn
  return newfn
  
}
function fn1(a, b, c) {
    console.log('this'.this)
    console.log(a, b, c)
    return 'this is fn1'
}
fn1.call([1.2].3.4.5)
fn1.mycall([1.2].3.4.5)
Copy the code

• apply

Function.prototype.myapply = function(obj){
  // Get the remaining elements
  const args = [...arguments].slice(1)
  obj.fn = this
  constnewfn = obj.fn(... args[0])// this is equivalent to the package array
  return newfn
  
}
function fn1(a, b, c) {
    console.log('this'.this)
    console.log(a, b, c)
    return 'this is fn1'
}
fn1.apply([1.2], [3.4.5])
fn1.myapply([1.2], [3.4.5])
Copy the code

• bind

Function.prototype.mybind = function(){
  // Get the remaining elements
  const t = [...arguments].shift()
  const args = [...arguments].slice(1)
  self= this
  return function (){
    self.apply(t,args)
  }
  
}
function fn1(a, b, c) {
    console.log('this'.this)
    console.log(a, b, c)
    return 'this is fn1'
}
const fn2 =fn1.bind([1.2].3.4.5)
fn2()
const fn3 =fn1.mybind([1.2].3.4.5)
fn3()
Copy the code

10. Asynchronous Application Scenario

• Web requests, such as Ajax image loading
• Scheduled task, setTimeout

Promise was invented to solve the problem of callback hell

11. eventloop

Asynchronous: Ajax and setTimeout both use callbacks based on eventloop and DOM also uses callbacks based on Eventloop

12. Promise Three states Pending Resolved Rejected

Pending states do not trigger THEN and catch

Then and catch, anything that does not return an error is resolved promise

const p = Promise.resolve().then(() = >{console.log(1); throw Error('Err')})//rejected
        p.catch(() = >{console.log(2)}) //resolved
        .then(() = >{console.log(3)})	//resolved
Copy the code

const p = Promise.resolve().then(() = >{console.log(1); throw Error('Err')})//rejected
        p.catch(() = >{console.log(2)}) //resloved
        .catch(() = >{console.log(3)})
Copy the code

Async encapsulates a promise, executes async functions, returns a promise object, await = promise. Then try… catch… Exceptions can be caught instead of the catch of promises

! (async function fn1 (){
            const p= Promise.reject('err')
            const res = await p
            console.log(res)
        })()
Copy the code

! (async function fn1 (){
            const p= Promise.resolve(100)
            const res = await p
            console.log(res)
        })()
Copy the code

13. for.. of..(for in) andforEachInstead, he must wait for one callback to end before pulling the next, meaning that 2,4, and 6 occur one at a time

const arr =[1.2.3]
        arr.forEach(async (i)=>{
            const p = await add(i)
                console.log(p)
        })
------
function add(num){
            return new Promise((resolve) = >{
                setTimeout(() = >
                resolve(num+num),1000)})}const arr =[1.2.3]
        !(async function fn1(){
            for(let i of arr){
                console.log(i)
                const p = await add(i)
                console.log(p)
            } 
        })()
Copy the code

whyMacro taskThe execution time ratio ofMicro taskstoOn the evening ofbecauseMacro taskIs in theAfter DOM renderingTriggered, andMicro tasksIs in theBefore DOM renderingTriggered microtasks are specified by ES6 and macro tasks are specified by the browser