前端探险家的博客

1.在项目中utils下创建timeOut.js文件let lastTime = new Date().getTime()let currentTime = new Date().getTime()let timeOut = 30 * 60 * 1000 //设置超时时间: 30分钟window.onload = function () { window.document.onmousedown = function () { sessionStorage.setItem("last

模拟实现new原理官方定义模拟实现new工作原理构造函数有返回值new模拟实现的最终版面试中，有些面试官通常会问：new一个的过程发生了什么？今天我们就来探索一下，并手动模拟一下new操作符的工作原理；首先我们来看一下原生new的用法：function Person(name,age){ this.name = name this.age = age}Person.prototype.hobbit = "听音乐"var XH = new Person('小红','20')cons

call、apply和bind的详解身世背景call()、apply()和bind()的区别call()和手动模拟实现apply()和手动模拟实现bind()和手动模拟实现身世背景是什么？在前面的学习的JS原型链中，我们可以知道，js中所有的函数都是Function的实例，Function的原型对象即Function.prototype）中有很多属性和方法，其中就包括call,apply和bind方法。根据原型的规则，所有的函数都可以使用原型中属性和方法，所以，所有的函数并且只有函数可以使用call

深入理解事件循环机制面试题JavaScript是单线程同步任务和异步任务event loop（事件循环）宏任务和微任务检测练习面试题我们面试的时候，可能有的面试官问我们：“可以介绍一下JavaScript事件循环机制吗？”或者“对微任务和宏任务有了解吗？”再或者人家也懒得问我们，直接把下面这道面试题甩给我们，让我们写出它最后的执行结果；console.log('1')setTimeout(function callback(){ console.log('2')}, 1000)new P

js常见的面试题以及答案1.什么是函数柯里化？2.什么是Promise对象，有哪些用法？3.Promise 构造函数是同步执行还是异步执行，那么 then 方法呢？1.什么是函数柯里化？是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。把接受多个参数的函数转换成接受一个单一参数的函数// 普通函数var add = function(x, y) { return x + y;} add(3, 4)

一起探索原型链的奥秘吧！前言对象构造函数原型对象constructor_proto_（隐式原型）前言原型对象和原型链是Javascript中重要的知识点之一，也是面试官经常提及的问题，特别是刚接触Js的“新生代农民工”，一提到原型链，你的脑海里就出现下面这张图：原型链说难不太难，把上面的图看懂就行，说容易吧，还真不是那么好理解，那接下来我们就一起去认识认识它！对象构造函数原型对象constructorproto（隐式原型）............

一起开启深浅拷贝的探索之路吧！前言Js数据类型和存储栈(stack)和堆(heap)对象赋值和拷贝的区别手动实现深浅拷贝前言要想对深浅拷贝理解透彻，那我们还真不能开门见山，我们还得先了解一下门，再找到钥匙，把门打开后才会看到山，这样一来你也就完全理解了山存在的意义；因此我们要先了解一下中Js的数据类型以及存储方式，就会再认识到什么是栈(stack)和堆(heap)，接下来你还会意识到对象的赋值和拷贝的区别，然后会继续探索对深浅拷贝的理解，最后我们还要能手动实现对象的深浅拷贝；那接下来我们也会围绕以上

数组最常见的方法操作方法增删改查排序方法转换方法迭代方法js中数组的方法不管是写原生还是用框架，我们都会经常运用到，以及也有一些面试官会问到甚至让我们手写一个数组的排序函数；所以我就通过查找一些好的文章做了一篇对数组方法的归纳包括：数组的基本操作方法、排序方法、转换方法以及es6中的迭代方法；操作方法数组的一些操作方法，也无非就是增、删、改、查：增push()push()方法接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度，对原数组有影响；let people = []; //

1.准备好要转化的图片可以看到左侧图片是一个jpg格式的，接下来我们就要把它转化成svg;2.打开SVG在线编辑器，把图片导入我们可以打开SVG在线编辑器，把图片再百年机器中打开根据我们需要的大小进行设置，如下图：3.设置图片和背景图大小等选项选中图片后，右侧对应的是修改图片的一些选项，包括图片透明度，大小，和旋转角度等设置不选中图片，右侧对应的是背景图的设置选项，包括高宽大小和颜色；3.保存图片图片和背景图设置完成后保存图片保存成功后，图片就成为了SVG格式的啦！最后就可

必收藏的JS技巧1.数组1.1数组去重1.2数组交集1.3数组并集1.4数组差集1.5数组排序1.6数组最大值1.6数组求和1.7数组是否包含值1.8数组转对象2.字符串截取2.1截取前n位字符2.2截掉前5位字符2.3截取后5位字符2.4截掉后5位字符2.5截取从第6位到第9位的字符串2.6将字符串abcde 替换成ABCDE2.7从开始截取到指定字符 (该字符出现的第一次)1.数组1.1数组去重普通数组Array.from(new Set([1, 2, 3, 3, 4, 4])) //[1

今天我们就接着来聊聊微任务的另外一个应用 Promise，DOM/BOM API 中新加入的 API 大多数都是建立在 Promise 上的，而且新的前端框架也使用了大量的 Promise。可以这么说，Promise 已经成为现代前端的“水”和“电”，很是关键，所以深入学习 Promise 势在必行。我们一般都是先从问题切入，那么 Promise 到底解决了什么问题呢？在正式开始介绍之前，我想有必要明确下，Promise 解决的是异步编码风格的问题，而不是一些其他的问题，所以接下来我们聊的话题都是围绕编码

微任务可以在实时性和效率之间做一个有效的权衡。从目前的情况来看，微任务已经被广泛地应用，基于微任务的技术有 MutationObserver、Promise 以及以 Promise 为基础开发出来的很多其他的技术。所以微任务的重要性也与日俱增，了解其底层的工作原理对于你读懂别人的代码，以及写出更高效、更具现代的代码有着决定性的作用。有微任务，也就有宏任务，那这二者到底有什么区别？它们又是如何相互取长补短的？宏任务前面我们已经介绍过了，页面中的大部分任务都是在主线程上执行的，这些任务包括了：渲染

每个渲染进程都有一个主线程，并且主线程非常繁忙，既要处理 DOM，又要计算样式，还要处理布局，同时还需要处理 JavaScript 任务以及各种输入事件。要让这么多不同类型的任务在主线程中有条不紊地执行，这就需要一个系统来统筹调度这些任务，这个统筹调度系统就是我们今天要讲的消息队列和事件循环系统。为了能让你更加深刻地理解事件循环机制，我们就从最简单的场景来分析，然后带你一步步了解浏览器页面主线程是如何运作的。需要说明的是，文章中的代码我会采用 C++ 来示范。如果你不熟悉 C++，也没有关系，这里并没有

this的详解1.JavaScript 中的 this 是什么2.全局执行上下文中的 this3.函数执行上下文中的 this3.1 通过函数的 call 方法设置3.2 通过对象调用方法设置3.3 通过构造函数中设置4.this 的设计缺陷以及应对方案4.1 嵌套函数中的 this 不会从外层函数中继承4.2 普通函数中的 this 默认指向全局对象 window5.总结我们讲了词法作用域、作用域链以及闭包，并在最后思考题中留了下面这样一段代码：var bar = { myName:"time

作用域链和闭包作用域链词法作用域块级作用域中的变量查找闭包闭包是怎么回收的总结理解作用域链是理解闭包的基础，而闭包在 JavaScript 中几乎无处不在，同时作用域和作用域链还是所有编程语言的基础。所以，如果你想学透一门语言，作用域和作用域链一定是绕不开的。那今天我们就来聊聊什么是作用域链，并通过作用域链再来讲讲什么是闭包。首先我们来看下面这段代码：function bar() { console.log(myName)}function foo() { var myName

块级作用域作用域（scope）变量提升所带来的问题变量容易在不被察觉的情况下被覆盖掉本应销毁的变量没有被销毁ES6 是如何解决变量提升带来的缺陷JavaScript 是如何支持块级作用域的作用域（scope）为什么 JavaScript 中会存在变量提升这个特性，而其他语言似乎都没有这个特性呢？要讲清楚这个问题，我们就得先从作用域讲起。作用域是指在程序中定义变量的区域，该位置决定了变量的生命周期。通俗地理解，作用域就是变量与函数的可访问范围，即作用域控制着变量和函数的可见性和生命周期。在 ES6 之

为什么JavaScript代码会出现栈溢出？什么是函数调用什么是栈什么是 JavaScript 的调用栈在开发中，如何利用好调用栈如何利用浏览器查看调用栈的信息栈溢出（Stack Overflow）总结JavaScript 引擎先会对其进行编译，并创建执行上下文。但是并没有明确说明到底什么样的代码才算符合规范。那么接下来我们就来明确下，哪些情况下代码才算是“一段”代码，才会在执行之前就进行编译并创建执行上下文。一般说来，有这么三种情况：当 JavaScript 执行全局代码的时候，会编译全局代码并创

变量提升变量提升（Hoisting）JavaScript 代码的执行流程1. 编译阶段2. 执行阶段代码中出现相同的变量或者函数怎么办？总结咱们先看段代码，你觉得下面这段代码输出的结果是什么？showName()console.log(myname)var myname = '极客时间'function showName() { console.log('函数showName被执行');}使用过 JavaScript 开发的程序员应该都知道，JavaScript 是按顺序执行的。若按

正则表达式一.限定符二."或"运算符三.字符类四.元字符五.贪婪与懒惰匹配六.常用的正则表达式大全一.限定符1.?:它前面的字符需要出现0次或1次例如：used?可以匹配到use和used2.*:它会匹配0个或多个字符例如：ab*c可以匹配到ac,abc,abbbbbbc3.+:它会匹配一次及以上的字符例如：ab+c可以匹配abc,abbbc,而不会匹配ac4.{}:可以限定匹配的数量例如：ab{6}c,则匹配到abbbbbbc,而要限定b的数量在2到6之间，则是ab{2,6

数据类型和强制转换六种数据类型强制类型转换转换为String方式一：toString()方式二：String()转换为Nuber方式一：Number()方式二：parseInt() / parseFloat()转换为Boolean方式一：Boolean()隐式类型转换转换为String转换为Nuber转换为Boolean六种数据类型String 字符串Number 数值Boolean 布尔值Null 空值Undefined 未定义Object 对象String 、Number、 Bool