独鹿DT
这个作者很懒,什么都没留下…
展开
-
JavaScript专题专栏目录
????JavaScript专题专栏目录????专题系列文章浏览器的工作原理和V8引擎JavaScript代码在浏览器内的执行过程从输入URL到浏览器显示页面的流程JavaScript内存管理、闭包和内存泄漏一文搞定JavaScript的this指向问题手写call、apply、bind函数和arguments&数组函数slice的实现函数式编程:纯函数&柯里化&组合函数⏳以前所写文章函数柯里化的解读防抖的详细解读节流的详细解读...原创 2021-09-16 09:56:30 · 309 阅读 · 0 评论 -
JavaScript异常处理
异常处理抛出错误捕获异常抛出错误通过throw关键字,抛出一个错误,让函数告知外界自己出现了错误。抛出的错误再函数的上没有被调用,会一层一层的向外边传,直到顶层JS代码还没对这个异常进行处理,那么就会报错。function foo1() { throw "error message";}function foo2() { foo1();}function foo3() { foo2();}// 直到foo3函数,都没有foo1内的异常进行处理,那么会报错foo3();原创 2021-11-06 09:42:14 · 660 阅读 · 1 评论 -
浏览器和Node的事件循环
事件循环事件循环解析浏览器内的事件循环面试题面试题一面试题二面试题三面试题3.1面试题3.2面试题3.3Node内的事件循环面试题面试题一事件循环解析进程:操作系统管理程序的一种方式。线程:操作系统能够进行调度的最小单位。JavaScript代码的执行是单线程执行的,但是为什么碰到异步函数却不会阻塞后续代码的继续执行呢?这就用到了事件循环。定义:事件循环是JavaScript代码和浏览器或者Node之间的桥梁。浏览器是多进程多线程的,在JavaScript代码执行时,知道在内存内维护着执行上原创 2021-11-05 19:50:38 · 430 阅读 · 0 评论 -
async和await
async和awaitasync的使用await的使用在async和await出来之前,异步回调的方法就有1、回调嵌套2、Promsie的链式回调3、Generator的复杂繁琐调用方式async/await采用同步的思维来解决异步问题的方式,使代码的可读性更强了。async的使用在函数的function关键字前加上 async,该函数就变成了 异步函数。该函数和普通函数的区别:异步函数的返回值是一个Promsie对象,相当于返回的值包裹在了Promise.resolve()内进行返原创 2021-11-05 19:49:06 · 333 阅读 · 0 评论 -
Interator和Generator
Iterator和GeneratorIterator认识迭代器迭代器代码认识可迭代对象可迭代对象代码内置可迭代对象可迭代对象的应用自定义类的可迭代Generator生成器的理解生成器函数的执行流程生成器的其他方法调用return方法throw方法Iterator认识迭代器迭代器:帮助遍历某个数据结构的对象。一个对象需要成为迭代器需要满足迭代器协议。迭代器协议定义了一个产生一系列对象的标准方式,在JS中 这个标准就是next方法。next方法是一个可以传入零个或者一个参数的函数,这个函数返回一个对原创 2021-10-26 19:20:00 · 259 阅读 · 0 评论 -
手写Promise
手写Promise手写Promise代码过程思考手写Promise代码const PROMISE_STATUS_FULFILLED = "PROMISE_STATUS_FULFILLED";const PROMISE_STATUS_PENDING = "PROMISE_STATUS_PENDING";const PROMISE_STATUS_REJECTED = "PROMISE_STATUS_REJECTED";function execFunctionThrowErr(exceFn, quer原创 2021-10-24 10:04:16 · 192 阅读 · 0 评论 -
你不知道的Promise细节
你不知道的Promise细节异步请求处理方案Promise的基本使用Promsie的三种状态Promise的resolve参数Promse的reject参数Promise对象方法then方法catch方法finally方法Promise类方法resolve方法reject方法all方法allSettled方法race方法any方法手写Promise异步请求处理方案在ES6之前,对于网络请求的结果是通过回调函数实现的。回调函数Promise重构Promise的基本使用// 创建一个Promis原创 2021-10-21 20:16:14 · 140 阅读 · 0 评论 -
Vue2和Vue3的响应式原理
Vue2和Vue3的响应式原理这个其实在Vue2&Vue3专栏的源码学习部分,已经实现过,但是当时还是对部分的数据结构存在不明确的部分,比如说Proxy类,Reflect对象,Set数据结构,就没有运用这部分知识点,用了也不明确。那么这篇文章,可以在之前实现得基础上做出优化,利用ES6的新知识点数据结构#mermaid-svg-CAYEnwhHK27u2wSW .label{font-family:'trebuchet ms', verdana, arial;font-family:var原创 2021-10-19 19:35:27 · 168 阅读 · 0 评论 -
ES6知识点:Proxy和Reflect详解
ES6知识点:Proxy和ReflectProxy的基本使用Proxy的十三种捕获器set和get捕获器has捕获器deleteProperty捕获器getPrototypeOf捕获器setPrototypeOf捕获器isExtensible捕获器preventExtensions捕获器getOwnPropertyDescriptor捕获器defineProperty捕获器apply捕获器construct捕获器ownKeys捕获器Reflect的基本使用Reflect和Proxy一起使用Reflect.r原创 2021-10-16 17:31:25 · 314 阅读 · 0 评论 -
ES12常用新语法
ES12常用新语法FinalizationRegistryWeakRef逻辑赋值运算符Numeric SeparatorString.replaceAllString.replaceAllFinalizationRegistry当一个对象没有被引用时,GC算法会对其进行回收,那么FinalizationRegistry可以知道该对象在何时被回收掉。let info = { name: "fzb", age: 21 };let friend = { name: "zkl", age: 21 };原创 2021-10-14 21:51:00 · 558 阅读 · 0 评论 -
ES11常用新语法
ES11常用新语法BigIntNullish Coalescing OperatorOptional ChainingGlobalThisfor...in标准化BigInt在JS中最大的安全整数位 Number.MAX_SAFE_INTEGER,也就是说超过这个数的整数是不安全的const maxNum = Number.MAX_SAFE_INTEGER;console.log(maxNum); // 9007199254740991console.log(maxNum + 1); // 9原创 2021-10-14 21:05:09 · 267 阅读 · 0 评论 -
ES10常用新语法
ES10常用新语法flatflatMapObject.fromEntriestrimStart trimEndSymbol descriptionOptional catch bindingflatflat()方法可以深度遍历一个数组,并返回新的数组// 数组内又存在数组,数组嵌套的情况const nums = [10, 22, [4, 6], 81, [[32, 45], []], 10];const newNums1 = nums.flat(1); // 默认就是1const newNum原创 2021-10-14 19:05:46 · 273 阅读 · 0 评论 -
ES9常用新语法
ES9常用新语法Async iteratorsObject spread operatorsPromise finallyAsync iterators后续迭代器单独讲解Object spread operatorsObject spread operators(对象展开运算)已经讲解过:ES6:对象增强写法&解构&let/constPromise finally后续讲Promise单独讲解...原创 2021-10-14 14:28:09 · 292 阅读 · 0 评论 -
ES8常用新语法
ES8常用语法Object valuesObject entriesString paddingTrailing CommasObject.getOwnPropertyDescriptorsasync和awaitObject values之前可以通过Object.keys获取对象的key值,在ES8中,可以通过Object.values获取对象的值const info = { name: "fzb", age: 21,};console.log(Object.keys(info)); //原创 2021-10-14 14:12:40 · 437 阅读 · 0 评论 -
ES7:Array Includes&指数运算符
ES7:Array Includes&指数运算符Array Includes指数运算符Array Includes数组增加了includes方法const nums = [22, 33, 44, 55, 66, NaN];console.log(nums.indexOf(33) !== -1); // trueconsole.log(nums.includes(33)); // true// indexOf和includes的区别在于对NaN的判断console.log(nums.原创 2021-10-12 19:20:19 · 153 阅读 · 0 评论 -
ES6:数据结构Set和Map&WeakSet和WeakMap
ES6:数据结构Set和Map&WeakSet和WeakMapSet基本使用常见方法WeakSetWeakSet的特点基本使用WeakMap的应用Map基本使用常见方法WeakMapWeakMap的特点强引用和弱引用在ES6以前存储数据的结构有两种:数组和对象。在ES6中新增两种数据结构:Set和Map。SetSet里边的数据是不会重复的基本使用add方法添加const set = new Set();set.add(1);set.add(2);set.add(3);set.a原创 2021-10-12 17:57:23 · 186 阅读 · 0 评论 -
ES6:模板字符串&函数&进制&Symbol数据结构
ES6:模板字符串&函数&进制&Symbol数据结构模板字符串基本使用标签模板字符串函数参数默认值函数的剩余参数箭头函数的补充展开语法ES6中的进制Symbol数据类型基本使用Symbol其他方法模板字符串基本使用在es6之前将变量和字符串拼接到一起代码的可读性时非常的差的在ES6中出现了模板字符串const name = "fzb";const age = 21;// es6之前写法const message1 = "我的名字是:" + name + ",年龄是:原创 2021-10-09 15:06:41 · 199 阅读 · 0 评论 -
ES6:对象增强写法&解构&let/const
对象增强写法&解构&let/const对象的增强写法解构数组解构对象解构let/constlet/const的基本使用及注意事项let/const与作用域提升let/const和全局对象window的关系块级作用域总结:let/const和var有何不同对象的增强写法在定义对象的属性和方法时,有了更方便的简便写法var name = "fzb";var age = 21;var address = "address";var info = { name: name, /原创 2021-10-01 20:23:51 · 447 阅读 · 2 评论 -
ES6:Class类的知识补充
Class类的知识补充扩展内置类JS中实现混入JS面向对象:多态扩展内置类扩展JS内置的类// 获取数组第一个位置的元素和最后一个元素// 但是js并没有直接操作的方法,可以这样:class MsiArray extends Array { getFirstItem() { return this[0]; } getLastItem() { return this[this.length - 1]; }}// 例子:const arr = new MsiArr原创 2021-10-01 20:22:21 · 116 阅读 · 0 评论 -
Class类的使用和背后实现的原理
ES6语法:Class类类的基本使用类的创建方法类的构造器创建类的实例定义类的方法实例方法访问器方法静态方法类的继承类的深度解析在ES6以前,类的声明都是用function构造函数实现的,自ES6开始,可以使用class关键字来创建对象,但是 class只是构造函数定义类的语法糖,内部本质还是构造函数,原型,原型链这一套东西。类的基本使用类的创建方法class关键字创建一个类,和定义function一样,存在声明式和表达式创建// 方式一:声明式创建class Person {}// 方原创 2021-09-28 21:53:14 · 193 阅读 · 0 评论 -
原型继承关系图详解
原型继承关系图详解代码+注释 解析/*** 一个例子说明原型继承的关系*/function Person(name, age, height) { this.name = name; this.age = age; this.height = height;}/*** 原型上挂载方法*/Person.prototype.say = function () { console.log(this.name + "在说话~");};/*** 创建实例*/cons原创 2021-09-25 20:27:50 · 256 阅读 · 0 评论 -
JavaScript面向对象(四)
JavaScript面向对象(四)原型赋值继承寄生组合式继承原型式继承寄生式继承寄生组合式继承的实现简便方法原型判断方法补充hasOwnPropertyin 操作符instanceofisPrototypeOf原型赋值继承在上篇文章中,借用构造函数方法实现继承还是存在弊端:父构造函数多次调用,而且在将父类实例传给子类原型对象时,里面的变量是会额外存在一份的。那么可以这样:function Person(name) { this.name = name;}Person.prototype.sl原创 2021-09-25 17:27:41 · 93 阅读 · 0 评论 -
JavaScript面向对象(三)
JavaScript面向对象(三)JavaScript原型链Object的原型顶层原型创建Object对象的内存图Object是所有类的父类原型链实现继承借用构造函数实现继承面向对象的三大特性:封装、继承、多态本文主要内容:利用JavaScript原型链实现继承。JavaScript原型链每一个对象都有原型,指向另一个对象,另一个对象也有自己的原型,就这样由原型的原型构成的链条就叫原型链。原型链的尽头如果一个原型链是,没用尽头的,那么在查找一原型链上不存在的属性时,就会一直查找下去,存在死原创 2021-09-24 11:15:59 · 430 阅读 · 1 评论 -
JavaScript的面向对象(二)
JavaScript的面向对象(二)创建多个对象的方案创建对象方案:工厂模式构造函数模式什么是构造函数构造函数创建对象的过程构造函数+原型 模式原型原型对象上的 constructor构造函数+原型实现上述例子内存图构造函数赋值新的原型对象创建多个对象的方案在上一篇文章JavaScript的面向对象(一),知道了创建对象的方式,那么可以参考一下,用来批量创建对象。如:创建学生1,学生2,学生3,具有学号,姓名,学习属性。这种方法是可以,但是存在大量的重复代码,存在一系列问题,要批量创建一些类相似的原创 2021-09-23 17:07:12 · 162 阅读 · 0 评论 -
JavaScript的面向对象(一)
JavaScript的面向对象(一)对象的创建方式对属性操作的控制属性描述符分类数据属性描述符存取属性描述符属性描述符补充其他方法补充同时配置多个属性描述符获取指定属性的属性描述符获取整个对象多有属性的属性描述符禁止对象继续添加属性将整个对象属性的配置成不可配置将整个对象属性的配置成不可修改对象的创建方式// 1、 对象字面量的创建方式const info1 = {};info1.name = "fzb";console.log(info1); // { name: 'fzb' }// 2、原创 2021-09-23 09:59:54 · 136 阅读 · 0 评论 -
JS额外知识补充:with语句&eval语句&严格模式
JavaScript额外知识补充:with语句、eval语句和严格模式with语句eval语句严格模式严格模式的限定严格模式下的this指向with语句with语句也有自己的作用域,当在传入的对象内没有找到变量时,再到上一层作用域内查找。const info = { message: "info",};const message = "window";const age = 21;with (info) { console.log(message); console.log(a原创 2021-09-16 20:05:10 · 142 阅读 · 0 评论 -
函数式编程:纯函数&柯里化&组合函数
函数式编程:纯函数&柯里化&组合函数纯函数函数的柯里化组合函数纯函数相同的输入值,产生相同的输出在函数的执行过程中,不能产生副作用。不能对传入的参数进行修改,不依赖上层作用域内的数据。函数的柯里化函数柯里化:详细函数柯里化介绍相较于链接文章内对柯里化函数的实现,感觉这个代码更容易理解一些。function currying(fn, ...args1) { function curried(...args2) { if (args2.length >= f原创 2021-09-14 17:19:47 · 129 阅读 · 0 评论 -
手写call、apply、bind函数和arguments&数组函数slice的实现
手写call、apply、bind函数和arguments&数组函数slice的实现手写call、apply、bind函数手写call函数手写apply函数手写bind函数函数的arguments介绍arguments转array知识补充:Array内slice方法的实现手写call、apply、bind函数手写call函数Function.prototype.msicall = function (thisArg, ...args) { //因为调用此方法是通过,函数对象调用的,那么这个原创 2021-09-11 13:02:27 · 127 阅读 · 0 评论 -
一文搞定JavaScript的this指向问题
一文搞定JavaScript的this指向问题代码执行时this在内存中的位置this绑定规则规则一:默认绑定(独立函数调用)规则二:隐式绑定规则三:显示绑定规则四:new 绑定系统API中的this指向多个绑定优先级的比较特殊绑定忽略显示绑定间接函数引用this规则之外-箭头函数面试题练习代码执行时this在内存中的位置注意:this的绑定是在代码执行时动态绑定上去的,与函数定义的位置是无关的,而与函数调用的方式和调用的位置有关。this绑定规则规则一:默认绑定(独立函数调用)一个函数经过.原创 2021-09-09 14:47:29 · 248 阅读 · 0 评论 -
JavaScript内存管理、闭包和内存泄漏
JavaScript 内存管理和闭包JavaScript 的内存管理JavaScript 闭包和内存泄漏从代码执行的角度给闭包下定义闭包的内存泄漏JavaScript 的内存管理JavaScript 会在定义变量时为变量分配内存JS 对于基本数据类型(boolean、string、number、null、undefined)直接在栈空间进行分配;JS 对于复杂数据类型(object)内存分配会在堆空间开辟一块空间,并将这块空间的地址返回给变量引用。JavaScript 的垃圾回收(GC)机制.原创 2021-09-07 08:58:57 · 397 阅读 · 0 评论 -
从输入URL到浏览器显示页面的流程
从输入URL到浏览器显示页面的流程一、URL解析1、地址解析:浏览器会判断输入的URL是否合法,输入的是URL地址还是关键字,并且根据输入的内容进行字符串编码。2、其他操作:大部分浏览器会对强制使用HTTPS协议,保证传输的安全性。3、缓存查询二、DNS解析DNS解析:根据域名查找到对应服务器的IP地址1、查询缓存:浏览器、操作系统、路由器都具有缓存,统称为 DNS高速缓存。若缓存中有记录,则不需再到根域名服务器上去查找。2、递归解析:在地址栏输入cms.coderbin.link,若原创 2021-09-02 22:06:36 · 292 阅读 · 0 评论 -
JavaScript代码在浏览器内的执行过程
JavaScript 代码在浏览器内是如何被执行的呢全局代码的执行过程全局函数的执行过程作用域链的查找规则新的ECMA标准作用域常见面试题全局代码的执行过程伪代码:var globalObject = { String, Data, setTimeout, Math, .....,// 省略 window:this}1、在解析的时候,JS 引擎会创建一个全局对象(globalObject:go)。编写的代码,会经过词法分析,语法分析,将定义的变.原创 2021-09-02 16:18:16 · 402 阅读 · 0 评论 -
浏览器的工作原理和V8引擎
问题抛出:JavaScript代码在浏览器内是如何被执行的呢?(下一篇解答)本文做知识的铺垫,有助于对原理的理解。浏览器输入url后的大致工作流程认识浏览器的内核Gecko firefox火狐浏览器Trident 微软开发,用于 IE浏览器,不久前微软也停止开始对 IE的维护。Blink Google Chrome浏览器,微软新型浏览器 Edge, Opera浏览器Webkit 苹果公司 开发,用于Safari浏览器的内核又叫排版引擎,浏览器引擎,渲染引擎浏览器的渲染过程浏览.原创 2021-09-01 08:10:57 · 549 阅读 · 0 评论 -
节流的详细解读
节流的解读场景例子说明+代码运用节流第一版(时间戳,开始时触发)第二版(定时器,结束后再触发一次)第三版(开始马上触发和结束再次触发)综上合并场景DOM元素的拖拽射击类游戏监听scroll事件…例子说明+代码还是利用上一篇文章用到的例子上一章防抖的详细解读运用节流第一版(时间戳,开始时触发)鼠标刚进入盒子,就触发一次counteAddNum函数,数字 +1 操作,接着每过一个时间触发函数function throttle(fun, delay) { let old = 0原创 2021-04-23 13:16:56 · 894 阅读 · 9 评论 -
防抖的详细解读
防抖的详细解读场景例子说明+代码实现不运用防抖运用防抖(逐渐优化)版本一:(基本效果)版本二:(this问题)版本三:(enent对象问题)版本四:(立即执行)版本五:(返回值)版本五:(撤销操作)场景滚动条的滚动网络请求mousemove…总之一个事件频繁的触发,而我们恰好想要这个事件这样执行:在规定的时间内,触发事件只执行一次要执行的函数。例子说明+代码实现鼠标在盒子里滑动,mousemove 事件是使中间的数字 +1。html代码和css代码就不上了不运用防抖随着鼠标在盒子里原创 2021-04-23 08:12:54 · 1050 阅读 · 9 评论 -
函数柯里化的解读
函数柯里化的解读什么是函数柯里化第一版:(柯里化函数的简单封装)第二版:(柯里化函数封装的升级)什么是函数柯里化柯里化(英语:Currying),又译为卡瑞化或加里化,是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术. -----维基百科例如:对于函数add(a, b, c, d).若其中某些参数在部分范围内是固定的。那么每一次函数的调用都要输入对应的值,那么参数复用性底,适应范围性不广。functi原创 2021-04-21 08:27:19 · 1014 阅读 · 9 评论