小呆&小萌的情侣博客

最近在看一些优秀文章的时候，关注到了若川，他组织了一个若川视野X源码共读的活动，每周一起学习200行源码，我觉得这是一个非常不错的机会，不管是对于前端新人，还是工作多年的老手，都能够有一个提升。自然而然我也加入到这个活动里面，这是加入此活动的第一篇笔记。 关于手写一个带取消功能的延迟函数，我在两年前的一次面试中遇到过，这算是一个由浅入深的系列问题，从简单的延迟，到随机延迟，再到取消功能和最后的取消请求。当时没能答的很好，这次刚好源码共读第18期就是一个delay函数的实现，借此机会也复习一下相关知识。 知识点 实现一个完整的延迟函数 AbortController如何使用 了解Axios取消请求 实现一个完整的延迟函数我们来模拟一场面试，来学习如何实现一个完整的延迟函数。前提：面试询问了我一些关于Promise的知识。接着面试官说：小呆你好，我想实现一个闹钟，希望可以在任意时间后打印出“起床啦”，但是我希望你能用Promise实现。我心想，这还不容易，您瞧好嘞！ 基本功能12345// 面试官想要的效果(async () => { await delay(1 ...

相信很多前端同学在曾经的面试过程中，都经历过this指向的灵魂拷问。对于基础知识掌握不扎实的同学，this指向似乎是一门玄学，有人说this的绑定是在代码创建阶段完成的，有人说this的绑定是在代码执行阶段完成的，那真相到底是什么，跟着我一起复习一下吧。 知识点 this的绑定是在什么阶段完成的 this的绑定规则 this绑定的优先级 特殊环境的this指向 this的绑定是在什么阶段完成的如果你了解JavaScript执行上下文（对JS执行上下文不了解的同学推荐先看我的另一篇文章《理解执行上下文》），那么你一定能脱口而出：this的绑定是在执行阶段完成。我们先来回顾一下不同的执行上下文是如何被创建出来的： JavaScript引擎先创建全局执行上下文（this在此阶段被绑定到GlobalObject） 全局执行上下文入栈 代码开始执行，遇到函数调用，创建函数执行上下文（this在此阶段根据上下文动态绑定） 执行函数内部代码，执行完毕，函数执行上下文出栈 我们都知道全局执行上下文的this指向的是window对象（浏览器下）。那函数的执行上下文，this绑定的依据是什么？答 ...

“春来也无信，春去也无踪，眼睛一眨，在北平市内，春光就会同飞马似的溜过”，郁达夫曾这样幽默的描述过北京的春天。是的，北京的春天总是很短，刚脱掉羽绒服，似乎还没细细的感受春天到来，说不定就得穿上短袖，打上遮阳伞。正因为北京的春天短，所以才要抓住时机，去感受一下北京的春天。 三年的口罩，隔绝了我们与大自然的拥抱，解封后的第一个春天，是时候出去走走了。刚好小萌的小伙伴组织了一次自驾露营，借着这个机会，去好好感受一下春天的味道。 我们这次露营的地点选在了怀柔区的白河湾生态营地，从家里出发全程 95Km，单程在 2 个小时左右。似乎是周末+郊区的原因，路上的车不算多，路两边的小树苗也才刚刚抽枝。 进入怀柔区后，车渐渐的就多了起来。路两边开满了画，甚是好看。还有很多观景台，能近距离的观赏一些未经开发的长城。不过由于观景台人还挺多，我们也没有停留。 终于到达目的地了，小伙伴们也忙碌了起来，搭天幕，架烧烤架，零食水果满满一大桌。我先偷个懒拍几张美美的照片~ 吃吃喝喝总是少不了的，户外烧烤肯定是必备的项目之一了。小伙伴们的手艺也是棒棒哒~ 吃饱喝足，小伙伴们有的打牌（输了要表演节目的哟），有的钓 ...

众所周知，前端是一个低门槛，进阶难的一个岗位。而JavaScript又是前端中的重中之重，不管是出于面试还是提升自己，都得学习并掌握JavaScript程序如何在内部执行的。而理解执行上下文和执行栈对于理解其他JavaScript概念（如：提升、作用域和闭包）至关重要。 知识点 什么是执行栈 什么是执行上下文 执行上下文的发展阶段 如何创建执行上下文 什么是执行栈在学习执行上下文之前，我们先了解一些前置知识： 我们都知道汽车最重要的部分是：引擎（发动机）。JavaScript也是如此，**JavaScript引擎是运行JavaScript代码的发动机**。 而执行栈，就是JavaScript引擎用来管理执行上下文的数据结构。代码执行期间的所有执行上下文，都会被存储到执行栈中。栈的特点是后入先出，所以先入栈的执行上下文会在最后才出栈。 执行栈（也叫调用栈），具有LIFO（后入先出）结构，用于存储在代码执行期间创建的所有执行上下文 什么是执行上下文了解了什么是执行栈之后，接下来我们看一下什么是执行上下文： JavaScript标准，把一段代码（包括函数）执行所需的所有信息定义为 ...

new运算符，想必大家都不陌生，在工作当中肯定用到过。而且也是面试当中经常问的一道面试题，那你有了解过new运算符背后的原理和如何实现一个new吗？一起来复习一下吧！ 知识点 new运算符的作用与原理 如何实现一个new运算符 new运算符的作用与原理 new运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。 通俗的来讲，new运算符的作用就是通过构造函数来创建一个带有原型链的实例对象。或者你可以这样理解：就像小时候的中秋节，家里会用刻有小兔子的月饼的模具，生产好多个印有小兔子的月饼的过程。是不是就有那味儿了~ 举个例子：中秋节妈妈交给我一个任务，需要我做5个印有小兔子的月饼。我们用代码来实现一下： 12345var moonCake = { id: 1, fill: 'wuren', type: 'rabbit', info: function() { console.log('eat') } }var moonCake2 = { id: 2, f ...

题目描述： 题目：给定一个开始日期’2022-08’，一个结束日期’2023-02’ 要求：实现一个函数getMonthArray，返回开始日期到结束日期中间的所有月份[‘2022-09’, ‘2022-10’, ‘2022-11’, …, ‘2023-01’] 知识点 字符串的拼接与截取 数字类型与字符串类型的相互转换 月份与年的计算 实现思路 根据入参截取出开始年份、月份。 计算两个日期实际相差几个月。 循环拼接日期，放入到数组中，需要注意月份大于12时，需重置为1，同时年份+1 1234567891011121314151617181920212223function getMonthArray(startDate, endDate) { let startYear = parseInt(startDate.split('-')[0]) let startMonth = parseInt(startDate.split('-')[1]) let yearDiff = parseInt(endDate.s ...

原型和原型链，是JavaScript中的一个重要知识点，也是面试中的高频考点，理解并掌握原型和原型链，对于前端开发者来说是重中之重。下面就通过Instanceof运算符来复习一下相关知识吧。 知识点 理解JavaScript对象原型 原型链如何工作 instanceof运算符的作用与实现 理解JavaScript对象原型与原型链 JavaScript常被描述为一种基于原型的语言——每个对象拥有一个原型对象，对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型，并从中继承方法和属性，一层一层、以此类推。这种关系常被称为原型链。 JavaScript中规定，每个函数都有一个特殊的属性prototype，这个属性的值是一个对象，通常被称为这个函数的原型。通俗的讲，我们叫它显示原型。通过new一个函数，我们可以得到一个实例对象，在创建这个实例对象的过程中，会将实例对象内部的__proto__指向构造它的函数的显示原型上。通过__proto__我们可以获取对象内部的原型，我们叫它隐式原型。有点绕对不对，下面我们通过代码和图像来加深理解： (注：__proto__为浏览器提供的 ...

防抖和节流，在日常的开发过程中会经常用到，而在面试中，也是经常会被问的一道手写题。下面就一起复习一下这两个函数的知识点和实现吧。 知识点在工作中常见的一些场景，比如input搜索框、监听窗口的resize，元素的拖拽，以及滚动条的监听。这些场景的共同点就是事件会被频繁的触发，而频繁的触发会导致资源和性能的大量消耗。通常我们会使用防抖和节流函数来进行优化，那么什么场景该使用防抖，什么时候该使用节流呢？ 共同点 区别 应用场景 防抖debounce 在事件频繁被触发时， 只执行最后一次 input输入框、窗口resize、button点击 节流throttle 减少事件执行的次数 有规律的执行 拖拽、scroll 防抖debounce实现通过知识点我们可以知道，防抖函数的作用是在事件被频繁触发时，只执行最后一次。本质上是延迟执行事件的时机，那么我们可以利用定时器来实现它。 12345678910// 拆解需求：// 1. n秒内只能执行一次，所以需要一个setTimeout来控制fn的执行时机。// 2. 如果触发事件后在n秒内又触发了事件，则重新计算函数延迟执行 ...