![](https://img-blog.csdnimg.cn/5390c0222b4a4f6e80cbda41a52c872c.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript全解析专栏
文章平均质量分 78
JavaScript全解析
千锋IT教育
定期分享IT学习技术资料(java、前端、大数据、Python、全链路UI/UE等)
展开
-
JavaScript全解析-继承
○在子类的 constructor 内 super 必须写在 this.xxx 的前面(最前面)●父类可以是构造函数,但是子类不能的构造函数因为extends和super关键字就是给类设计的。○属性在自己身上, 每一个子类实例继承的属性值都可以不一样。●当构造函数A 的实例使用了 构造函数B 的属性和方法。○父类构造函数体内的属性和原型上的方法都可以实现继承。○子类的所有实例都可以给继承下来的属性赋不一样的值。○继承下来的属性不在自己身上, 在自己的原型上。○子类的所有继承下来的属性都在自己身上。原创 2023-05-19 10:07:38 · 209 阅读 · 0 评论 -
事件轮询EventLoop
其实就是一种执行方式, 当主线程的任务执行完毕后, 会通过轮询, 轮询事件队列(也有人叫做回调队列)当中的任务的方式去执行任务, 如果事件队列中的任务为空, 会一直轮询, 通过事件轮询推入主线程。1、此时微任务队列中的是 之前的 promise 的 then 方法, 因为 promise中 resolve的值为 5, 所以此时打印的值是 5。●每执行完毕一个宏任务, 就会清空一次微任务队列(不管微任务队列有多少任务, 都执行完毕)异步任务, 推入宏任务队列 (在此之前已经有一个了)原创 2023-05-17 16:55:40 · 183 阅读 · 0 评论 -
JavaScript全解析-this指向
●通过上面的学习大家知道,this在不同的情况指向是不同的,但是有时候需要指向一个制定的对象。●特点:函数不会立即调用,会返回一个改变this指向以后的函数,使用的时候需要调用。○第二参数的一个数组,要传递的实参要放到数组里面,就是有一个实参也要放到数组里面。●函数内的 this, 和 函数如何定义没有关系, 和 函数在哪定义也没有关系。●该函数内的 this 指向 点 前面的内容, 也就是那个对象或者数组。也可以扫码直接观看视频哦!●普通函数中的this和全局调用一样,this指向window。原创 2023-05-17 16:56:53 · 190 阅读 · 0 评论 -
前端路由+原生JS实现SPA
●前端路由●路由: 就是一一对应关系的集合●前端路由: 就是一个 url 地址, 对应哪个组件(页面)●前端路由的本质○根据地址栏变化(不重新想服务器发送请求), 去局部更新不同的页面内容, 完成前端业务场景切换●前端路由的思路○URL 地址栏中的 Hash 值发生了变化○前端 JS 监听到 Hash 地址的变化 window.onhashchange = () => {}○前端 JS 把当前 Hash 地址对应的组件渲染到浏览器中●SPA。原创 2023-05-16 10:27:44 · 460 阅读 · 0 评论 -
JavaScript全解析——express
■而我们接收到token后, 需要解密token, 验证是否为正确的 token 或者 过期的 token。■比如用户需要访问一些需要登陆后才能访问的接口, 就可以把登录时返回的token保存下来。a. 假设你需要请求的是 './client/views/index.html' 文件。b.你的请求地址需要书写 '/static/views/index.html'1.自动去 './client/views/index.html'iii.例子: /static/index.html。原创 2023-05-16 10:23:04 · 854 阅读 · 0 评论 -
JavaScript全解析-node介绍
■当 JS 被引入到 HTML 文件中, 放在浏览器中执行的时候 (JS 的组成: BOM + DOM + ECMAScript)iii.回调函数: 必填, 接受两个参数, 第一个为报错信息, 第二个为正确读取到的文件的内容(字符串格式的)○因为他是直接执行 JS 文件, 没有一个统一的 html 文件去引入所有的 JS 文件。1.符串格式的内容, 将这段文本直接写入到指定文件中, 并覆盖这个文件之前的所有内容。■ 相对地址: 你打开的文件地址是什么, 那么相对地址就按照打开文件的地址进行拼接。原创 2023-05-15 09:59:11 · 702 阅读 · 0 评论 -
JavaScript全解析-数据操作
●语法: const 变量名 = new Proxy(要代理的原始对象,{ 配置项 })○Object.defineProperty(给那一个对象,属性名,{配置项})●如果劫持过后 , 后期动态插入的数据不好使(也就的不能再被劫持到)●这个是官方给的说法(名字) , 但是在社区里大家还是都加数据劫持。-> 选填是 true 表示允许被重写 , 也就是可以被修改。●复刻出来的数据不允许修改 , 值是从原始数据中获取的。-> get属性的返回值就是这个属性的值。●刚刚我们的数据劫持是劫持出一个新的来。原创 2023-05-15 09:49:44 · 365 阅读 · 0 评论 -
JavaScript全解析-设计模式
● 模块模式可以指定类想暴露的属性和方法,并且不会污染全局。=> 如果折扣有很多呢?●也是设计模式的一种 , 也是相对来说用的比较多的一种。=> 折扣种类 8折 7折 300-20 500-50。●为了解决一类问题给出的 简洁而优化 的解决方案。●设计模式不是规则,是程序员开发过程中的经验总结。●利用闭包和自执行函数结合的方式实现。=> 我们需要在标签上记录一个属性。=> 需要根据折扣计算最终价格。=> 能记录到我们的各种折扣。○值存储的就是操作后的结果。●要是设计模式中的一种。○减少if条件的判断。原创 2023-05-15 09:47:04 · 266 阅读 · 0 评论 -
JavaScript全解析-面向对象
只要是一个单纯的对象数据类型, 都是内置构造函数 Object 的实例。注意: 如果目标对象与源对象具有相同的 key,则目标对象中的属性将被源对象中的属性覆盖,后面的源对象的属性将类似地覆盖前面的源对象的属性。●JS 内有一个内置构造函数叫做 Object, 只要是单纯的对象, 都是 Object 的实例。●Function.prototype 是一个天生的对象数据类型, 并且是一个单纯的对象数据类型。●Person.prototype 是一个天生的对象数据类型, 并且是一个单纯的对象数据类型。原创 2023-05-12 10:41:59 · 319 阅读 · 0 评论 -
JavaScript全解析-闭包
○把你书写在函数体内的代码, 全部以字符串的形式存储在这存储空间中, 此时不会解析变量。○2、进行函数内与解析的时候, 给 a 变量赋值为一个 函数体。○1、进行函数内预解析的时候, 给 a 变量赋值为一个 函数体。○2、进行形参赋值的时候, 给 a 变量赋值为 100。■此时给 a 变量赋值的函数体就会把 100 覆盖。■此时给 a 变量赋值的 100 就会把函数体覆盖。●我们书写一个函数, 但是不会执行函数体内的代码。●使用(调用)函数, 会把函数体内的代码执行。原创 2023-05-12 10:39:55 · 561 阅读 · 0 评论 -
面向对象的概念
●我们以后的编程思想是,每一个功能,都先创造一个 面馆,这个 面馆 能帮我们作出一个 面(完成这个功能的对象),然后用 面馆 创造出一个 面,我们只要等到结果就好了。■动态语言是在运行时确定数据类型的语言。■JavaScript能够动态修改对象的属性,没有办法在编译的时候知道变量的类型,只有在运行的时候才能确定。●重点: 在函数的 prototype 里面存储的内容,不是给函数使用的,是给函数的每一个实例化对象使用的。○在面向过程的时候,我们要关注每一个元素,每一个元素之间的关系,顺序,。原创 2023-05-12 10:37:41 · 1517 阅读 · 0 评论 -
ES6定义变量与箭头函数
○也就是书写在箭头函数的外面那个函数 this 是谁, 箭头函数内的 this 就是谁。○function fn() {} 这样的方式是声明式函数,不能用来定义箭头函数。○当的代码只有一句话的时候, 可以省略大括号不写, 并且会自动返回这一句话的结果。○用const声明的变量的是不能修改的,也就是说一经声明就不允许修改。○但是 用const声明的对象,对象里面的属性的值是可以修改的。○当你的形参只有一个的时候, 可以不写小括号。●声明式函数的定义方式是不能定义箭头函数的。原创 2023-05-10 14:22:09 · 687 阅读 · 0 评论 -
ES6函数中参数的默认值和解构赋值
●ES6允许按照一定的模式,从数组或对象中提取值,给变量进行赋值,称为解构赋值。●书写: 直接在书写形参的时候, 以赋值符号(=) 给形参设置默认值就可以了。●函数的默认值是给函数的形参设置一个默认值, 当你没有传递实参的时候来使用。●给函数的形参设置一个默认值, 当你没有传递实参的时候, 使用默认值。●语法:var {键名1, 键名2, 键名3, ... } = 对象。●语法:var [变量1,变量2, 变量3,....] = 数组。●会按照数组的索引依次把数组中的数据拿出来,赋值给对应的变量。原创 2023-05-10 14:21:54 · 924 阅读 · 1 评论 -
ES6扩展运算符
●当这个符号书写在函数的形参位置的时候, 叫做合并运算。●扩展运算符也是ES6 的新语法,主要有两个功能。○如果是展开对象, 就是去掉对象的 {}●从当前形参位置开始获取实参, 直到末尾。○果是展开数组, 就是去掉数组的 []●注意: 合并运算符一定要写在最后一位。●可以 展开对象, 或者 展开数组。●该语法主要操作的是数组和对象。原创 2023-05-10 14:21:01 · 55 阅读 · 0 评论 -
Map和Set数据结构和ES6模块化语法
语法: var m = new Map([ [ key, value ], [ key, value ] ])○语法: 数据结构.forEach(function (value, key, origin) {})○语法: 数据结构.forEach(function (value, key, origin) {})●每一个 js 文件, 也不能使用任何其他 js 文件内部的变量。○每一个 js 文件, 都是一个独立的 文件作用域。○页面的完整功能, 就是由一个一个的模块来完成的。原创 2023-05-10 14:20:11 · 518 阅读 · 0 评论 -
JavaScript全解析——正则表达式
●注意: 第二次捕获是从第一次的结束位置开始向后查询, 直到最后捕获不到为止, 再下一次的时候, 又从字符串的 索引0 开始检索。●\ : 转译符号,把有意义的 符号 转换成没有意义的 字符,把没有意义的 字符 转换成有意义的 符号。●{n,m} : 前一个内容至少出现 n 次至多出现 m 次,也就是出现 n ~ m 次。●{n,} : 前一个内容至少出现 n 次,也就是出现 n ~ 正无穷 次。●. : 匹配非换行的任意字符 表示字符串中至少要有一个非换行的内容。原创 2023-05-10 14:18:25 · 592 阅读 · 0 评论 -
DOM事件(下)
○JS事件流最早要从IE和网景公司的浏览器大战说起,IE提出的是冒泡流,而网景提出的是捕获流,后来在W3C组织的统一之下,JS支持了冒泡流和捕获流,但是目前低版本的IE浏览器还是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流),所以为了能够兼容更多的浏览器,建议大家使用冒泡流。●点击子元素的时候,不管子元素有没有点击事件,只要父元素有点击事件,那么就可以触发父元素的点击事件。○当元素触发一个事件的时候,其父元素也会触发相同的事件,父元素的父元素也会触发相同的事件。原创 2023-05-08 09:04:33 · 797 阅读 · 0 评论 -
DOM事件(中)
●submit : 表单提交事件。○你点在了 10, 10 位置,那么你得到的这个事件对象里面对应的就会有这个点位的属性。●大致分为几类,浏览器事件 / 鼠标事件 / 键盘事件 / 表单事件 / 触摸事件。●也就是当你触发了一个事件以后,对该事件的一些详细的描述信息。○你点在了 0,0 位置,那么你得到的这个事件对象里面对应的就会有这个点位的属性。●每一个事件都会有一个对应的对象来描述这些信息,我们就把这个对象叫做 事件对象。●综上所述,我们以后在每一个事件里面,想获取事件对象的时候,都用兼容写法。原创 2023-05-08 09:04:18 · 612 阅读 · 0 评论 -
DOM事件(上)
在2级DOM中除了定义了一些DOM相关的操作之外还定义了一个事件模型 ,这个标准下的事件模型就是我们所说的2级DOM事件模型。○当你使用 DOM 2级 事件解绑的时候, 因为函数是一个复杂数据类型, 所以你在绑定的时候。○当你使用 DOM 2级 事件解绑的时候, 因为函数是一个复杂数据类型, 所以你在绑定的时候。●当你点击 div 的时候,两个函数都会执行,并且会按照你注册的顺序倒叙执行。(对页面元素的某种操作)●当你点击 div 的时候,两个函数都会执行,并且会按照你注册的顺序执行。原创 2023-05-08 09:02:16 · 331 阅读 · 0 评论 -
JavaScript全解析——本地存储
> 语法: window.sessionStorage.setItem(名字,值)-> 语法: window.localStorage.removeItem(名字)-> 语法: window.localStorage.setItem(名字,值)-> 注意: 只能保存字符串类型的数据,其它数据类型不能被保存。-> 注意: 只能保存字符串类型的数据,其它数据类型不能被保存。-> 注意: 保存的是字符串类型,取出来的也是字符串类型。-> 注意: 保存的是字符串类型,取出来的也是字符串类型。原创 2023-05-05 09:03:55 · 893 阅读 · 1 评论 -
JavaScript全解析——canvas 绘制变换和渐变
○语法 : 工具箱.createLinearGranient(起点x坐标, 起点y坐标, 终点x坐标, 终点y坐标)●语法 : ctx.createRadialGradient(x1, y1, r1, x2, y2, r2)●注意 : canvas 的缩放不仅仅是对内容的缩放, 更是对画布的缩放。○根据我们上面的预设, 这个红框圈出来的位置才是真实的完整渐变。●注意 : 渐变不是根据你的图形而制定的, 而是根据画布制定的。●注意 : 渐变是包含开始圆位置, 但是不包含终止圆的位置的。原创 2023-05-05 08:58:47 · 1065 阅读 · 0 评论 -
JavaScript全解析——canvas 绘制图片
贝塞尔曲线(Bezier curve)是计算机图形学中相当重要的参数曲线,它通过一个方程来描述一条曲线,根据方程的最高阶数,又分为线性贝赛尔曲线,二次贝塞尔曲线、三次贝塞尔曲线和更高阶的贝塞尔曲线。○就这样,我们继续同样的操作的,直到变成一条直线,然后我们按比例取到一个点,这个点就是曲线经过的点。○当我们比例一点点变大(从 0 到 1),就拿到了曲线中间的所有点,最终绘制出完整的曲线。●但是其实绘制的时候不需要我们来逐个点的计算, canvas 给我们提供了对应的 API。原创 2023-05-05 08:56:03 · 2182 阅读 · 1 评论 -
JavaScript基础入门全解析(下)
●只声明变量,不赋值的情况下,变量的默认值为 undefined,一般很少【直接】为某个变量赋值为 undefined。●undefined也叫未定义是比较特殊的类型,本该有个值,但是没有 ,就是undefined。○不认识小数点,遇到小数点就认为不是一个数字后面的就不检测了返回的就是点前面的整数部分。○分成两种,前置++ 和 后置++ 不管是前置还是后置,都是让自身的值+1,只能+1。●是指我们存储在内存中的数据的分类,为了方便数据的管理,将数据分成了不同的类型。原创 2023-05-05 08:49:45 · 520 阅读 · 0 评论 -
JavaScript基础入门全解析(上)
同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作。●有一套成熟的可以操作页面元素的 API,通过 DOM 可以操作页面中的元素。●有一套成熟的可以操作浏览器的 API,通过 BOM 可以操作浏览器。●JavaScript(简称js) 表示了你的页面中每一个内容如何发生变化, 有什么行为内容(行为层)●HTML 表示了你的页面内有什么,组成页面的骨架 (结构层)●CSS 表示了你的页面中每一个内容是什么样子的(样式层)JavaScript的组成。原创 2023-05-05 08:44:49 · 767 阅读 · 0 评论 -
DOM操作 - 元素操作方式(上)
●实际上就是操作元素的原生属性,只不过在js中class是一个关键字,所以我们操作原生属性改用className。●每一个元素都有一个属性叫做 classList,是一个类似数组的集合, 里面记录了元素所有的类名。●以下的所有操作属性的方式和方法, 均不操作 类名(class) 和 样式(style)●元素属性:书写在标签身上, 一个 key=value 的键值对, 叫做一条属性。●语法: 元素.classList.add('要添加的类名')○里面记录的是该元素身上所有的 data- 开头的自定义属性。原创 2023-05-04 19:55:12 · 842 阅读 · 0 评论 -
案例-字符串翻转
●JSON格式字符串: '{"name":"Jack","age":18,"gender":"男"}'○在key 和 value 以外的位置只能有 {} [] : , 不能有其它的符号。○字符串内的key和value必须要使用双引号("")包裹,纯数字和布尔值除外。●JSON 可以将 js 对象中表示的一组数据转换为字符串。○语法: JSON.stringify(js数据格式)○语法: JSON.parse(JSON数据格式)○在集合内最后一项的末尾不能有多余的逗号(,)○返回值: 转换好的数据格式。原创 2023-05-04 20:00:52 · 572 阅读 · 0 评论 -
JavaScript全解析——canvas 入门(上)
也就是说, 在描述线宽的时候, 实际上会从 0.5px 的位置绘制到 1.5px 的位置。○从坐标 ( 100, 100 ) 绘制到坐标 ( 300, 100 )○从坐标 ( 100, 100 ) 绘制到坐标 ( 300, 100 )○从坐标 ( 100, 100 ) 绘制到坐标 ( 300, 100 )所以在设置线段样式的时候, 会默认按照最后一次设置的样式来绘制所有的线段。●所以, 我们在进行 canvas 绘制内容的时候, 涉及到线段的时候。原创 2023-05-04 20:04:34 · 3318 阅读 · 0 评论 -
DOM操作-获取元素的方式
●哪怕你获取的 class 只有一个,那也是获取一组元素,只不过这一组中只有一个 DOM 元素而已。●哪怕真的只有一个这个标签名,那么也是获取一组元素,只不过这一组中只有一个 DOM 元素而已。●获取到的是一组元素,是一个长得和数组一样的数据结构,但是不是数组,是 伪数组。●因为页面中可能有多个元素的 class 名称一样,所以获取到的是一组元素。●获取到的是一组数据,也是需要用索引来获取到准确的每一个 DOM 元素。●因为页面中可能有多个元素的 标签 名称一样,所以获取到的是一组元素。原创 2023-05-04 19:40:59 · 687 阅读 · 0 评论 -
JavaScript全解析——canvas 入门(下)
●我们发现, 到现在为止, canvas 的绘制, 描边, 填充都很简单。●注意 : 填充的时候可以不进行图形闭合, 会自动闭合图形以后进行填充。●其实我们的填充和顺时针逆时针有关系, 但是不是简单的顺逆时针的问题。●这样, 就会按照我们绘制的路线, 以填充的形式出现一个封闭图形。●这是因为, 在填充的时候, 就是会一次性把所有的内容都会填充好。●这是两个矩形对接在一起, 一个是顺时针绘制, 一个是逆时针绘制。●两个正方形都是这个方向绘制的, 我们接下来把描边的线去掉。原创 2023-05-04 20:07:04 · 1354 阅读 · 0 评论