Blog
Blog copied to clipboard
YvetteLau
【前端进阶】优质博文
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...
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot] avatar"){kind=avatar}
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,...