![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 61
djdjdjdjdj丶
年少当怀鸿鹄志
展开
-
手写基本实现call、bind、apply
一、作用call、apply、bind作用是改变函数执行时的上下文、也就是改变函数运行时的 this 指向apply、call、bind都可以改变函数的 this 指向三者的第一个参数都是 this 要指向的对象,默认是windowapply和call都会立即执行当前函数,bind会返回一个新函数传参方面,call和bind一直,apply第二个参数接受一个数组手写call这里的this指向调用者,也就是这个函数我们把这个函数当作属性,加入到context中避免key重复,使用Symb原创 2021-04-08 13:49:28 · 152 阅读 · 1 评论 -
javascript对象布局 - Javascript Object Hierarchy
今天在某一篇文章看到了一张图,觉得画的非常好,对于JS中的Function和Object的关系有了详细的描述,作者叫做Javascript Object Hierarchy(JavaScript对象布局)在刚开始看原型原型链的时候,就对顶层的Function和Object很难说清楚,这张图画明白了JS的顶层对象布局。结合图,再看顶层的构造函数Function和Object以及原型、实例的关系,也就豁然开朗。本来这张图在另一篇文章中是很模糊的,通过强大的识图工具,找到的国外的原文。原文:Javascr原创 2021-02-04 00:35:30 · 263 阅读 · 0 评论 -
手写个JS深拷贝
手写JS深拷贝function deepClone(obj) { // 1.递归 先写递归的结束条件,直到基本数据类型(和null)才能拷贝赋值 // 用typeof判断基本数据类型 和 判断null if (typeof obj !== "object" || typeof obj === null) { return obj; } // 2.初始化返回结果 var objClone = Array.isArray(obj) ? [] : {}; // 3.fo原创 2021-02-03 23:45:10 · 266 阅读 · 0 评论 -
JS简单实现发布订阅模式
发布订阅模式在发布订阅模式里,发布者,并不会直接通知订阅者,换句话说,发布者和订阅者,彼此互不相识。那他们之间如何交流?由一个调度中心来做中间人,发布者更新(publish)主题,由主题(调度中心)来进行通知(noticy)订阅者更新(update)。简单的代码实现参考网上class面向对象实现,相较于很多js event的实现便于理解// 主题class Dep { constructor(callback) { this.subs = []; // 主题的订阅者 t.原创 2021-01-30 17:36:52 · 5260 阅读 · 8 评论 -
JS数组常用方法整理,包括ES6
pop、push、shift、unshiftreverse、sortconcat、slice、splice迭代方法 every some filter map foreach...[]Array.fromcopyWithinfind、findIndexincludes一、栈、队列方法可以用数组模拟栈的和队列数组尾部操作,出pop(),入push()数组头部操作,出shift(),入unshift()出的操作,返回移除的元素在原数组上进行二、排序,反转reve原创 2021-01-29 12:49:33 · 519 阅读 · 0 评论 -
JS中的this简单总结
this是什么?this是 JavaScript 语言的一个关键字this指的是函数运行时所在的环境(context)它是函数运行时,在函数体内部自动生成的一个对象,只能在函数体内部使用1.普通的this全局调用,this指向windowvar x = 1;function test() { console.log(this) // window console.log(this.x); // 1}test();作为某个对象的方法调用,这时this就指这个上级对象。f原创 2021-01-27 20:32:16 · 214 阅读 · 2 评论 -
JS事件循环Event Loop与任务队列
事件循环Event LoopJavaScript是单线程,异步,非阻塞的。为了协调事件、用户交互、脚本、UI 渲染、网络请求,这就有了 Event LoopJS 会创建一个类似于 while (true) 的循环。每次循环的过程就是查看是否有待处理事件,如果有则取出相关事件放入执行栈中由主线程执行。待处理的事件会存储在一个任务队列中,也就是每次循环会查看任务队列中是否有需要执行的任务。任务队列Event QueueJs 中,有两类任务队列:宏任务队列(macro tasks)和微任务队列(原创 2021-01-26 21:20:42 · 198 阅读 · 1 评论 -
谈谈JS中的闭包
浅谈闭包如何产生闭包?为了在函数外部访问函数内局部变量,就在父函数中定义一个子函数并让它访问了父函数的局部变量,再通过父函数返回该子函数就实现了调用局部变量的效果。简单举例function fun1() { let num = 1; return function fun2() { console.log(num++); }}const add = fun1();add();形成的条件函数嵌套(函数作参数,函数作返回值)内部函数访问外部函数的局部变量可以把闭包原创 2021-01-23 00:09:40 · 118 阅读 · 0 评论 -
2021年了!JavaScript有几种数据类型?
2021年了!JavaScript有几种数据类型?看过一些文章,关于JavaScript的数据类型分为几种,有不同的说法。先从大体上看,有说基本数据类型和引用数据类型的;有说原始数据类型和对象数据类型的等等。在这里结合MDN文档和一些网上的文章整理一下。先上结论:八种,分别是:string、number、boolean、undefined、null、symbol(ES6)、bigint(ES10)和object一、JS中的堆栈与数据类型1.从JavaScript中的堆栈谈起首先我们需要知道:原创 2021-01-22 00:39:32 · 1465 阅读 · 5 评论 -
谈谈XMLHttpRequest实现Ajax与跨域问题
文章目录一、XMLHttpRequest对象后端准备实现一个简易的ajax请求1.open()2.xhr.readyState3.xhr.onreadystatechange()4.xhr.status5.send()二、同源策略与跨域1.什么是跨域?2.同源策略三、实现跨域的几种方式1.JSONP实现跨域JSONP原理JSONP实现2.CORS服务端支持对于简单请求对于非简单请求注意3.HTTP代理(http proxy)本文以使用一个XMLHttpRequest对象发起GET请求开始,探讨同源策略与跨原创 2021-01-20 23:07:23 · 1552 阅读 · 1 评论 -
浅谈JS中的原型和原型链
文章目录1.原型和函数几点关键看 Object 和 Function2.谈谈 __proto__属性3.原型链4.instanceof操作符instanceof 原理简易实现1.原型和函数众所周知,JS并没有类(class)的概念,虽然说ES6开始有了类的概念,但是,这并不是说JS有了像Java这些基于类的面向对象语言一样,有了全新的继承模型。ES6中的类,仅仅只是基于现有的原型继承的一种语法糖。几点关键函数都拥有 prototype 属性,指向它的原型对象。也可以说:每个构造函数都有一个pr原创 2021-01-15 15:40:32 · 116 阅读 · 1 评论 -
JS防抖和节流,手写实现
一、什么是防抖和节流?函数防抖和节流,都是控制事件触发频率的方法。防抖:假设函数持续多次执行,我们希望让它冷静下来再执行。也就是当持续触发事件的时候,函数是完全不执行的,等最后一次触发结束的一段时间之后,再去执行。节流:让函数有节制地执行,而不是毫无节制的触发一次就执行一次。什么叫有节制呢?就是在一段时间内,只执行一次。节流顾名思义则是将减少一段时间内触发的频率,指定时间间隔内只会执行一次任务。防抖场景文本输入的验证,连续输入文字后发送 AJAX 请求进行验证,验证一次就好。监听一个输入原创 2021-01-12 21:49:15 · 645 阅读 · 0 评论