前端前端
fabric
算法
jsBlock
styleBlock
工具其他
Vue、React相关
canvas
webgl
GitHub
fabric
算法
jsBlock
styleBlock
工具其他
Vue、React相关
canvas
webgl
GitHub
  • 1_common
  • 2_react
  • eslint
  • git
  • jenkins
  • linux
  • make
  • Markdown基本写法
  • mysql安装
  • nginx
  • node安装
  • php安装
  • rabbitMQ
  • typescript
  • vuepress搭建

题目

1、js 原始值

直接存储在栈内存中的数据,它们是不可变的

  • number、string、boolean、undefined、null、symbol、bigint

2、原型链

来源网上找的图

  1. __proto__和constructor属性是对象所独有的
  2. prototype属性是函数所独有的
  3. 函数也是对象,也有__proto__和constructor属性
  • 对象所独有的_proto__属性,由一个对象指向一个原型对象,对象找属性,往__proto__属性所指向的父对象里找,直到原型链顶端null
  • prototype属性是函数所独有的,f1.proto === Foo.prototype,函数在创建的时候,其实会默认同时创建该函数的prototype对象。
  • constructor属性的含义就是指向该对象的构造函数,Foo.prototype.constructor===Foo

3、什么是 JavaScript 闭包?

闭包是指函数能够访问并记住其词法作用域,即使该函数在其词法作用域之外执行。

  • 函数嵌套函数
  • 内部函数可以访问外部函数的作用域
  • 外部函数的变量不会被垃圾回收

📝 示例:

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

4、js事件循环

来源

  • 宏任务(macro-task):包括整体代码script,setTimeout,setInterval。
  • 微任务(micro-task):Promise,process.nextTick。
  1. 进行第一轮事件循环的时候会把全部的js脚本当成一个宏任务来运行。
  2. 如果执行中遇到setTimeout之类宏任务,那么就把这个setTimeout内部的函数推入「宏任务的队列」中,下一轮宏任务执行时调用
  3. 如果执行中遇到 promise.then() 之类的微任务,就会推入到「当前宏任务的微任务队列」中,在本轮宏任务的同步代码都执行完成后,依次执行所有的微任务
  4. 第一轮事件循环中当执行完全部的同步脚本以及微任务队列中的事件,这一轮事件循环就结束了,开始第二轮事件循环。

📝 示例:

new Promise(function (resolve) { 
    console.log('1')// 宏任务一
    resolve()
}).then(function () {
    console.log('3') // 宏任务一的微任务
})
setTimeout(function () { // 宏任务二
    console.log('4')
    setTimeout(function () { // 宏任务五
        console.log('7')
        new Promise(function (resolve) {
            console.log('8')
            resolve()
        }).then(function () {
            console.log('10')
            setTimeout(function () {  // 宏任务七
                console.log('12')
            })
        })
        console.log('9')
    })
})
setTimeout(function () { // 宏任务三
    console.log('5')
})
setTimeout(function () {  // 宏任务四
    console.log('6')
    setTimeout(function () { // 宏任务六
        console.log('11')
    })
})
console.log('2') // 宏任务一

async and await

  • async 函数会返回一个 Promise 对象
  • await关键字必须出现在async函数中,await后面不是必须要跟一个异步操作,也可以是一个普通表达式。
  • await 后面的代码,本质上等价于 Promise.then,会被放进「微任务队列」

📝 示例:

setTimeout(function () {
  console.log('6')
}, 0)
console.log('1')
async function async1() {
  console.log('2')
  await async2() // await async2() 不会阻塞同步代码
  console.log('5') // console.log('5') 会被放进 微任务(microtask)
}
async function async2() {
  console.log('3')
}
async1()
console.log('4')

  • 同步代码先执行
  • 微任务按“入队顺序”执行
  • await 的后半段微任务,入队时机晚于当前同步代码里的 .then(下面的示例,为什么6比7先执行)

📝 示例:

async function async1() {
  console.log('2')
  await async2()
  console.log('7')
}

async function async2() {
  console.log('3')
}

setTimeout(function () {
  console.log('8')
}, 0)

console.log('1')
async1()

new Promise(function (resolve) {
  console.log('4')
  resolve()
}).then(function () {
  console.log('6')
})
console.log('5')

总结

  • 同步先跑完
  • then 立刻排队
  • await 慢半拍
  • 微任务清空
  • 才进下一轮

5、浏览器的缓存机制

来源网上找的图

Edit this page
Next
2_react