YvetteLau
YvetteLau
> 为什么会写这篇博文呢？ 前段时间，和头条的小伙伴聊天问头条面试前端会问哪些问题，他称如果是他面试的话，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...
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,...
### 关于【Step-By-Step】 **不积跬步无以至千里。** [Step-By-Step](https://github.com/YvetteLau/Step-By-Step) (点击进入项目) 是我于 `2019-05-20` 开始的一个项目，项目愿景：一步一个脚印，量变引起质变。 [Step-By-Step](https://github.com/YvetteLau/Step-By-Step) 仅会在工作日发布面试题，主要考虑到部分小伙伴平时工作较为繁忙，或周末有出游计划。每个周末我会仔细阅读大家的答案，整理最一份较优答案出来，因本人水平有限，有误的地方，大家及时指正。参与答题的小伙伴，可以对比自己的回答。 **答题不是目的**，不希望大家仅仅是简单的搜索答案，复制粘贴到issue下。更多的是希望大家及时查漏补缺 / 巩固相关知识。 已经过去的一周中，大家回答的都非常认真，希望小伙伴们能够一如既往的坚持。同样也欢迎更多的小伙伴一起参与进来，如果想 **加群**学习，扫码[**二维码**](https://user-gold-cdn.xitu.io/2019/5/26/16af37df7708267b?w=243&h=245&f=jpeg&s=36789) (点击查看)，添加我为好友，验证信息为**加入组织**，我拉你进群。 ### 1.如何正确判断this的指向？(2019-05-20) 如果用一句话说明 this 的指向，那么即是: 谁调用它，this 就指向谁。 但是仅通过这句话，我们很多时候并不能准确判断 this 的指向。因此我们需要借助一些规则去帮助自己： this 的指向可以按照以下顺序判断: #### 1....
```javascript function Foo() { getName = function() {console.log(1)}; return this; } Foo.getName = function() {console.log(2)}; Foo.prototype.getName = function() {console.log(3)}; var getName = function() {console.log(4)}; function getName() {console.log(5)}; Foo.getName(); getName(); Foo().getName();...
```javascript //? if(a == 1 && a == 2 && a == 3) { console.log(1); } ```
互联网寒冬之际，各大公司都缩减了HC，甚至是采取了“裁员”措施，在这样的大环境之下，想要获得一份更好的工作，必然需要付出更多的努力。 一年前，也许你搞清楚闭包，this，原型链，就能获得认可。但是现在，很显然是不行了。本文梳理出了一些面试中有一定难度的高频原生JS问题，部分知识点可能你之前从未关注过，或者看到了，却没有仔细研究，但是它们却非常重要。本文将以真实的面试题的形式来呈现知识点，大家在阅读时，建议不要先看我的答案，而是自己先思考一番。尽管，本文所有的答案，都是我在翻阅各种资料，思考并验证之后，才给出的(**绝非复制粘贴而来**)。但因水平有限，本人的答案未必是最优的，如果您有更好的答案，欢迎给我留言。 本文篇幅较长，但是满满的都是干货！并且还埋伏了可爱的表情包，希望小伙伴们能够坚持读完。 衷心的祝愿大家都能找到心仪的工作。  > ### 1. 原始类型有哪几种？null 是对象吗？原始数据类型和复杂数据类型存储有什么区别？ - 原始类型有6种，分别是undefined,null,bool,string,number,symbol(ES6新增)。 - 虽然 typeof null 返回的值是 object,但是null不是对象，而是基本数据类型的一种。 - 原始数据类型存储在栈内存，存储的是值。 - 复杂数据类型存储在堆内存，存储的是地址。当我们把对象赋值给另外一个变量的时候，复制的是地址，指向同一块内存空间，当其中一个对象改变时，另一个对象也会变化。 ---------- > ### 2. typeof 是否正确判断类型? instanceof呢？ instanceof...