![](https://img-blog.csdnimg.cn/20200522212235535.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript
文章平均质量分 91
JavaScript学习笔记
lhrdlp
变成更好的自己
展开
-
Javascript中的局部变量、全局变量的详解
文章目录1. js声明变量的几种方式在看这篇文章的内容之前我们先来看下面的一道题目(这两天参加校招笔试,碰到了很多这种题目) var test = 'test'; function f() { console.log(test); var test = 'hello'; console.log(test); } f();执行函数fn的时候会输出什么呢?天啦,这道题我会,js中的作用域链中说了,使用一个变量的时候会先向自原创 2020-09-26 11:29:10 · 536 阅读 · 3 评论 -
前端面试之this指向
文章目录1. 理解this1.1 this到底指向什么2. this的绑定规则2.1 默认绑定普通函数调用函数调用链(一个函数又调用另外一个函数)将函数作为参数传递到另外一个函数中2.2 隐式绑定通过对象调用函数对象的链式调用隐式丢失给函数起别名函数作为另外一个函数的参数2.3 显示绑定call,apply,bind内置函数setTimeout()数组的forEach2.4 new 绑定3. 规则优先级这几天参加了很多面试和笔试,其中有很多的各种各样的this指向的或笔试或面试题,发现自己其实有很多没有搞原创 2020-09-15 23:24:39 · 488 阅读 · 1 评论 -
前端面试之深浅拷贝
文章目录堆和栈的主要区别js数据类型堆和栈的主要区别其实深拷贝和浅拷贝的主要区别就在于其内存中的存储类型不同.堆和栈都是内存中划分出来用于存储的区域.栈会自动扥配内存空间,由紫铜自动释放堆则是动态分配的内存,大小不定也不会自动释放.js数据类型js 的数据类型大方向上来说有两种:基本数据类型(String, Number, Boolean, Null, Undefined,Symbol)引用数据类型(Array,Object)当一个变量存放基本数据类型时与复杂的数据类型时分别存在原创 2020-09-06 21:28:32 · 770 阅读 · 0 评论 -
关于JavaScript防抖和节流理解
文章目录一.认识防抖和节流1.1 什么是防抖和节流1.2 为什么会需要防抖1.3 为什么会需要节流二.防抖函数的实现2.1防抖案例引入2.2自定义防抖函数三.节流函数的实现一.认识防抖和节流1.1 什么是防抖和节流根据我们之前所学,我们可以知道以下两点:JavaScript是事件驱动的,大量的操作会触发事件,会加入到事件队列中等待处理而对于某些频繁的事件处理会造成性能的损耗因此我们就可以通过防抖和节流来限制事件频繁的发生;防抖和节流函数目前已经是前端实际开发中两个非常重要的函数,也是面试经原创 2020-07-28 18:30:11 · 541 阅读 · 0 评论 -
AJAX 请求封装
封装的套路:写一个相对比较完善的用例写一个空函数,没有形参,将刚刚的用例直接作为函数的函数体根据使用过程中的需求抽象参数// 创建XHR核心对象 let createXHR = () => { if (window.XMLHttpRequest) { // 现代浏览器兼容 return new XMLHttpRequest(); } // IE兼容 return new ActiveXObject('M原创 2020-07-24 17:38:09 · 151 阅读 · 0 评论 -
JavaScript正则表达式
文章目录基础知识对比分析转义创建正则字面量方式对象创建正则表达式的方法testexec修饰符不区分大小写全局匹配多行匹配基础知识正则表达式是用于匹配字符串中字符组合的模式,在 JavaScript中,正则表达式也是对象。正则表达式是在宿主环境下运行的,如js/php/node.js 等正则表达式在其他语言知识中也是可用的,只是会有些函数使用上的区别正则表达式是字符串的一种匹配模式,专门为简化字符串操作而生说白了就是为了检索一个字符串中特定字符的规则,正则并不是单纯的字符串,而是一种逻辑公原创 2020-07-21 11:21:04 · 188 阅读 · 0 评论 -
js中的执行机制 宏任务微任务
做进做了几套题,碰见了好几个和下面的代码相似的例子,发现自己其实并没有理解JavaScript中的事件执行机制的相关内容.像下面的这种例子,在面试题中经常会碰到.console.log(1);setTimeout(() => {console.log(2)}, 0);console.log(3);Promise.resolve(4).then(b => {console.log(b);});console.log(5);//1 3 5 4 2上面死一个简单的例子,还有很多原创 2020-07-19 18:58:12 · 775 阅读 · 1 评论 -
复习JavaScript数组splice()方法
splice() 方法恐怕是最强大的数组方法了,它有很多中用法,splice() 方法的主要用途是向数组的中部插入项,使用这个方法主要有下面三种规则:1. 删除删除操作:可以删除任意数量的项,只需指定两个参数:要删除的第一项的位置要删除的项数,如solice(0,2),删除数组的前两项,示例代码如下: let arr = [0, 1, 2, 3, 4, 5, 6]; let newArr = arr.splice(0, 2) console.lo原创 2020-07-06 23:10:13 · 216 阅读 · 0 评论 -
JavaScript数据类型转换总结
文章目录1. typeof 操作符2.转数值2.1 Number()函数的转化规则:2.2 parseInt()2.3 parseFloat()3.转字符串3.1 toString()3.2 String()4. 转布尔值JavaScript中有7种数据类型:6 种原始类型(简单类型):数值:Number:整数和小数字符串:String:字符组成的文本布尔:Boolean:true和false两个特定值Null:表示无值,即此处的值就是“无”的状态Undefined:表示“未定义”或不存在,原创 2020-07-05 16:21:59 · 291 阅读 · 0 评论 -
了解childNodes 和 children 区别
做题的时候碰见了关于 childNodes 和 children之间的区别的问题,查了一点点资料,对他们二者之间也有了一些了解,写博客加深一下自己的印象.二者的定义:childNodes: 返回包含指定节点的子节点的集合,该集合为即时更新的集合children : 是一个只读属性,返回 一个Node的子elements ,是一个动态更新的 HTMLCollection,属于非标准型,不过它还是依旧可以被所有的浏览器所支持用下面的一段代码来展示二者之间具体的区别:childNodes的结果:原创 2020-07-05 09:42:15 · 4250 阅读 · 2 评论 -
JavaScript总结part one
1. cookie的弊端:cookie虽然在持久保存客户端数据提供了方便,分担了服务器存储的负担,但还是有很多局限性的。第一:每个特定的域名下最多生成20个cookie1.IE6或更低版本最多20个cookie2.IE7和之后的版本最后可以有50个cookie。3.Firefox最多50个cookie4.chrome和Safari没有做硬性限制IE和Opera 会清理近期最少使用的cookie,Firefox会随机清理cookie。cookie的最大大约为4096字节,为了兼容性,一般不能超原创 2020-06-26 21:36:25 · 315 阅读 · 0 评论 -
JavaScript控制表格行列变色
实现点击按钮控制表格行列变色,效果如下图:具体代码如下:代码还有很多可以优化的地方,大家可以再优化看看:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l原创 2020-06-21 11:26:15 · 896 阅读 · 2 评论 -
关于DOM2级事件的事件捕获和事件冒泡
当浏览器开发到第四代的是会,浏览器的开发团队遇到了一个很有意思的问题:页面的哪一部分会拥有特定的事件?要明白这个问题问的是什么,我们可以想下面的一个问题,加入我们在一张纸上画了一组同心圆.如果把手放在纸上,那么手指指向的不是那一个特定的圆而是纸上所有的圆.两家浏览器开发团队在看待浏览器事件方面还是一致的.如果我们单击 某个按钮,他们都认为单击事件并不仅仅发上在按钮身上.换句话说,你也同时单击了按钮的容器元素,甚至也单击了整个页面.事件流描述的就是从页面中接收事件的顺序.但是IE 和 Netspace 开发原创 2020-06-16 20:36:10 · 714 阅读 · 0 评论 -
JQuery学习笔记二(节点操作,事件监听,动画相关方法)
一. 节点操作1. append()在父元素后面添加子节点语法:父元素.append(子节点)$('.box1').append(`<h2>我是二级标题</h2>`);2. $()可以将一个普通字符串转成一个JQuery对象 let $span = $('<span>123</span>'); //...原创 2020-05-04 11:54:32 · 500 阅读 · 0 评论 -
JQuery学习笔记一(JQuery选择器.css样式操作,节点关系)
一.JQuery了解1,原生js的问题在我们变成的时候回很容易发现,原生的js编程会有很多的问题,尤其是在兼容性方面: 选择元素,权限兼容的只有getElementById和getElementsByTagName;其他方法都有兼容问题 样式操作也有兼容问题,还得我们自己封装,封装getStyle() 动画也麻烦,也得自己封装,封装animation() ...原创 2020-05-03 17:26:05 · 519 阅读 · 0 评论 -
JavaScript继承详细解释
文章目录1.原型链继承2.构造函数继承3. 组合继承4. 寄生组合继承5.圣杯模式1.原型链继承为了让子类继承父类的属性(也包括方法),首先需要定义一个构造函数。然后,将父类的新实例赋值给构造函数的原型。代码如下: function Person(name) { this.name = name; } Person.prototype.sayName = function () { console.lo原创 2020-05-22 17:14:25 · 927 阅读 · 1 评论 -
搞明白 JavaScript 原型与原型链
原型prototype1. 原型 prototypeprototype就是英语“原型”的意思。原型是构造函数创建对象的原始模型原型的特点原型也是对象,原型是函数对象的一个属性原型自带 constructor 属性, constructor 指定构造函数构造函数创建出的对象会继承原型的属性和方法// 任何函数都有原型,只是原型对于普通函数没什么大用,但对于构造函数用处极大function fun(){ console.log("您好")}console.log(fun.pro原创 2020-05-21 17:55:19 · 2098 阅读 · 5 评论 -
JavaScript 闭包与垃圾回收机制深入理解
一.垃圾回收机制JavaScript自动回收不再使用的变量,释放其所占的内存,开发人员不需要手动的做垃圾回收的处理. 垃圾回收机制只会回收局部变量.全局变量并不会被回收(全局变量在浏览器关闭之后会回收),所有当我们定义了一个全局对象时,使用完毕之后,最好给它重新复制为null,以便释放其所占的内存(这个变量并没有被回收,只是改变了他的志向,减少内存占用) 目前浏览器基本都使用标记清除(介绍....)的方式,还有一种不常见的引用计数(介绍...)方式1.标记清除:当某个变量不再被使用时,该变量就原创 2020-05-20 10:48:58 · 848 阅读 · 0 评论 -
使用canvas实现一个简单的画图工具
Canvas是HTML5中非常重要的一个更新亮点,画布,替代Flash的!制作动画、制作游戏。 现在我们使用canvas的基础知识来制作一个简单的画板.详细的过程与思路在代码注释中均有说明哦>_<.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...原创 2020-04-08 17:03:16 · 2373 阅读 · 1 评论 -
H5拖拽与文件上传
1.设置拖拽图片元素自带拖拽属性,其他元素可设置draggable属性.<div draggable="true"></div>元素设置拖拽之后拖动的效果.1.1 拖拽元素事件ondragstar:拖拽前出发,事件只会触发一次. ondrag:拖拽前,拖拽结束之间触发,事件会连续触发, ondragend:拖拽结束触发,事件只触发一次....原创 2020-03-31 15:36:46 · 996 阅读 · 0 评论 -
JavaScript面向对象1
面向对象初级1.构造函数,原型和继承1.1 构造函数的定义构造函数就是用来创造新对象的(函数,数组,正则表达式,日期等都是对象), 它必须用过关键字NEW来创造,如果将构造函数用作普通函数的话,往往不会正常工作的. 按照一惯的约定, 我们开发者把构造函数的首字母大写用作辨别. 一个构造函数创造的对象被称为该构造函数的实例.1.2 常见的构造函数Object()Array(...原创 2020-03-27 09:03:57 · 109 阅读 · 0 评论 -
js用name做变量名
昨天帮室友写作业的时候发生了一件很奇怪的事情,我使用var关键字定义了一个name,目的是为了获取一个input标签中的value值,因为是很简单的操作,所以我直接绑定了点击事件,后来发现点击事件不生效,打印name发现其实根本没有获取到input标签中的value,而是一个字符串,下面给大家看一下我的代码: <script> var nam...原创 2020-03-17 13:48:22 · 1146 阅读 · 0 评论 -
js中定时器与延时器的用法
js中定时器的主要语法有以下四个:添加定时器:setTimeout("js语句",时间) setInterval("js语句",时间)删除定时器(此处的timer(自定义)是定时器的顺序,在后面的部分我会介绍到):clearTImeout(timer) clearInterval(timer)然后我们介绍一下它们的具体用法:setTimeout 只能执行一次,请看下面的代...原创 2020-03-13 15:59:53 · 4441 阅读 · 3 评论 -
使用js设计一个数字钟效果(挂钟)
在这次设计中秒钟走起来会有停顿,在后面的文章中我会写出秒针平滑过渡的效果.代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...原创 2020-02-22 00:09:42 · 492 阅读 · 1 评论 -
js完成轮播图,两种模式(正常模式和循环模式)
使用js代码完成轮播图效果(正常模式和循环模式),因为博客里不能上传视频,所以我只能在文章后面用一张图片来展示效果,具体效果大家可以自己运行一下代码试试.<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="Author" content="Fly"...原创 2020-02-16 16:19:13 · 268 阅读 · 0 评论 -
javascript中call()、apply()、bind()的用法的理解
在开始介绍这三个函数之前我们首先来举一个例子来理解this的指向问题。总结为一句话:this是一个指向,默认指向window,this指向调用函数的主体对象。 console.log(this) var obj = { name: this } console.log(obj.name)输出的结果为:windowwindow在这段代码中并没...原创 2020-02-15 12:02:51 · 189 阅读 · 0 评论