m0_71485750的博客

早期的网页都是通过后端渲染来完成的：服务器端渲染（SSR，server side render）：服务器端渲染的缺点：有没有办法在页面数据变动时，只向服务器请求新的数据，并且在阻止页面刷新的情况下，动态的替换页面中展示的数据呢？AJAX是“Asynchronous JavaScript And XML”的缩写(异步的JavaScript和XML)，是一种实现无页面刷新获取服务器数据的技术。你可以使用AJAX最主要的两个特性做下列事 :这里有两幅图给大家理解一下:什么是HTTP呢？我们来看一下维基百科的解释：

AJAX 是异步的 JavaScript 和 XML（Asynchronous JavaScript And XML）如何来完成AJAX请求呢？第一步：创建网络请求的AJAX对象（使用XMLHttpRequest）第二步：监听XMLHttpRequest对象状态的变化，或者监听onload事件（请求完成时触发）；第三步：配置网络请求（通过open方法）, open方法可以传入两个参数；参数一: method(请求的方式: get, post …)参数二: url(请求的地址)第四步：发送send网络请求；【

早期的网页都是通过后端渲染来完成的：服务器端渲染（SSR，server side render）：服务器端渲染的缺点：有没有办法在页面数据变动时，只向服务器请求新的数据，并且在阻止页面刷新的情况下，动态的替换页面中展示的数据呢？AJAX是“Asynchronous JavaScript And XML”的缩写(异步的JavaScript和XML)，是一种实现无页面刷新获取服务器数据的技术。你可以使用AJAX最主要的两个特性做下列事 :这里有两幅图给大家理解一下:什么是HTTP呢？我们来看一下维基百科的解释：

JavaScript并没有给我们提供深拷贝的方法, 因为深拷贝是非常消耗内存的前面我们已经可以通过JSON的方法来实现深拷贝了：JSON.parse那么, 如果实际开发中真的需要深拷贝, 当然这种情况是非常少的, 但是如果真的需要, 我们就需要自定义深拷贝函数了手写深拷贝我们按照以下步骤:1.需要接收的参数接收一个对象作为参数, 对这个传入的对象进行深拷贝2.返回值是什么返回一个已经完成深拷贝的新对象3.内部实现我们思考一下, 如何判断是否是一个对象呢, 大家应该都想到了typeof, 但是我们

我们按照如下思路来实现：1.需要接收什么参数:参数一: 回调的函数参数二: 延迟时间2.返回值是什么最终我们返回结果是要绑定对应的监听事件的, 所以返回值一定是一个新的函数3.内部实现我们可以在_debounce函数中开启个定时器, 定时器的延迟时间就使用delay并且每开启一个定时器, 我们都需要将上一次的定时器取消掉这样防抖的基本实现就已经实现完成, 已经可以实现防抖的效果, 我们可使用上一篇的输入框案例测试一下测试代码帮大家拿过来完成以上代码, 我们已经实现了防抖函数最核心的一

什么是防抖节流函数, 我先举个例子给大家防抖的例子:比如你给一个女生发消息, 当五分钟内她没有回复, 你就会把她好友删除如果5分钟内她有回复你, 你回给她回一个消息并且又开始5分钟的等待如果有等待超过5分钟, 她还没有恢复你消息, 你就会把这个女生的好友删除节流的例子:比如有一个男生, 他给女孩子发消息, 在五分钟内不管男生发了多少消息, 女生只会回复一条回复完之后, 男生在下一个5分钟又发了很多很多消息, 女生还是只回复一条, 每一个五分钟都如此, 女生只回复一条消息直到有一天男孩死

我们模拟从服务器拿到歌词, 要求根据歌曲播放的时间展示对应的歌词我们从服务器获取过来的歌词一般都是两部分: 时间节点和歌词(如下)一般开发中, 我们都需要将服务器给的数据装换成如下一个个对象, 再存放在一个数组中明确了大致做法, 我们来写代码试试吧, 这里把源代码给大家实际开发中我们会对很多歌曲的歌词进行解析, 所以一般会封装成一个独立函数(如下)案例二: 时间格式化时间格式化：从服务器拿到时间戳，转成想要的时间格式由于这个时间格式化会在多处应用, 我们也会封装一个工具函数, 实现思路如下:源代

我们先来看一下维基百科对正则表达式的解释：简单概况：正则表达式是一种字符串匹配利器，可以帮助我们搜索、获取、替代字符串；在JavaScript中，正则表达式使用RegExp类来创建，也有对应的字面量的方式：2. 正则表达式的使用方法有了正则表达式我们要如何使用它呢？或者说我们在什么地方可以使用正则表达式**方法演示代码: **1. exec方法2. test方法也可以被用于字符串方法 : match、matchAll、replace、search 和 split 方法；方法演示代码:1.

async关键字用于声明一个异步函数：async异步函数和普通函数一样可以有很多中写法：1.2 异步函数返回值异步函数的内部代码执行过程和普通的函数是一致的，默认情况下也是会被同步执行。异步函数有返回值时，和普通函数会有区别(异步函数返回的是一个Promise)：情况一：异步函数有普通的返回值时，异步函数的返回值相当于被包裹到Promise.resolve中；情况二：如果我们的异步函数的返回值是Promise，状态由会由Promise决定；情况三：如果我们的异步函数的返回值是一个对象并且实现

WebStorage主要提供了一种机制，可以让浏览器提供一种比cookie更直观的key、value存储方式 :localStorage：本地存储，提供的是一种永久性的存储方法，在关闭掉网页重新打开时，存储的内容依然保留；sessionStorage：会话存储，提供的是本次会话的存储，在关闭掉会话时，存储的内容会被清除；我们会发现localStorage和sessionStorage看起来非常的相似。那么它们有什么区别呢？Storage(包含localStorage和sessionStorage

开发中我们会封装一些工具函数，封装之后给别人使用：很多时候我们可能验证到不是希望得到的参数时，就会直接return :如何可以让一个函数告知外界自己内部出现了错误呢？throw语句：如果我们执行代码，就会报错，拿到错误信息的时候我们可以及时的去修正代码。throw表达式就是在throw后面可以跟上一个表达式来表示具体的异常信息 ：throw关键字可以跟上哪些类型呢？基本数据类型：比如number、string、Boolean对象类型：对象类型可以包含更多的信息但是每次写这么长的对象又有点

Promise、事件循环试题一**写出下面代码的执行顺序: **分析:并将对应的异步放入对应的宏任务队列和微任务队列全局代码执行完后, 会按照顺序执行微任务队列当微任务队列中全部执行完成时, 就会按照顺序执行宏任务队列当执行到宏任务队列的第一个函数, 发现有Promise的then方法, 又会将then方法的回调放入, 此时宏任务和微任务中函数分别如下当执行完宏任务队列中第一个函数, 会发现微队列中又添加了新的成员, 便会暂停执行宏任务队列, 继续执行微任务队列

线程和进程是操作系统中的两个概念：听起来很抽象，这里还是给出我的解释：再用一个形象的例子解释：这里有一幅图, 可以看一下帮助大家理解:操作系统是如何做到同时让多个进程（边听歌、边写代码、边查阅资料）同时工作呢？你可以在Mac的活动监视器或者Windows的资源管理器中查看到很多进程：我们经常会说JavaScript是单线被程（可以开启workers**）的，但是JavaScript的线程应该有自己的容器进程**：浏览器或者Node。浏览器是一个进程吗，它里面只有一个线程吗？JavaScript的代码执行是

async关键字用于声明一个异步函数：async异步函数和普通函数一样可以有很多中写法：异步函数返回值异步函数的内部代码执行过程和普通的函数是一致的，默认情况下也是会被同步执行。异步函数有返回值时，和普通函数会有区别(异步函数返回的是一个Promise)：情况一：异步函数有普通的返回值时，异步函数的返回值相当于被包裹到Promise.resolve中；情况二：如果我们的异步函数的返回值是Promise，状态由会由Promise决定；情况三：如果我们的异步函数的返回值是一个对象并且实现了the

迭代器（iterator），是使用户在容器对象（container，例如链表或数组）上可以遍历访问的对象，使用该接口无需关心容器对象的内部实现细节。从迭代器的定义我们可以看出来，迭代器是帮助我们对某个数据结构进行遍历的对象。在JavaScript中，迭代器也是一个具体的对象，这个对象需要符合迭代器协议（iterator protocol）:next方法要求：next方法是一个无参数或者有一个参数的函数，返回结果应当拥有以下两个属性的对象：1.done（boolean) : done返回一个布尔值: 可能是

学完了我们前面的Promise、生成器等，我们目前通过一个案例来看一下异步代码的处理方案。案例需求 :方式一 : 层层嵌套(回调地狱)方式二: 使用Promise进行优化, 解决回调地狱(链式编程)生成器方案上面的代码即使方式二使用Promise对代码进行了重构, 但是代码看起来也是阅读性依然比较差的，有没有办法可以继续来对上面的代码进行优化呢？目前我们的方案三写法有两个问题：所以，我们可以封装一个工具函数execGenerator自动执行生成器函数(了解)：......

生成器是ES6中新增的一种函数控制、使用的方案，它可以让我们更加灵活的控制函数什么时候继续执行、暂停执行等。生成器函数也是一个函数，但是和普通的函数有一些区别：生成器事实上是一种特殊的迭代器我们在代码中演示一下:生成器代码的执行可以被yield控制生成器函数默认在执行时, 返回的也是一个生成器对象, 我们发现上面代码中, 调用函数时函数内部的代码并没有执行如果想要执行函数内部的代码, 需要调用返回的生成器对象的next方法当函数内部代码, 遇到yield时会中断执行我们之前学习迭代器时，知

迭代器（iterator），是使用户在容器对象（container，例如链表或数组）上可以遍历访问的对象，使用该接口无需关心容器对象的内部实现细节。从迭代器的定义我们可以看出来，迭代器是帮助我们对某个数据结构进行遍历的对象。在JavaScript中，迭代器也是一个具体的对象，这个对象需要符合迭代器协议（iterator protocol）:next方法要求：next方法是一个无参数或者有一个参数的函数，返回结果应当拥有以下两个属性的对象：1.done（boolean) : done返回一个布尔值: 可能是

在ES6出来之后，有很多关于Promise的讲解、文章，也有很多经典的书籍讲解Promise那么这里我从一个实际的例子来作为切入点：我们调用一个函数，这个函数中发送网络请求（我们可以用定时器来模拟网络请求）；如果发送网络请求成功了，那么告知调用者发送成功，并且将相关数据返回过去；如果发送网络请求失败了，那么告知调用者发送失败，并且告知错误信息；在ES6之前, 封装网络请求都是类似于上面代码的封装但是我们发现有一个弊端, 在实际开发中设计网络请求函数的人和调用函数的人并不是同一个, 因此调用者必须小心翼

我们先来看一个需求：有一个对象，我们希望监听这个对象中的属性被设置或获取的过程下面这段代码就利用了前面讲过的 Object.defineProperty 的存储属性描述符来对属性的操作进行监听(这也是Vue2响应式原理最核心的一段代码)。但是这样做有什么缺点呢？所以我们要知道，存储数据描述符设计的初衷并不是为了去监听一个完整的对象。在ES6中，新增了一个Proxy类，这个类从名字就可以看出来，是用于帮助我们创建一个代理的：我们可以将上面的案例用Proxy来实现一次：首先，我们需要new Proxy对象，并

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。例如一个数组有很多层, 第一层数组中还有第二层, 第三层, …数组flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。注意一：flatMap是先进行map操作，再做flat的操作；注意二：flatMap中的flat相当于深度为1；1.2 Object fromEntries在前面，我们可以通过 Object.entries 将一个对象转换成 entrie

在ES7之前，如果我们想判断一个数组中是否包含某个元素，需要通过 indexOf 获取结果，并且判断是否为 -1。在ES7之后，我们可以通过includes来判断一个数组中是否包含一个指定的元素，根据情况，如果包含则返回 true，否则返回false1.2 指数运算符在ES7之前，计算数字的乘方需要通过 Math.pow 方法来完成。在ES7之后，增加了 ** 运算符，可以对数字来计算乘方。2.ES8新特性2.1 Object values之前我们可以通过 Object.keys 获取一个对象所有

在学习JavaScript代码执行过程中，我们学习了很多ECMA文档的术语：但是这些术语是ES5之前的术语, 在新的ECMA代码执行描述中(ES5以上），对于代码的执行流程描述改成了另外的一些词汇词法环境是一种规范类型，用于在词法嵌套结构中定义关联的变量、函数等标识符；一个词法环境是由环境记录（Environment Record）和一个外部词法环境（oute;r Lexical Environment）组成；一个词法环境经常用于关联一个函数声明、代码块语句、try-catch语句，当它们的代码被执行时，词

当我们创建一个函数, 这个函数就可以使用apply、call、bind方法我们知道foo的隐式原型是绑定在Function的显式原型上的显然apply、call、bind方法是来自Function的原型对象意味着, 在Function的原型对象上添加的属性或方法, 可以被所有的函数获取2.手写apply函数获取thisArg, 我们要确保是一个对象类型将this绑定到传入的参数thisArg上将剩余的其他参数传入thisArg3.手写call函数call函数与apply的实

ES6中对 对象字面量 进行了增强，称之为 Enhanced object literals（增强对象字面量）。字面量的增强主要包括下面几部分：属性的简写：Property Shorthand例如下面代码, 我们已经有两个变量, 想要将这两个变量定义到obj对象上属性的增强写法可以简化语法, 前提key和value的标识符一样的情况下可以使用, 如下代码方法的简写: MethodShorthand一般情况下, 我们定义对象的方法, 都是如下方式定义的属性的增强写法, 可以简化成如下代码

我们会发现，按照前面的构造函数形式创建类，不仅仅和编写普通的函数过于相似，而且代码并不容易理解。那么，如何使用class来定义一个类呢？可以使用两种方式来声明类：类声明和类表达式；注意: 类结构中定义多个内容, 不需要加逗号进行分隔如果我们希望在创建对象的时候给类传递一些参数，这个时候应该如何做呢？当我们通过new关键字操作类的时候，会调用这个constructor函数，并且执行如下操作：1.3 class类中实例方法在上面我们定义的属性都是直接放到了this上，也就意味着它是放到了创建出来的新

JavaScript当中每个对象都有一个特殊的内置属性 [[prototype]]，这个特殊的对象可以指向另外一个对象。那么这个对象有什么用呢？那么如果通过字面量直接创建一个对象，这个对象也会有这样的属性吗？如果有，应该如何获取这个属性呢？获取的方式有两种：方式一：通过对象的 _proto_ 属性可以获取到（但是这个是早期浏览器自己添加的, 是非标准的，存在一定的兼容性问题）；方式二：通过 Object.getPrototypeOf 方法可以获取到(标准的)；2.2 认识函数的原型那么我们知道

在前面我们的属性都是直接定义在对象内部，或者直接添加到对象内部的：如果我们想要对一个属性进行比较精准的操作控制，那么我们就可以使用属性描述符。Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。可接收三个参数：返回值：属性描述符的类型有两种：数据属性（Data Properties）描述符（Descriptor）；存取属性（Accessor访问器 Properties）描述符（Descriptor）；数据数据描述符有如下四个特性：

我们知道JavaScript中函数也是一个对象，那么对象中就可以有属性和方法。属性length：属性length用于返回函数参数的个数, 注意：rest参数(剩余参数)是不参与参数的个数的(先了解, 1.5中会详细讲到剩余参数);1.2 回顾argumentsarguments 是一个 对应于传递给函数的参数的类数组(array-like)对象。函数中的所有参数都会传入arguments中array-like意味着它不是一个数组类型，而是一个对象类型：1.3 arguments转Array

不管什么样的编程语言, 在代码的执行过程中都是需要给他分配内存的, 不同的是某些编程语言需要我们自己手动的管理内存, 某些编程语言会可以自动帮助我们管理内存:不管以什么样的方式管理内存, 内存管理都会有如下的生命周期:不同的编程语言对于第一步和第三步会有不同的实现:对于开发者来说, JavaScript的内存管理是自动的、无形的。JavaScript会在定义数据时为我们分配内存但是内存分配方式是一样的吗?因为内存的大小是有限的, 所以当内存不再需要的时候, 我们需要对其进行释放, 以腾出更多的内存空间在手动

JavaScript代码下载好之后，是如何一步步被执行的呢？我们知道，浏览器内核是由两部分组成的，以webkit为例：WebCore(渲染引擎)：负责HTML解析、布局、渲染等等相关的工作；JavaScriptCore(JS引擎)：解析、执行JavaScript代码；另外一个强大的JavaScript引擎就是V8引擎。我们来看一下官方对V8引擎的定义：接下来会对这幅图进行解析V8引擎本身的源码非常复杂，大概有超过100w行C++代码，通过了解它的架构，我们可以知道它是如何对JavaScript执行的：词法分

大家有没有深入思考过：一个网页URL从输入到浏览器中，到显示经历过怎么样的解析过程呢？要想深入理解下载的过程，我们还要先理解，一个index.html被下载下来后是如何被解析和显示在浏览器上的.浏览器最核心的就是浏览器内核常见的浏览器内核有Trident （ 三叉戟）：IE、360安全浏览器、搜狗高速浏览器、百度浏览器、UC浏览器；Gecko（ 壁虎） ：Mozilla Firefox；Presto（急板乐曲）-> Blink （眨眼）：OperaWebkit ：Safari、360极速浏览器、搜狗高速浏览

如果不清楚this绑定规则可以看上一篇有详细说明打印结果:解释:打印结果解释:person1.foo1(): 隐式绑定, this指向发起调用的对象person1person1.foo1.call(person2): 显示绑定, this指向person2person1.foo2(): foo2是一个箭头函数, 箭头函数中没有this, 会向上级作用域寻找, 上级作用域this指向windowperson1.foo2.call(person2): foo2是一个箭头函数, 对箭头函数绑定this是不生

我们先来看一个让人困惑的问题：定义一个函数，我们采用三种不同的方式对它进行调用，this它产生了三种不同的结果这个的案例可以给我们什么样的启示呢？那么this到底是怎么样的绑定规则呢？一起来学习一下吧什么情况下使用默认绑定呢？独立函数调用。我们通过几个案例来看一下，常见的默认绑定2.2 规则二: 隐式绑定隐式绑定比较常见的调用方式是通过某个对象进行调用的：我们通过几个案例来看一下，常见的隐式绑定2.3 规则三: 显式绑定2.3.1 显示绑定介绍隐式绑定有一个前提条件