Blog
Blog copied to clipboard
【前端进阶】优质博文
Bumps [terser](https://github.com/terser/terser) from 4.3.1 to 4.8.1. Changelog Sourced from terser's changelog. v4.8.1 (backport) Security fix for RegExps that should not be evaluated (regexp DDOS) v4.8.0 Support for numeric separators (million...
Bumps [eventsource](https://github.com/EventSource/eventsource) from 1.0.7 to 1.1.1. Changelog Sourced from eventsource's changelog. 1.1.1 Do not include authorization and cookie headers on redirect to different origin (#273 Espen Hovlandsdal) 1.1.0 Improve performance...
> 为什么会写这篇博文呢? 前段时间,和头条的小伙伴聊天问头条面试前端会问哪些问题,他称如果是他面试的话,event-loop肯定是要问的。那天聊了蛮多,event-loop算是给我留下了很深的印象。原因很简单,因为之前我从未深入了解过,如果是面试的时候,我遇到了这个问题,估计回答得肯定不如人意。 因此,最近我阅读了一些相关的文章,并细细梳理了一番,输出了本篇博文,希望能帮助大家搞懂浏览器的event-loop。后续会继续补充node中的event-loop。 ### 1. 预备知识 > JavaScript的运行机制: (1)所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。 (2)主线程之外,还存在"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。 (3)一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。 (4)主线程不断重复上面的第三步 概括即是: 调用栈中的同步任务都执行完毕,栈内被清空了,就代表主线程空闲了,这个时候就会去任务队列中按照顺序读取一个任务放入到栈中执行。每次栈内被清空,都会去读取任务队列有没有任务,有就读取执行,一直循环读取-执行的操作 > 一个事件循环中有一个或者是多个任务队列 > JavaScript中有两种异步任务: 1. 宏任务: script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI...
Bumps [url-parse](https://github.com/unshiftio/url-parse) from 1.4.7 to 1.5.10. Commits 8cd4c6c 1.5.10 ce7a01f [fix] Improve handling of empty port 0071490 [doc] Update JSDoc comment a7044e3 [minor] Use more descriptive variable name d547792 [security]...
Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.9.0 to 1.14.8. Commits 3d81dc3 Release version 1.14.8 of the npm package. 62e546a Drop confidential headers across schemes. 2ede36d Release version 1.14.7 of the npm package. 8b347cb...
Bumps [ajv](https://github.com/ajv-validator/ajv) from 6.10.2 to 6.12.6. Release notes Sourced from ajv's releases. v6.12.6 Fix performance issue of "url" format. v6.12.5 Fix uri scheme validation (@ChALkeR). Fix boolean schemas with strictKeywords...
Promise是前端面试中的高频问题,我作为面试官的时候,问Promise的概率超过90%,据我所知,大多数公司,都会问一些关于Promise的问题。如果你能根据PromiseA+的规范,写出符合规范的源码,那么我想,对于面试中的Promise相关的问题,都能够给出比较完美的答案。 我的建议是,对照规范多写几次实现,也许第一遍的时候,是改了多次,才能通过测试,那么需要反复的写,我已经将Promise的源码实现写了不下七遍。 ## Promise的源码实现 ```javascript /** * 1. new Promise时,需要传递一个 executor 执行器,执行器立刻执行 * 2. executor 接受两个参数,分别是 resolve 和 reject * 3. promise 只能从 pending 到 rejected, 或者从 pending 到 fulfilled...
嗨,你真的懂this吗?
this关键字是JavaScript中最复杂的机制之一,是一个特别的关键字,被自动定义在所有函数的作用域中,但是相信很多JavaScript开发者并不是非常清楚它究竟指向的是什么。听说你很懂this,是真的吗? 请先回答第一个问题:如何准确判断this指向的是什么?【面试的高频问题】 —————————————————————————————————————————————— 【图片来源于网络,侵删】 再看一道题,控制台打印出来的值是什么?【浏览器运行环境】 ```javascript var number = 5; var obj = { number: 3, fn1: (function () { var number; this.number *= 2; number = number * 2;...
互联网寒冬之际,各大公司都缩减了HC,甚至是采取了“裁员”措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力。 一年前,也许你搞清楚闭包,this,原型链,就能获得认可。但是现在,很显然是不行了。本文梳理出了一些面试中有一定难度的高频原生JS问题,部分知识点可能你之前从未关注过,或者看到了,却没有仔细研究,但是它们却非常重要。本文将以真实的面试题的形式来呈现知识点,大家在阅读时,建议不要先看我的答案,而是自己先思考一番。尽管,本文所有的答案,都是我在翻阅各种资料,思考并验证之后,才给出的(**绝非复制粘贴而来**)。但因水平有限,本人的答案未必是最优的,如果您有更好的答案,欢迎给我留言。 本文篇幅较长,但是满满的都是干货!并且还埋伏了可爱的表情包,希望小伙伴们能够坚持读完。 写文超级真诚的小姐姐祝愿大家都能找到心仪的工作。 如果你还没读过上篇【上篇和中篇并无依赖关系,您可以读过本文之后再阅读上篇】,可戳[【面试篇】寒冬求职季之你必须要懂的原生JS(上)](https://juejin.im/post/5cab0c45f265da2513734390) **小姐姐花了近百个小时才完成这篇文章,篇幅较长,希望大家阅读时多花点耐心,力求真正的掌握相关知识点。** ### 1.说一说JS异步发展史 异步最早的解决方案是回调函数,如事件的回调,setInterval/setTimeout中的回调。但是回调函数有一个很常见的问题,就是回调地狱的问题(稍后会举例说明); 为了解决回调地狱的问题,社区提出了Promise解决方案,ES6将其写进了语言标准。Promise解决了回调地狱的问题,但是Promise也存在一些问题,如错误不能被try catch,而且使用Promise的链式调用,其实并没有从根本上解决回调地狱的问题,只是换了一种写法。 ES6中引入 Generator 函数,Generator是一种异步编程解决方案,Generator 函数是协程在 ES6 的实现,最大特点就是可以交出函数的执行权,Generator 函数可以看出是异步任务的容器,需要暂停的地方,都用yield语句注明。但是 Generator 使用起来较为复杂。 ES7又提出了新的异步解决方案:async/await,async是 Generator 函数的语法糖,async/await 使得异步代码看起来像同步代码,异步编程发展的目标就是让异步逻辑的代码看起来像同步一样。 > 1.回调函数: callback ```javascript //node读取文件 fs.readFile(xxx,...
今年来,各大公司都缩减了HC,甚至是采取了“裁员”措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力。 本文挑选了20到大厂面试题,大家在阅读时,建议不要先看我的答案,而是自己先思考一番。尽管,本文所有的答案,都是我在翻阅各种资料,思考并验证之后,才给出的。但因水平有限,本人的答案未必是最优的,如果您有更好的答案,欢迎给我留言。 本文篇幅较长,希望小伙伴们能够坚持读完,如果想加入交流群,可以通过文末的公众号添加我为好友。 ### 1. new的实现原理是什么? `new` 的实现原理: 1. 创建一个空对象,构造函数中的this指向这个空对象 2. 这个新对象被执行 [[原型]] 连接 3. 执行构造函数方法,属性和方法被添加到this引用的对象中 4. 如果构造函数中没有返回其它对象,那么返回this,即创建的这个的新对象,否则,返回构造函数中返回的对象。 ```javascript function _new() { let target = {}; //创建的新对象 //第一个参数是构造函数 let [constructor,...