网站统计,全屏自适应网站模板,物业管理系统的设计与实现,网站开发计算机配置前端面试题库 #xff08;面试必备#xff09; 推荐#xff1a;★★★★★
地址#xff1a;前端面试题库
作用域与闭包
作用域 作用域是当前的执行上下文#xff0c;值和表达式在其中“可见”或可被访问。如果一个变量或表达式不在当前的作用域中#xff0… 前端面试题库 面试必备 推荐★★★★★
地址前端面试题库
作用域与闭包
作用域 作用域是当前的执行上下文值和表达式在其中“可见”或可被访问。如果一个变量或表达式不在当前的作用域中那么它是不可用的。作用域也可以堆叠成层次结构子作用域可以访问父作用域反过来则不行。————MDN 作用域最重要的特点是子作用域可以访问父作用域反之则不行。
作用域可细分为4种
全局作用域博爱的作用域任何地方都能被访问到。模块作用域一个文件的独立作用域。函数作用域每个函数都有它的作用域。块级作用域这是ES6引入let和const后出现的作用域。
如下我偷取了You-Dont-Know-JS书里介绍作用域和闭包的示例。 1、2、3分别是全局作用域、函数作用域、块级作用域。也能从清晰的看出作用域的层级结构。 我相信大家肯定看过这样的面试题
for(var i 1;i5;i ){setTimeout((){console.log(i)},1000)
}
// 5 5 5 5 5这种离奇的现象是怎么回事呢且来接着来看看闭包分说分说。
闭包 闭包closure是一个函数以及其捆绑的周边环境状态lexical environment词法环境的引用的组合。换而言之闭包让开发者可以从内部函数访问外部函数的作用域。在 JavaScript 中闭包会随着函数的创建而被同时创建。————MDN 哇第一眼看这个定义会一脸懵逼。但是细细一看其实还是一脸懵逼。让我们稍微转化一下角度就会好理解一点。
JS中的函数创建时它会形成闭包。拟像化理解你养了一只小狗小狗在出生时就跟着你它的生活和脑海里都是你了呜呜呜没错我是理智爱犬人士这世界没了小狗转不了即使它被拐卖、换主人、被你遗弃脑海里也都是你......说到这我已经快哭了多么感人。闭包就是这样函数创建时它会记住他是在哪个作用域被创建的。
举个代码例子
function makeFunc() {var name Mozilla;function displayName() {alert(name);}return displayName;
}var myFunc makeFunc();
myFunc();在本例子中myFunc 是执行 makeFunc 时创建的 displayName 函数实例的引用。displayName 的实例维持了一个对它的词法环境变量 name 存在于其中的引用。因此当 myFunc 被调用时变量 name 仍然可用其值 Mozilla 就被传递到alert中。————上述是MDN的解释。
现在看来是不是好理解了点displayName就是这只小狗狗即使被myFunc领养也还是记住makeFunc的一切....
那么回过头来看这道面试题
for(var i 1;i5;i ){setTimeout((){console.log(i)},1000)
}
// 5 5 5 5 5 诶还是奇怪为什么i只记得最后的结果中间的过程i都没有了。思考一个问题i在哪个作用域i在一个for循环外面的作用域i就一个它在不断的做加法多个setTimeout函数开始执行时用的都是一个i呀。
那么该如何解决
用let创建每个循环独有的块级作用域它们会记住属于他们的i。
for(let i 1;i5;i ){setTimeout((){console.log(i)},1000)
}
// 1 2 3 4 5事件循环微任务和宏任务 浏览器中的 JavaScript 和 NodeJs 中的流程都是基于事件循环的 事件循环是 JavaScript 引擎在等待任务、执行任务俩个状态中不断循环的过程。
其中任务就分为两类宏任务与微任务(都属于异步任务)。
宏任务
渲染事件(DOM 渲染、重绘、计算布局)用户交互事件(鼠标、键盘等事件)网络请求JavaScript 脚本事件
为了比较好的控制任务页面进程引入了消息队列和事件循环机制将要执行的宏任务依次添加到队列中秉承着先进先出的良好品德就这样有条不紊的按顺序执行执行完毕就拍拍屁股滚出队列。
但是对于精确时间的把控宏任务就难以胜任了。
DOM 事件、用户交互事件、网络请求等任务都是系统添加进队列的我们不知道他们在队列中的次序是如何的所以对于任务什么时候开始我们无法掌握。
例如
!DOCTYPE html
htmlbodydiv idcontentlixx/li/div/bodyscript typetext/javascriptfunction timer2() {console.log(我来咯);}function timer() {console.log(我开始咯你来追我呀);setTimeout(timer2, 0);}setTimeout(timer, 0);/script
/html示例中JavaScript 脚本任务有俩个定时器他们是一对很甜蜜的小情侣。我们所希望的是他们能够粘在一起甜甜蜜蜜的。即俩个定时器执行的时机是无缝衔接的但是 setTimeout 的执行间隔虽然可以设置成 0实际上却是有 4ms 的间隔所以很有可能在这间隔中就会被系统添加一些任务进入队列打乱了队列。
宏任务的时间粒度大使它难以胜任一些高实时性的需求。
这时候微任务就应运而生了。
微任务
微任务的执行时机是主函数执行结束之后当前宏函数执行结束之前。这么说大家脑海里首先浮现的是不是 Promise 的处理程序.then/.catch。
是的它们就是典型的微任务。
宏任务有它的消息队列微任务也有它的消息队列。当宏任务中的 JavaScript 快执行完的时候JavaScript 引擎会查看当前微任务队列中是否有任务如果有的话就按照顺序依次执行。 前端面试题库 面试必备 推荐★★★★★
地址前端面试题库
