- 博客(66)
- 收藏
- 关注
原创 一文彻底搞懂执行上下文、VO、AO、Scope、[[scope]]、作用域链、闭包
另外小弟还在处于长期入门的萌新状态,若有写的不对的地方,还请大佬们在评论区批评指正!即ActivationObject活跃对象,定义在函数执行上下文(,只要搞懂了这些,作用域、作用域链、作用域链查询这些概念就是小case。文字介绍比较晦涩,所以不多bb,写代码就完事了,先来看。若为全局函数,那么保存的是当前全局执行上下文的。不多BB,继续coding,这次串联上前面介绍的。)中(准确来说,在函数开始执行时才创建),存储。JS引擎在执行一段代码前,会先创建对应的。定义在执行上下文中,就是所谓的。.......
2022-07-16 02:01:18 792
原创 1.各种数据结构简介与实现
本篇文章旨在实现各种数据结构,(或者说基本不介绍),要看具体详情可以参考《在 JavaScript 中学习数据结构与算法》这篇博客栈(Stack):后进先出2.队列队列(Queue):先进先出2.1 优先队列优先队列是队列的变种,由项的的值决定其在队列中的优先级2.2 循环队列循环队列是队列的另一个变种,可以实现队列索引循环3.链表链表(LinkedList):每个元素都有一个保存下一个元素的指针,第一个元素为,如下图所示:3.1 双向链表指定最后一个元素为,4.集合集合(s
2022-07-08 15:14:06 567
原创 3.渲染进程里的多个线程
一个Tab页里的所有执行任务都是在进行的,其中包括:页面渲染、JS执行、事件循环、异步Http请求等。请牢记,下面来看看主要包含的线程GUI即Graphical User Interface,图形用户界面。该线程是由驱动的,主要任务如下:注意:,JS引擎线程执行时,GUI渲染线程会被挂起,GUI更新会被推入到队列中立即执行顾名思义,就是由JS引擎驱动,执行JS代码的线程,主要任务如下:注意:JS是单线程的,且与GUI渲染线程互斥,意味着当JS执行过长,可能会造成页面渲染不连贯,会造成堵塞归属于浏览器而非JS
2022-07-03 15:41:21 922
原创 感性和理性,个人的看法
可以感性,但请不要沦为完全感性的奴隶,因为那样会逐渐弱化思考的能力。人云亦云,对一件事别人说什么就什么,大V说一定都是对的,把大把精力耗费在关心明星八卦破事,试问和你有什么联系吗?整天花大把时间浏览各种重复无意义的短视频中,试问对你有什么帮助吗?做人不要太感性,要保持清醒一些。现在的互联网正在潜意识的放大人的感性一面,只是我们深陷其中已久不察觉罢了,因为这个过程并不明显,往往是裹着一层糖衣,人会在其中慢慢的安乐死。更多的是,贩卖焦虑、贩卖谬论、贩卖毒鸡汤、贩卖矛盾、贩卖仇恨,其实理性看待,绝大部分的
2022-07-02 22:31:00 181
原创 2.浏览器渲染原理
构成的主要组件有:用户界面、浏览器引擎、、网络、UI后端、JS解释器、数据存储主要将请求到的文件内容渲染成为页面,不同浏览器渲染引擎不同:Firefox:Safari:(开源)Chrome:(WebKit的一个分支)IE:Trident另外,渲染引擎是的,html、css解析、js脚本执行、重排重绘都在这一个线程中逐个执行这里主要介绍,下面这个渲染流程图建议牢牢记好,全文将会围绕这个展开:HTML解析器将html文件解析成,CSS解析器将css文件解析成将DOM Tree和Style Rules进行(连
2022-07-02 21:26:51 727
原创 1.浏览器架构
四者关系如下:即,图像处理器CPU、GPU 都属于计算机硬件提供供操作系统调度,操作系统又提供供应用程序操作应用程序(program)由多个构成,单个进程又由多个构成,如下图所示:同个进程里的线程共享内存空间,可以彼此通信,而同个程序里的进程内存地址相互隔离,需要通过进行通信进程间彼此相互隔离,工作是独立的,一个进程GG了也不会影响其他进程浏览器按多个进程分成多个模块,各个模块相互独立,且有着单一职责,又相互联系,浏览器各个模块如下:在Chrome浏览器里点击左上角的⇒ ⇒ ,可以看到浏览器里运
2022-07-01 14:43:47 610
原创 11.新增class
1.1 class特性本质上是一个默认严格模式不存在提升行为属性是class关键字后面的类名内部表示Generator函数在类中的方法都会定义在上面类的this默认指向类实例,但是单独抽离出来会出现错误改进2.Class静态方法在一个方法前加上关键字时,会定义方法在类上而非原型上,称为,即在static静态方法中,,同时静态方法名可以与非静态方法名重名可以通过关键字访问父类,以访问到父类中的静态方法3.Class实例、原型、静态属性方法定义不多bb了,直接上代码4.静
2022-06-30 14:33:33 611
原创 10.Async异步函数
asnyc函数实际上是+的语法糖上述代码修改成async函数2.基本用法async函数返回一个对象,可以使用then方法进行回调。当函数执行遇到await就会先返回,等异步操作完成后,在接着执行函数体后面的语句3.async声明方式4.async本质上是Promiseasync函数结束return的参数会封装成为一个,状态为,因为同理,throw抛出错误会返回一个,状态为返回的Promise对象,必须等到await命令后面的Promise对象执行完,才会发生状态改变,意味着必须等到
2022-06-30 11:30:01 937
原创 9.新增类型Map
结构类似对象即的集合,但是键不光可以是String型,还可以是其他类型。对于Object结构来说是,对于Map结构来说是,且与Set一直键名具有new的同时,添加键值对,实际上,每个定义了,且每个项都是的数据结构都可以作为Map构造函数的参数当键是object类型时要注意指针问题,这是一个大坑遍历操作............
2022-06-30 10:40:34 265
原创 8.新增类型Set
是一种数据结构,类似于数组,但是项(对于对象来说是喔~)都是的,可用于,属性: 返回Set实例的项数示例如下:遍历操作示例如下Set函数可以接收一个数组或者具有接口的其他数据结构作为参数,用来初始化,放进set结构里数组去重和字符串去重遍历操作由于Set结构键名和键值是同一个值(这样能实现值的唯一性,我菜的),故keys和values方法行为一致Set结构默认遍历器生成函数就是它的方法,即:......
2022-06-30 10:06:59 246
原创 7.新增类型Symbol
是ES6新增的数据类型,由Symbol函数生成,表示的值,属于,通常用于定义属性名,以保证不与其他属性名产生冲突创建Symbol时,传入的参数会成为它的属性2.Symbol属性读写Symbol类型作为属性读写需要使用形如的方式访问时不能通过点运算符通过Symbol类型可以定义一组常量,以保证唯一性3.Symbol属性遍历Symbol属性只能通过方法遍历,不能被、、、、遍历读取另外,可以返回包含和的数组利用symbol属性名不能被常规方法遍历到的这一特性,可以将定义私有的属性5.Sym
2022-06-30 00:04:06 261
原创 6.Object扩展
ES6允许在括号里直接写入变量和函数,作为对象的属性和方法(说白了就是同名简写)简写应用场景2. super 关键字super指向当前对象的原型,相当于注意:需要babel转译,浏览器目前还识别不出super关键字,且只能用在对象方法中喔,对象属性中使用会报错!4.assign用于对象合并,将源对象的所有可枚举属性复制到目标对象5.keys返回由可枚举组成的数组6.values、entries、fromEntries下面是汇总:用法:......
2022-06-29 20:51:24 104
原创 5.Array扩展
这里只介绍常用到的ES6数组扩展运算操作符可以将数组解绑操作符的其他应用①克隆数组②合并数组③同解耦结合④字符串转数组2.Array.from()用于将伪数组转换为真数组,所谓伪数组满足两个基本条件:将伪数组转化为真数组示例如下:只要是部署了接口的数据结构,Array.from都能将其转为数组,如字符串、Set结构对象满足伪数组条件,也可以通过Array.from转为数组Array.from还可以传入回调函数作为第二个参数,会对每个项进行map遍历操作,示例如下:3.Array.of
2022-06-29 20:19:00 128
原创 4.Function扩展
函数定义时,可以指定默认参数,在未传入参数或参数为时,会使用默认的参数但是要小心,参数变量是默认声明的,不能用let或const再次声明,因为其中调用时会发生,即惰性求值指定了默认值后,函数的属性会失真,因为length属性含义为函数预期传入的参数个数2.rest参数rest参数形式为,会将获取函数的多余参数并将其放进数组中3.name属性函数的name属性返回该函数的函数名☆4.箭头函数4.1 箭头函数特征箭头函数是ES6对函数进行的最大扩展若直接返回一个对象有必要时需要加个
2022-06-29 14:49:48 207
原创 3.String扩展
ES6对String类型作了一些扩展,本文主要介绍最重要的两个ES6引入了模板字符串,可以在里面插入数据,从而避免了字符串的繁杂操作。没有模板字符串之前,一些功能写起来很机车:现在引入模板字符串,明显舒适多了~在模板中也可以调用函数也可以这样花式调用2.扩展方法ES6对String的原型上进行了方法扩展,以下是常用的:......
2022-06-29 10:54:45 104
原创 2.解构赋值
从数组和对象中提取值,对变量进行赋值,称为1.2 花里胡哨解构(看看就行)1.3 解构允许默认值,若位置无值(),默认值会替代2. Object解构2.1 属性解构2.2 方法解构2.3 变量可以与要解构的属性不同名其实之前的例子里的变量要与解构的属性同名是因为也就是说,对象的解构赋值的内部机制,是。真正被赋值的是后者,而非前者2.4 花里胡哨解构(看看就行)对象的解构赋值可以取到继承的属性2.5 解构默认值3.String的解构 (看看就行)解构赋值的规则是,只要
2022-06-29 00:54:24 222
原创 1.let和const关键字
不多bb,直接上代码:for循环很适合使用let分析:1.2 let不存在变量提升1.3 let声明的变量会存在暂时性死区let声明的变量会绑定当前的作用域,不再受外部的影响,且在当前区域锁死let声明之前的变量访问当然,也有隐形的死区1.4 let不允许重复声明不多bb,直接上代码:2. constconst与let类似,只不过更加严格:在本质上,const保证的是,但是改变指针所指的对象的属性是可以的喔~如果要定义一个"常量对象",那么要使用,效果相当于将对象的每个属性cons
2022-06-29 00:45:38 130
原创 因果思维的转变
我认为用问题与方案来映射因与果之间的关系是一种积极的思维模式因与果会产生什么呢?“因为我菜,所以我自卑”这明显是一种比较消极的态度“因为我菜,所以我要学”这是一种稍微好的态度但是总有一种“被迫”执行的成分在其中而问题与方案呢?“我的问题是我比较菜,方案是我要采取学习来解决这个问题”这就是非常积极的态度,因为它产生的只有一种,那便是主动去解决问题,而非“被迫”亦或者是采取消极的态度,自卑逃避......
2022-06-28 22:52:03 127
原创 async实现
参考一:async函数参考二:await语法参考三:7张图,20分钟就能搞定的async/await原理async函数本质是Promise函数的一个语法糖,作用是,底层实现用函数对promise进行一层封装基于generator模拟过程进行async实现.........
2022-06-28 16:07:08 262
原创 Iterator和Generator
参考一:迭代器与生成器参考二:Iterator 和 for…of 循环(阮一峰ES6)Iterator即迭代器,它定义了对象的遍历机制iterator有一个方法,在遍历时会调用,这会返回一个结果:,value为本轮遍历拿到的值,done为标志是否遍历结束,从而控制遍历操作如何定义一个对象的迭代器也很简单,为其定义迭代器方法从中返回一个迭代器对象即可,因为每次遍历开始前都会先通过这个方法获取Iterator之后才开始迭代不多bb,来看代码:定义了Iterator后便可以通过来进行遍历,其遍历过程抽象化
2022-06-26 16:28:21 279
原创 为什么写博客
有人说写博客的都是菜鸡,真正的大佬都在忙着学习新技术,忙着搞开发,而且过目不忘,所见即所得,哪会有精力搞着这些花样啊,233333… 我竟无法反驳…但是我不甘心,我就想狡辩一番,写博客虽然花费很多精力,而且也没多少人会看你的博客,但是吧,它还是有一些好处的你花了很多时间写博客,作总结,其实会加深你的理解,看懂了是一回事,能将其清晰地表达输出又是一回事,当你能清晰的表达了出来才说明了你真正的懂了当你写博客的时候,有些知识点阐述地不够清晰,会鞭策你去翻阅其他大佬写的东西,看看他们是怎么理解的,然后你会从中又
2022-06-26 01:32:01 270 2
原创 JS内存管理与垃圾回收机制
参考一:深入理解Chrome V8垃圾回收机制参考二:内存管理参考三:「硬核JS」你真的了解垃圾回收机制吗1.内存生命周期 => => 在JS语言中,内存分配是由JS引擎自动完成的,释放内存也是如此,由JS引擎根据垃圾回收机制进行回收,开发者能参与的是内存读写这一环节2.两种内存存储类型:内存是的,其值存储在空间中:内存是的,其值存储在空间中,指向堆空间中的对象的存储在栈空间中不多bb,来看代码:垃圾回收机制1.核心原理定期找出不再用到的内存,然后释放,至于如何实现有不同的策略,常见的有和1.
2022-06-25 15:54:14 1131
原创 柯里化函数
参考一:柯里化柯里化是一种转换,将 转换为可以被以 或 的形式进行调用。JavaScript 实现通常都保持该函数可以被正常调用,并且如果参数数量不足,则返回偏函数
2022-06-23 15:56:05 145
原创 节流与防抖
参考一:函数防抖与节流参考二:浅谈js防抖与节流防抖(debounce):在第一次触发事件时,不立即执行函数,而是给出一个。若在延迟时间内,不再触发事件那么执行函数;若在延迟时间内再次触发事件,那么以最后一次触发的时机重新计算延迟时间再执行函数。其实从名字也可以看出来,这个技术的出现就是解决用户的情况(#…#)实现如下:wait!!! 这里防抖虽然是防抖了,但是给用户的感觉是有500ms的延迟,所以我想做个优化,让它第一次就开始执行了,且上次执行完毕后又可以立即执行,即用户手抖开始前立刻执行函数,用户手
2022-06-23 11:00:06 258
原创 事件循环机制
参考一:并发模型与事件循环参考二:这一次,彻底弄懂JS执行机制js是单线程的,但是执行时会分为和任务在任务入执行栈时,会将异步任务推入,同步任务放入主线程中执行,待主线程空了之后再回头去按顺序执行任务队列里的异步任务,如此循环除了同步和异步任务,还可以更精细化可分为和,常见的宏任务和微任务如下:队列里面有宏任务和微任务,浏览器每次事件循环都会执行一个宏任务,和该宏任务下的所有微任务。遇到定时器等异步会放到异步队列执行,然后再将结果放到任务队列。这样一直运行,只到执行栈为空和队列为空........
2022-06-22 14:25:07 150
原创 Promise实现
参考一:从一道让我失眠的 Promise 面试题开始,深入分析 Promise 实现细节参考二:Promises/A+规范(中文翻译)不多bb直接上代码
2022-06-21 14:57:36 126
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人