JavaScript系列
文章平均质量分 88
itpeilibo
不怕孤独,努力沉淀;
于淡泊中,平和自在。
展开
-
【JavaScript】js高级第三天(笔记总结)
JavaScript高级第三天今日目标能够说出函数的多种定义和调用方式能够说出和改变函数内部 this 的指向能够说出严格模式的特点能够把函数作为参数和返回值传递能够说出闭包的作用能够说出递归的两个条件能够说出深拷贝和浅拷贝的区别一、函数的定义和调用1、函数的定义方式函数声明方式 function 关键字(命名函数)函数表达式(匿名函数)new Function()语法:var fn = new Function('参数1','参数2'..., '函数体')原创 2022-05-21 13:58:46 · 137 阅读 · 0 评论 -
每日一题:web常见的攻击方式有哪些?如何防御?
DOM 型 XSS 跟前两种 XSS 的区别:DOM 型 XSS 攻击中,取出和执行恶意代码由浏览器端完成,属于前端 JavaScript 自身的安全漏洞,而其他两种 XSS 都属于服务端的安全漏洞。针对第一个要素,我们在用户输入的过程中,过滤掉用户输入的恶劣代码,然后提交给后端,但是如果攻击者绕开前端请求,直接构造请求就不能预防了。利用受害者在被攻击网站已经获取的注册凭证,绕过后台的用户验证,达到冒充用户对被攻击的网站执行某项操作的目。访问该页面后,表单会自动提交,相当于模拟用户完成了一次POST操作。原创 2022-10-21 08:00:00 · 247 阅读 · 0 评论 -
每日一题:大文件上传如何做断点续传?
如果中途上传中断过,下次上传的时候根据当前临时文件大小,作为在客户端读取文件的偏移量,从此位置继续读取文件数据块,上传到服务器从此偏移量继续写入文件即可。值,到服务器磁盘查找是否有之前未完成的文件合并信息(也就是未完成的半成品文件切片),取到之后根据上传切片的数量,返回数据告诉前端开始从第几节上传。整体思路比较简单,拿到文件,保存文件唯一性标识,切割文件,分段上传,每次上传一段,根据唯一性标识判断文件上传进度,直到文件的全部片段上传完毕。上传时间会变长,高频次文件上传失败,失败后又需要重新上传等等。原创 2022-10-18 08:00:00 · 451 阅读 · 0 评论 -
每日一题:什么是单点登录?如何实现?
淘宝、天猫都属于阿里旗下,当用户登录淘宝后,再打开天猫,系统便自动帮用户登录了天猫,这种现象就属于单点登录。将会颁发一个令牌给各个子系统,子系统可以拿着令牌会获取各自的受保护资源,为了减少频繁认证,各个子系统在被。用户统一在认证中心进行登录,登录成功后,认证中心记录用户的登录状态,并将。的合法性,防止用户伪造。,如果没有,说明用户在当前系统中尚未登录,那么就将页面跳转至认证中心。这些都是由前端来控制的,后端需要做的仅仅是在用户登录成功后,将。如果认证中心发现用户尚未登录,则返回登录页面,等待用户登录。原创 2022-10-20 08:00:00 · 1023 阅读 · 0 评论 -
每日一题:如何实现上拉加载,下拉刷新?
下拉刷新和上拉加载这两种交互方式通常出现在移动端中本质上等同于PC网页中的分页,只是交互形式不同开源社区也有很多优秀的解决方案,如iscroll、、库等等这些第三方库使用起来非常便捷我们通过原生的方式实现一次上拉加载,下拉刷新,有助于对第三方库有更好的理解与使用。原创 2022-10-19 08:00:00 · 351 阅读 · 0 评论 -
每日一题:如何判断一个元素是否在可视区域中?
即重叠观察者,从这个命名就可以看出它用于判断两个元素是否重叠,因为不用进行事件的监听,性能方面相比。通过上述方式,可以看到可视区域颜色会变成黄色了,但是可以明显看到有卡顿的现象,原因在于我们绑定了。实现:创建了一个十万个节点的长列表,当节点滚入到视窗中时,背景就会从红色变为黄色。事件,判断页面上哪些元素在可视区域中,如果在可视区域中则将背景颜色设置为。,元素的上外边框至包含元素的上内边框之间的像素距离,其他。可视区域即我们浏览网页的设备肉眼可见的区域,如下图。事件伴随了大量的计算,会造成资源方面的浪费。原创 2022-10-17 07:36:17 · 813 阅读 · 0 评论 -
每日一题:什么是防抖和节流?有什么区别?如何实现?
节流: n 秒内只运行一次,若在 n 秒内重复触发,只有一次生效防抖: n 秒后在执行该事件,若在 n 秒内被重复触发,则重新计时一个经典的比喻:想象每天上班大厦底下的电梯。把电梯完成一次运送,类比为一次函数的执行和响应假设电梯有两种运行策略debounce和throttle,超时设定为15秒,不考虑容量限制电梯第一个人进来后,15秒后准时运送一次,这是节流电梯第一个人进来后,等待15秒。如果过程中又有人进来,15秒等待重新计时,直到15秒后开始运送,这是防抖。原创 2022-10-14 15:41:09 · 246 阅读 · 0 评论 -
每日一题:说说你对函数式编程的理解?优缺点?
相比命令式编程,函数式编程更加强调程序执行的结果而非执行的过程,倡导利用若干简单的执行单元让计算结果不断渐进,逐层推导复杂的运算,而非设计一个复杂的执行过程。可以看到,函数实际上是一个关系,或者说是一种映射,而这种映射关系是可以组合的,一旦我们知道一个函数的输出类型可以匹配另一个函数的输入,那他们就可以进行组合。纯函数是对给定的输入返还相同输出的函数,并且要求你所有的数据都是不可变的,即纯函数=无状态+数据不可变。在我们的编程世界中,我们需要处理的其实也只有“数据”和“关系”,而关系就是函数。原创 2022-10-13 07:49:13 · 372 阅读 · 0 评论 -
【JavaScript】js中内存泄漏的几种情况?
并非指内存在物理上的消失,而是应用程序分配某段内存后,由于设计错误,导致在释放该段内存之前就失去了对该段内存的控制,从而造成了内存的浪费。进入环境的变量所占用的内存就不能释放,当变量离开环境时,则将其标记为“离开环境“然后,它会将所有在上下文中的变量,以及被在上下文中的变量引用的变量的标记去掉。这很麻烦,所以大多数语言提供自动内存管理,减轻程序员的负担,这被称为"垃圾回收机制"随后垃圾回收程序做一次内存清理,销毁带标记的所有值并收回它们的内存。语言中,因为是手动管理内存,内存泄露是经常出现的事情。原创 2022-10-11 07:23:01 · 581 阅读 · 0 评论 -
每日一题:说说你对事件循环的理解
从上面我们可以看到,同步任务进入主线程,即主执行栈,异步任务进入任务队列,主线程内的任务执行完毕为空,会去任务队列读取对应的任务,推入主线程执行。是一门单线程的语言,意味着同一时间内只能做一件事,但是这并不意味着单线程就是阻塞,而实现单线程非阻塞的方法就是事件循环。出现分歧的原因在于异步任务执行顺序,事件队列其实是一个“先进先出”的数据结构,排在前面的事件会优先被主线程读取。宏任务的时间粒度比较大,执行的时间间隔是不能精确控制的,对一些高实时性的需求就不太符合。外面的同步代码,同步代码执行完,再回到。原创 2022-10-09 07:14:04 · 184 阅读 · 0 评论 -
【JavaScript】js中bind、call、apply 区别?如何实现一个bind?
方法中,在定时器中是作为回调函数来执行的,因此回到主栈执行时是在全局执行上下文的环境中执行的,这时候。的指向,后面传入的也是一个参数列表(但是这个参数列表可以分多次传入)作用是改变函数执行时的上下文,简而言之就是改变函数运行时的。的指向,第二个参数是函数接受的参数,以数组的形式传入。指向后原函数会立即执行,且此方法只是临时改变。指向后原函数会立即执行,且此方法只是临时改变。的指向,后面传入的是一个参数列表。接受两个参数,第一个参数是。对象,这时候就需要该改变。同样的,当第一个参数为。方法的第一个参数也是。原创 2022-10-08 08:40:11 · 230 阅读 · 0 评论 -
每日一题:ajax原理是什么?如何实现?
领导想找小李汇报一下工作,就委托秘书去叫小李,自己就接着做其他事情,直到秘书告诉他小李已经到了,最后小李跟领导汇报工作。,是一种创建交互式网页应用的网页开发技术,可以在不重新加载整个网页的情况下,与服务器交换数据,并且更新部分网页。请求数据流程与“领导想找小李汇报一下工作”类似,上述秘书就相当于。对象来向服务器发异步请求,从服务器获得数据,然后用。事件用于监听服务器端的通信状态,主要监听的属性为。对象,领导相当于浏览器,响应数据相当于小李。对象的了解,下面来封装一个简单的。请求后,接着做其他事情,等收到。原创 2022-10-07 09:02:41 · 146 阅读 · 0 评论 -
每日一题:说说new操作符具体干了什么?
从上面可以发现,构造函数如果返回值为一个对象,那么这个返回值会被正常使用。现在在构建函数中显式加上返回值,并且这个返回值是一个原始类型。可以发现,构造函数中返回一个原始值,然而这个返回值并没有作用。操作符用于创建一个给定构造函数的实例对象。下面在构造函数中返回一个对象。从上面介绍中,我们可以看到。现在我们已经清楚地掌握了。那么我们就动手来实现一下。原创 2022-10-06 07:19:00 · 518 阅读 · 0 评论 -
每日一题:解释下什么是事件代理?应用场景?
click,mousedown,mouseup,keydown,keyup,keypress减少整个页面所需的内存,提升整体性能动态绑定,减少重复工作focus、blur这些事件没有事件冒泡机制,所以无法进行委托绑定事件mousemove、mouseout这样的事件,虽然有事件冒泡,但是只能不断通过位置去计算定位,对性能消耗高,因此也是不适合于事件委托的focus、blur这些事件没有事件冒泡机制,所以无法进行委托绑定事件mousemove、mouseout。原创 2022-10-05 06:58:30 · 465 阅读 · 0 评论 -
【JavaScript】说说js中的事件模型
javascript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作,使得网页具备互动性, 常见的有加载事件、鼠标事件、自定义事件等由于DOM是一个树结构,如果在父子节点绑定事件时候,当触发子节点的时候,就存在一个顺序问题,这就涉及到了事件流的概念事件冒泡是一种从下往上的传播方式,由最具体的元素(触发节点)然后逐渐向上传播到最不具体的那个节点,也就是DOM中最高层的父节点原创 2022-10-03 15:22:39 · 138 阅读 · 0 评论 -
【JavaScript】js中执行上下文和执行栈是什么?
引擎会执行位于执行栈栈顶的执行上下文(一般是函数执行上下文),当该函数执行结束后,对应的执行上下文就会被弹出,然后控制流程到达执行栈的下一个执行上下文。可以有任意多个函数上下文,每次调用函数创建一个新的上下文,会创建一个私有作用域,函数内部声明的任何变量都不能在当前函数作用域外部直接访问。执行栈,也叫调用栈,具有 LIFO(后进先出)结构,用于存储在代码执行期间创建的所有执行上下文。每当引擎碰到一个函数的时候,它就会创建一个函数执行上下文,然后将这个执行上下文压到执行栈中。简单的来说,执行上下文是一种对。原创 2022-10-02 10:38:52 · 502 阅读 · 0 评论 -
每日一题:谈谈this对象的理解
函数的this关键字在JavaScript中的表现略有不同,此外,在严格模式和非严格模式之间也会有一些差别在绝大多数情况下,函数的调用方式决定了this的值(运行时绑定)this关键字是函数运行时自动生成的一个内部对象,只能在函数内部使用,总指向调用它的对象// 当前调用栈是:baz // 因此,当前调用位置是全局作用域 console . log("baz");bar();//原创 2022-10-01 09:27:51 · 525 阅读 · 0 评论 -
【JavaScript】js中如何实现继承?
下面以一张图作为总结:通过来划分不同的继承方式,最后的寄生式组合继承方式是通过组合继承改造之后的最优继承方式,而extends的语法糖和寄生组合继承的方式基本类似。原创 2022-09-30 07:12:47 · 242 阅读 · 0 评论 -
【JavaScript】js中原型,原型链 ? 有什么特点?
_proto__作为不同对象之间的桥梁,用来指向创建它的构造函数的原型对象的每个对象的__proto__都是指向它的构造函数的原型对象prototype的构造函是一个函数对象,是通过Function构造器产生的原型对象本身是一个普通对象,而普通对象的构造函数都是Object刚刚上面说了,所有的构造器都是函数对象,函数对象都是Function构造产生的Object的原型对象也有__proto__属性指向null,null是原型链的顶端一切对象都是继承自Object对象,Object对象直接继承根源对象。原创 2022-09-29 06:55:29 · 271 阅读 · 0 评论 -
【JavaScript】js中说说你对作用域链的理解
引擎会尝试在当前作用域下去寻找该变量,如果没找到,再到它的上层作用域寻找,以此类推直到找到该变量或是已经到了全局作用域。可见上述代码中在函数内部声明的变量或函数,在函数外部是无法访问的,这说明在函数内部定义的变量或者方法只是函数作用域。任何不在函数中或是大括号中声明的变量,都是在全局作用域下,全局作用域下声明的变量可以在程序的任意位置访问。把作用域比喻成一个建筑,这份建筑代表程序中的嵌套作用域链,第一层代表当前的执行作用域,顶层代表全局作用域。变量,当我们在全局访问这个变量的时候,系统会报错。原创 2022-09-28 07:16:03 · 199 阅读 · 0 评论 -
【JavaScript】js中深拷贝浅拷贝的区别?如何实现一个深拷贝?
深拷贝开辟一个新的栈,两个对象属完成相同,但是对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性。浅拷贝只复制属性指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存,修改对象属性会影响原对象。引用类型数据保存在堆内存中,引用数据类型的变量是一个指向堆内存中实际对象的引用,存在栈中。但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。从上图发现,浅拷贝和深拷贝都创建出一个新的对象,但在复制对象属性的时候,行为就不一样。下面简单实现一个浅拷贝。原创 2022-09-26 07:05:23 · 494 阅读 · 0 评论 -
【JavaScript】js中== 和 ===区别,分别在什么情况使用
等于操作符用两个等于号( == )表示,如果操作数相等,则会返回true前面文章,我们提到在JavaScript中存在隐式转换。等于操作符(==)在比较中会先进行类型转换,再确定操作数是否相等遵循以下规则:如果任一操作数是布尔值,则将其转换为数值再比较是否相等如果一个操作数是字符串,另一个操作数是数值,则尝试将字符串转换为数值,再比较是否相等如果一个操作数是对象,另一个操作数不是,则调用对象的valueOf()方法取得其原始值,再根据前面的规则进行比较和undefined相等如果有任一操作数是NaN。原创 2022-09-25 10:10:30 · 503 阅读 · 0 评论 -
【JavaScript】j谈谈 js 中的类型转换机制
前面我们讲到,JSundefined、null、boolean、string、number、symbolobject但是我们在声明的时候只有一种数据类型,只有到运行期间才会确定当前类型let x = y?1 : a;上面代码中,x的值在编译阶段是无法获取的,只有等到程序运行时才能知道虽然变量的数据类型是不确定的,但是各种运算符对数据类型是有要求的,如果运算子的类型与预期不符合,就会触发类型转换机制强制转换(显示转换)自动转换(隐式转换)原创 2022-09-24 08:21:32 · 301 阅读 · 0 评论 -
【JavaScript】js中字符串的常用方法有哪些?
我们也可将字符串常用的操作方法归纳为增、删、改、查,需要知道字符串的特点是一旦创建了,就不可变。这里的删的意思并不是说删除原字符串的内容,而是创建字符串的一个副本,再进行操作。这三个方法都返回调用它们的字符串的一个子字符串,而且都接收一或两个参数。从字符串开头去搜索传入的字符串,并返回位置(如果没找到,则返回 -1 )这里增的意思并不是说直接增添内容,而是创建字符串的一个副本,再进行操作。这里改的意思也不是改变原字符串,而是创建字符串的一个副本,再进行操作。把字符串按照指定的分割符,拆分成数组中的每一项。原创 2022-09-23 08:40:47 · 135 阅读 · 0 评论 -
【JavaScript】说说js中的数据类型?存储上的差别?
在JavaScript基本类型复杂类型两种类型的区别是:存储位置不同。其他引用类型除了上述说的三种之外,还包括Date、RegExp、Map、Set等…三、存储区别基本数据类型和引用数据类型存储在内存中的位置不同:基本数据类型存储在栈中引用类型的对象存储于堆中当我们把变量赋值给一个变量时,解析器首先要确认的就是这个值是基本类型值还是引用类型值原创 2022-09-21 23:33:37 · 190 阅读 · 0 评论 -
【JavaScript】js中本地存储的方式有哪些?区别及应用场景?
作为一段一般不超过 4KB 的小型文本数据,它由一个名称(Name)、一个值(Value)和其它几个用于控制。,类型为「小型文本文件」,指某些网站为了辨别用户身份而储存在用户本地终端上的数据。对于存储较少量的数据很有用,但对于存储更大量的结构化数据来说,这种方法不太有用。并对其加密,其保存的信息很容易被窃取,导致安全风险。使用方法基本一致,唯一不同的是生命周期,一旦页面(会话)关闭,属性都是相同的才可以,其中有一个不同得时候都会创建出一个新的。被窃取,他人很容易利用你的。的删除,最常用的方法就是给。原创 2022-10-12 21:53:41 · 199 阅读 · 0 评论