JavaScript
TwoZeroZero
这个作者很懒,什么都没留下…
展开
-
JS:关于闭包
闭包(Closure):指有权访问另一个函数作用域中变量的函数。(这个变量所在的函数即为闭包函数)。闭包的主要作用:延伸了变量的作用范围。原创 2020-11-07 01:35:23 · 147 阅读 · 0 评论 -
JS:关于事件轮询(event loop)机制
因为js是单线程语言,所以只有一个主线程来执行代码。那么遇到异步任务的时候,js是如何实现非阻塞,或事件循环的(event loop)?浏览器环境下js引擎的事件循环机制js顺序执行代码,遇到同步代码,将代码推入执行栈(call stack);执行完成后清空调用栈,再执行下一行代码;遇到异步任务,将异步任务放到Web API里面;然后继续执行接下来的同步代码,直到同步代码执行完毕。期间若异步事件返回结果(如定时器时间已到的情况),将异步任务推入回调队列(callback queue)中。当执原创 2020-10-12 12:01:22 · 467 阅读 · 0 评论 -
JS:js如何实现继承?
实现继承的方式使用ES6 的class关键字,使用class / extends / super 关键字,基类的构造函数必须调用super(),才能获取父类中的所有方法和属性。使用原型继承,改变基类的原型,指向超类的实例,进而实现继承。即将基类的prototype属性设置为父类的实例,就可以获得父类构造函数的所有方法和属性。...原创 2020-10-12 11:16:16 · 104 阅读 · 0 评论 -
跨域的几种解决方案
一、跨域问题背景浏览器的同源政策:A网页设置的 Cookie,B网页不能打开,除非这两个网页"同源"。同源是指:协议相同、域名相同、端口相同。但凡有一个不同,则不同源。同源政策的目的:是为了保证用户信息的安全,防止恶意的网站窃取数据。其中,同源政策规定,AJAX请求只能发给同源的网址,否则就报错。那么前后端分离如何实现跨域请求?二、实现跨域的解决方案1. JSONP网页通过添加一个<script>元素,由它向跨源网址发出请求,即向服务器请求JSON数据,这种做法不受同源政策限制;服原创 2020-10-11 22:33:30 · 221 阅读 · 0 评论 -
JS:关于事件触发机制
事件触发经历三个阶段:捕获阶段->目标阶段->冒泡阶段事件捕获:从外层一层一层往内部直至传递到目标元素;事件冒泡:从目标元素开始一层层向外传递至根节点;DOM事件流,是先调用捕获阶段的处理函数,其次调用目标阶段的处理函数,最后调用冒泡阶段的处理函数;若使用 addEventListener 监听事件,默认是监听冒泡阶段的事件,但可以通过 useCapture 参数,来指定在什么阶段触发事件。设置useCapture为true则在捕获阶段触发,为false则在冒泡阶段触发。而默认情况原创 2020-10-11 21:04:08 · 833 阅读 · 1 评论 -
性能优化:手写防抖和节流以及二者的区别
防抖(debounce)防抖(debounce):限制事件被频繁触发。(涉及定时器和闭包)触发事件时,在一定时间内,若没有再次触发事件,则事件处理函数在时间到达时执行一次;若在一定时间内,又触发事件,则清除上一次的计时,重新开始计时,直到时间到了再执行函数。应用:输入框校验,百度搜索出现提示文字功能等场景:监听输入框,一旦文字变化,即触发keyup事件,则触发change事件,打印出输入框的内容。防抖效果:用户输入结束或暂停时,才触发change事件。<input type="text"原创 2020-09-13 18:14:31 · 872 阅读 · 1 评论 -
JS:window.onload 和 DOMContentLoaded 的区别
window.onload事件当页面的资源(包括图片、视频等)全部加载完才会执行DOMContentLoaded事件只要DOM渲染完即可执行,此时图片、视频等可能还没有加载完因此两者主要是触发时机不同,会先触发DOMContentLoaded,再触发window.onload事件。...原创 2020-09-13 10:53:37 · 582 阅读 · 0 评论 -
JS:Promise总结及关于then和catch的面试题解析
Promise定义Promise:一个对象,是异步操作的一种处理方案,主要解决了回调地狱callback hell问题。Promise将处理程序与异步操作的最终成功值或失败原因关联起来,让异步方法像同步方法一样返回值,但不是立即返回最终值,异步方法返回一个Promise,在将来的某个时候提供该值。Promise对象有三种状态:pending:进行中resolved:完成rejected:失败Promise只有两种状态变化:(创建Promise时,PromiseStatus将处于pend原创 2020-08-23 15:20:06 · 2850 阅读 · 0 评论 -
JS—创建10个a标签,点击弹出相应1-10的序号
创建10个a标签,点击弹出相应1-10的序号错误做法:弹出均为11,当触发事件时,for循环已经结束,i为11let i, a;for (i = 1; i < 11; i++) { a = document.createElement('a'); a.innerHTML = i + '<br>'; a.addEventListener('click', function(e) { // 阻止默认行为 e.preventDefau原创 2020-08-18 12:22:02 · 630 阅读 · 0 评论 -
JS的call、apply以及手写bind函数
call和apply函数call()语法:call (thisObj, arg1, arg2);apply()语法:apply (thisObj, [arg1, arg2]);共同点:改变this指向,并立即执行区别:bind函数的参数为列表形式,apply参数为数组形式bind函数bind()语法:bind (thisObj, arg1, arg2);不会立即执行,而是返回一个新函数,调用新函数才执行改变this的指向为指定的值参数为列表形式方法挂载在Function.proto原创 2020-08-18 11:48:00 · 170 阅读 · 0 评论 -
JS中的浅拷贝与深拷贝实现
关于JS中的深拷贝与浅拷贝浅拷贝在复制引用类型,例如对象的时候,浅拷贝只复制地址值,两个对象指向同一个堆内存中的数据,一旦改变后者的数据,被拷贝的对象的数据同样被修改。深拷贝不同于浅拷贝指向同一地址,深拷贝则是在堆内存中重新创建了一个空间来存放相同的数据,二者指向的堆内存的地址是不同的。此时,后者数据修改不影响前者的数据。JS深拷贝实现let obj1 = { name: 'aaa', age: 20, address: { city: '广州'原创 2020-08-17 14:28:58 · 155 阅读 · 0 评论