js作用域的深层次理解

最新推荐文章于 2022-08-14 21:56:26 发布

原创最新推荐文章于 2022-08-14 21:56:26 发布 · 506 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文详细介绍了JavaScript中的作用域概念，包括全局作用域和函数作用域的特点及使用方式，并深入探讨了异步编程机制，如事件循环(Event Loop)的工作原理及宏任务与微任务的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js的作用域

在这里插入图片描述

作用域说明：一般理解指变量作用的范围

1.全局作用域

（1）全局作用域在页面大家时被创建，页面关闭时被销毁

（2）编写在script标签中的变量和函授，作用域为全局，在页面的任意位置都可以访问到

（3）在全局作用域中有全局对象window，代表一个浏览器窗口，由浏览器创建，可以直接调用

（4）全局作用域中声明的变量和函授会作为window对象的属性和方法保存

2.函数作用域

（1）调用函数时，函数作用域被创建，函数执行完毕，函数作用域被销毁

（2）每调用一次函数就会创建一个新的函数作用域，他们之间是相互独立的

（3）在函数作用域中可以访问到全局作用域的变量，在函数外无法访问到函数作用域的变量

（4）在函数作用域中访问变量，函数时，会线在自身作用域中寻找，若没有找到，则会到函数的上一级作用域中寻找，一直到全局作用域

作用域的深层次理解

执行期的上下文

当函数代码执行的前期，会创建一个执行期上下文的内部对象AO（作用域）
这个内部的对象是预编译的时候创建出来的，因为当函数被调用的时候，会先进行预编译
在全局代码执行的前期会创建一个执行器的上下文的对象GO

同步和异步的区别是什么？

基于JS是单线程语言

异步不会阻塞代码

同步会阻塞代码

手写用Promise加载一张图片

<script>
        function LoadImg(src) {
            const p = new Promise((resolve, reject) => {
                const img = document.createElement('img')
                // console.log(img);
                // var image = new Image()
                // image.src = src
                // console.log(image);
                document.body.appendChild(img)
                img.onload = () => {
                    resolve(img)
                }
                img.onerror = () => {
                    const err = new Error(`图片加载失败${src}`)
                    reject(err)
                }
                img.src = src
            })
            return p
        }
        const url =
            "https://tpc.googlesyndication.com/simgad/8662816701681352467?sqp=4sqPyQQ7QjkqNxABHQAAtEIgASgBMAk4A0DwkwlYAWBfcAKAAQGIAQGdAQAAgD-oAQGwAYCt4gS4AV_FAS2ynT4&rs=AOga4qlMruPOMpPatum_mJgXIFUKw6LbdQ"

        LoadImg(url).then(img => {
            console.log(img.width);
            return img
        }).then(img => {
            console.log(img.height);
        }).catch(ex => console.log(ex))
    </script>

异步应用场景

网络请求，如aiax图片加载

定时任务，如setTimeout

请描述event loop（事件循环/事件轮询)的机制，可画图

JS是单线程运行的

异步要基于回调来实现

event loop 就是异步回调的实现原理

总结event loop过程1

同步代码，一行一行放在Call Stack执行

遇到异步，会先“记录”下，等待时机（定时、网络请求）

时机到了，就移动到Callback Queue

总结event loop过程2

如Call stack为空（即同步代码执行完）Event Loop开始工作

轮询查找Callback Queue，如有则移动到Call Stack执行

然后继续轮询查找（永动机一样）

Dom事件和event loop

Promis的三种状态，如何变化

pending resolved rejected
pending ----> resolved 或 pending ----> rejected
三种状态 pending resolve reject 状态变化不可逆

什么是宏任务和微任务，有什么区别

宏任务：setTimeout、setInterVal、Ajax、DOM事件
微任务：Promise、async/await
微任务执行事件比宏任务要早，微任务在DOM渲染之前触发，宏任务在DOM渲染之后触发

HTML是什么，<!doctype html>是什么

HTML指的是超文本标记语言,<!doctype html>就是html5标准网页声明,如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。这就是的作用。

DOM的本质

Dom的本质是从html解析的一棵树

DOM是哪种数据结构

树（DOM树）

DOM操作的常用API

attr和property的区别

property：修改对象属性，不会提现到html结构中
attribute：修改html属性，会改变html结构
两者都有可能引起DOM重新渲染

一次性插入多个节点，考虑性能

 <div id="list"></div> 
<script>
        const nodeList = document.getElementById('div1')
        console.log(div1);
        //创建一个文档片段，此时还没有插入到DOM树种
        const flag = document.createDocumentFragment('li')

        //执行插入
        for (let i = 0; i < 100; i++) {
            const li = document.createElement('li')
            li.innerHTML = `List item${i}`
            flag.appendChild(li)
        }
        //都完成之后，再插入到DOM树种
        nodeList.appendChild(flag)
    </script>