前端JavaScript（JS）
关注
分享
扫一扫
文章平均质量分 87
wincheshe
秋天，黄叶坠地，凉风有信。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
JavaScript—— 八种 高频的继承方案（寄生组合继承，ES6类继承）
JavaScript八种常用的继承方案文章目录JavaScript八种常用的继承方案1、原型链继承2、借用构造函数继承3、组合继承4、原型式继承5、寄生式继承6、寄生组合式继承7、混入方式继承多个对象8、ES6类继承extends在常用七种继承方案的基础之上增加了ES6的类继承，所以现在变成八种啦。1、原型链继承构造函数、原型和实例之间的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个原型对象的指针。继承的本质就是复制，即重写原型对象，代之以一个新类型的实原创 2022-03-31 16:52:13 · 308 阅读 · 0 评论 -
JS引擎执行顺序 --- 事件循环（Event Loop）彻底搞懂 Event Loop 与 宏任务，微任务之间的关系
文章目录事件循环：微任务和宏任务事件循环用例 1：拆分 CPU 过载任务用例 2：进度指示用例 3：在事件之后做一些事情宏任务和微任务总结事件循环：微任务和宏任务浏览器中 JavaScript 的执行流程和 Node.js 中的流程都是基于 事件循环 的。理解事件循环的工作方式对于代码优化很重要，有时对于正确的架构也很重要。在本章中，我们首先介绍事件循环工作方式的理论细节，然后介绍该知识的实际应用。事件循环事件循环 的概念非常简单。它是一个在 JavaScript 引擎等待任务，执行任务和进入休原创 2022-03-13 17:03:55 · 454 阅读 · 0 评论 -
脚本：async，defer属性，让浏览器异步加载，解决脚本阻塞渲染问题
文章目录脚本：async，deferdeferasync动态脚本总结脚本：async，defer现代的网站中，脚本往往比 HTML 更“重”：它们的大小通常更大，处理时间也更长。当浏览器加载 HTML 时遇到 <script>...</script> 标签，浏览器就不能继续构建 DOM。它必须立刻执行此脚本。对于外部脚本 <script src="..."></script> 也是一样的：浏览器必须等脚本下载完，并执行结束，之后才能继续处理剩余的页面。原创 2022-03-13 16:56:43 · 2489 阅读 · 0 评论 -
DOM深入学习 --- 浏览器页面生命周期：DOMContentLoaded，load（七）
文章目录页面生命周期：DOMContentLoaded，load，beforeunload，unloadDOMContentLoaded)DOMContentLoaded 和脚本DOMContentLoaded 和样式浏览器内建的自动填充window.onloadwindow.onunloadwindow.onbeforeunloadreadyState总结页面生命周期：DOMContentLoaded，load，beforeunload，unloadHTML 页面的生命周期包含三个重要事件：DOM原创 2022-03-12 17:35:28 · 2877 阅读 · 0 评论 -
DOM深入学习 --- 聚焦：focus / blur ，foucs / blur 委托的实现，tabindex中任何元素都可聚焦（六）
文章目录聚焦：focus/blurfocus/blur 事件focus/blur 方法允许在任何元素上聚焦：tabindexfocus/blur 委托总结聚焦：focus/blur当用户点击某个元素或使用键盘上的 Tab 键选中时，该元素将会获得聚焦（focus）。还有一个 HTML 特性（attribute）autofocus 可以让焦点在网页加载时默认落在一个元素上，此外还有其它途径可以获得焦点。聚焦到一个元素通常意味着：“准备在此处接受数据”，所以，这正是我们可以运行代码以初始化所需功能的时刻。原创 2022-03-11 19:51:36 · 3023 阅读 · 0 评论 -
DOM深入学习 --- 表单属性和方法（五）
表单属性和方法表单（form）以及例如 <input> 的控件（control）元素有许多特殊的属性和事件。当我们学习了这些相关内容后，处理表单会变得更加方便。导航：表单和元素文档中的表单是特殊集合 document.forms 的成员。这就是所谓的“命名的集合”：既是被命名了的，也是有序的。我们既可以使用名字，也可以使用在文档中的编号来获取表单。document.forms.my - name="my" 的表单document.forms[0] - 文档中的第一个表单当我们有原创 2022-03-11 19:43:39 · 507 阅读 · 0 评论 -
DOM深入学习 --- 创建自定义事件（四）
创建自定义事件我们不仅可以分配事件处理程序，还可以从 JavaScript 生成事件。自定义事件可用于创建“图形组件”。例如，我们自己的基于 JavaScript 的菜单的根元素可能会触发 open（打开菜单），select（有一项被选中）等事件来告诉菜单发生了什么。另一个代码可能会监听事件，并观察菜单发生了什么。我们不仅可以生成出于自身目的而创建的全新事件，还可以生成例如 click 和 mousedown 等内建事件。这可能会有助于自动化测试。事件构造器内建事件类形成一个层次结构（hierar原创 2022-03-10 17:27:33 · 1048 阅读 · 0 评论 -
DOM深入学习 --- 浏览器默认行为（三）
浏览器默认行为许多事件会自动触发浏览器执行某些行为。例如：点击一个链接 —— 触发导航（navigation）到该 URL。点击表单的提交按钮 —— 触发提交到服务器的行为。在文本上按下鼠标按钮并移动 —— 选中文本。如果我们使用 JavaScript 处理一个事件，那么我们通常不希望发生相应的浏览器行为。而是想要实现其他行为进行替代。阻止浏览器行为有两种方式来告诉浏览器我们不希望它执行默认行为：主流的方式是使用 event 对象。有一个 event.preventDefault()原创 2022-03-10 17:15:27 · 1517 阅读 · 0 评论 -
DOM深入学习 --- DOM 树介绍，如何遍历 DOM 树节点（一）
DOM 树HTML 文档的主干是标签（tag）。根据文档对象模型（DOM），每个 HTML 标签都是一个对象。嵌套的标签是闭合标签的“子标签（children）”。标签内的文本也是一个对象。所有这些对象都可以通过 JavaScript 来访问，我们可以使用它们来修改页面。例如，document.body 是表示 <body> 标签的对象。运行这段代码会使 <body> 保持 3 秒红色状态:document.body.style.background = 'red'; /原创 2022-03-09 17:44:10 · 3999 阅读 · 0 评论 -
DOM深入学习 --- 浏览器事件简介（二）
浏览器事件简介事件 是某事发生的信号。所有的 DOM 节点都生成这样的信号（但事件不仅限于 DOM）。这是最有用的 DOM 事件的列表，你可以浏览一下：鼠标事件：click —— 当鼠标点击一个元素时（触摸屏设备会在点击时生成）。contextmenu —— 当鼠标右键点击一个元素时。mouseover / mouseout —— 当鼠标指针移入/离开一个元素时。mousedown / mouseup —— 当在元素上按下/释放鼠标按钮时。mousemove —— 当鼠标移动时。键盘事原创 2022-03-09 17:33:53 · 623 阅读 · 0 评论 -
（有趣的JS特性）Reference Type -- 讲述为什么通过小数点方式调用的对象方法可以绑定正确的 “this”
Reference Type深入的语言特性本文所讲的是一个高阶主题，能帮你更好地理解一些边缘情况。这仅是锦上添花。许多经验丰富的的开发者不甚了了也过得不错。如果你想了解代码运行的本质，那就继续读下去吧。一个动态执行的方法调用可能会丢失 this。例如：let user = { name: "John", hi() { alert(this.name); }, bye() { alert("Bye"); }};user.hi(); // 正常运行// 现在让我们基于 na原创 2022-03-08 17:50:27 · 276 阅读 · 0 评论 -
柯里化函数（Currying），什么是柯里化，为什么要进行柯里化，高级柯里化函数的实现
柯里化（Currying）柯里化（Currying）是一种关于函数的高阶技术。它不仅被用于 JavaScript，还被用于其他编程语言。柯里化是一种函数的转换，它是指将一个函数从可调用的 f(a, b, c) 转换为可调用的 f(a)(b)(c)。柯里化不会调用函数。它只是对函数进行转换。让我们先来看一个例子，以更好地理解我们正在讲的内容，然后再进行一个实际应用。我们将创建一个辅助函数 curry(f)，该函数将对两个参数的函数 f 执行柯里化。换句话说，对于两个参数的函数 f(a, b) 执行原创 2022-03-08 17:43:25 · 23117 阅读 · 6 评论 -
Vue3.x 数据响应式基础，Proxy代理模式 和 Reflect（映射），数据代理，捕获，拦截（三）
Proxy 和 Reflect一个 Proxy 对象包装另一个对象并拦截诸如读取/写入属性和其他操作，可以选择自行处理它们，或者透明地允许该对象处理它们。Proxy 被用于了许多库和某些浏览器框架。在本文中，我们将看到许多实际应用。Proxy语法：let proxy = new Proxy(target, handler)target —— 是要包装的对象，可以是任何东西，包括函数。handler —— 代理配置：带有“捕捉器”（“traps”，即拦截操作的方法）的对象。比如 get 捕捉原创 2022-03-07 20:58:31 · 1032 阅读 · 0 评论 -
Proxy 和 Reflect深入，Reflect（映射），Proxy的局限性，Reflect搭配Proxy使用（二）
ReflectReflect 是一个内建对象，可简化 Proxy 的创建。前面所讲过的内部方法，例如 [[Get]] 和 [[Set]] 等，都只是规范性的，不能直接调用。Reflect 对象使调用这些内部方法成为了可能。它的方法是内部方法的最小包装。以下是执行相同操作和 Reflect 调用的示例：操作Reflect 调用内部方法obj[prop]Reflect.get(obj, prop)[[Get]]obj[prop] = valueReflect.set(原创 2022-03-07 19:53:24 · 734 阅读 · 0 评论 -
Proxy 和 Reflect深入学习，数据代理，数据拦截，数据捕获，数据响应式原理（一）
Proxy 和 Reflect一个 Proxy 对象包装另一个对象并拦截诸如读取/写入属性和其他操作，可以选择自行处理它们，或者透明地允许该对象处理它们。Proxy 被用于了许多库和某些浏览器框架。在本文中，我们将看到许多实际应用。Proxy语法：let proxy = new Proxy(target, handler)target —— 是要包装的对象，可以是任何东西，包括函数。handler —— 代理配置：带有“捕捉器”（“traps”，即拦截操作的方法）的对象。比如 get 捕捉原创 2022-03-07 17:26:09 · 451 阅读 · 0 评论 -
JavaScript（JS）模块化开发，什么是动态导入？使用import（）表达式，异步动态导入模块使用（三）
动态导入我们在前面章节中介绍的导出和导入语句称为“静态”导入。语法非常简单且严格。首先，我们不能动态生成 import 的任何参数。模块路径必须是原始类型字符串，不能是函数调用，下面这样的 import 行不通：import ... from getModuleName(); // Error, only from "string" is allowed其次，我们无法根据条件或者在运行时导入：if(...) { import ...; // Error, not allowed!}{原创 2022-03-06 16:10:56 · 6011 阅读 · 2 评论 -
JavaScript（JS）模块化开发学习，导出导入的多种方式，默认导出，重新导出，（二）
导出和导入导出（export）和导入（import）指令有几种语法变体。在上一节，我们看到了一个简单的用法，现在让我们来探索更多示例吧。在声明前导出我们可以通过在声明之前放置 export 来标记任意声明为导出，无论声明的是变量，函数还是类都可以。例如，这里的所有导出均有效：// 导出数组export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];// 导出 const 声明的变量e原创 2022-03-06 15:58:11 · 4464 阅读 · 3 评论 -
JavaScript（JS）模块（Module）化开发，什么是模块？模块核心功能，浏览器特定模块功能（一）
模块 (Module) 简介随着我们的应用越来越大，我们想要将其拆分成多个文件，即所谓的“模块（module）”。一个模块可以包含用于特定目的的类或函数库。很长一段时间，JavaScript 都没有语言级（language-level）的模块语法。这不是一个问题，因为最初的脚本又小又简单，所以没必要将其模块化。但是最终脚本变得越来越复杂，因此社区发明了许多种方法来将代码组织到模块中，使用特殊的库按需加载模块。列举一些（出于历史原因）：AMD —— 最古老的模块系统之一，最初由 require.j原创 2022-03-06 12:32:38 · 1161 阅读 · 0 评论 -
JavaScript（JS） 函数进阶内容 --- “偏函数（partial）”，什么是偏函数，带你快速了解偏函数，及函数绑定
函数绑定当将对象方法作为回调进行传递，例如传递给 setTimeout，这儿会存在一个常见的问题：“丢失 this”。在本章中，我们会学习如何去解决这个问题。丢失 “this”我们已经看到了丢失 this 的例子。一旦方法被传递到与对象分开的某个地方 —— this 就丢失。下面是使用 setTimeout 时 this 是如何丢失的：let user = { firstName: "John", sayHi() { alert(`Hello, ${this.firstName}原创 2022-03-03 21:28:34 · 2030 阅读 · 1 评论 -
JavaScript（JS）去除字符空白的---“trim”，“trimStart（Left）”，“trimEnd（Right）”方法
String.prototype.trimRight()trimEnd() 方法从一个字符串的末端移除空白字符。不影响原字符trimRight() 是这个方法的别名。const greeting = ' Hello world! ';console.log(greeting);// expected output: " Hello world! ";console.log(greeting.trimEnd());// expected output: " Hello w原创 2022-03-02 19:25:58 · 1066 阅读 · 0 评论 -
JavaScript（JS）错误处理（一） “try...catch”，“try...catch...finally”，“throw”抛出自定义Error，全局错误处理
错误处理，“try…catch”不管你多么精通编程，有时我们的脚本总还是会出现错误。可能是因为我们的编写出错，或是与预期不同的用户输入，或是错误的服务端响应以及其他数千种原因。通常，如果发生错误，脚本就会“死亡”（立即停止），并在控制台将错误打印出来。但是有一种语法结构 try...catch，它使我们可以“捕获（catch）”错误，因此脚本可以执行更合理的操作，而不是死掉。“try…catch” 语法try...catch 结构由两部分组成：try 和 catch：try { // 代码原创 2022-03-01 10:09:54 · 3029 阅读 · 0 评论 -
JavaScript 错误处理（二）自定义Error，拓展Error，包装异常技术
自定义 Error，扩展 Error当我们在开发某些东西时，经常会需要我们自己的 error 类来反映在我们的任务中可能出错的特定任务。对于网络操作中的 error，我们需要 HttpError，对于数据库操作中的 error，我们需要 DbError，对于搜索操作中的 error，我们需要 NotFoundError，等等。我们自定义的 error 应该支持基本的 error 的属性，例如 message，name，并且最好还有 stack。但是它们也可能会有其他属于它们自己的属性，例如，HttpEr原创 2022-03-01 10:06:30 · 2029 阅读 · 0 评论 -
JavaScript（JS）对象属性配置（一）--- 属性标志和属性描述符
属性标志和属性描述符我们知道，对象可以存储属性。到目前为止，属性对我们来说只是一个简单的“键值”对。但对象属性实际上是更灵活且更强大的东西。在本章中，我们将学习其他配置选项，在下一章中，我们将学习如何将它们无形地转换为 getter/setter 函数。属性标志对象属性（properties），除 value 外，还有三个特殊的特性（attributes），也就是所谓的“标志”：writable — 如果为 true，则值可以被修改，否则它是只可读的。enumerable — 如果为 tru原创 2022-03-01 09:58:10 · 766 阅读 · 0 评论 -
JavaScript（JS）对象属性配置（二）--- 属性的 getter 和 setter
属性的 getter 和 setter有两种类型的对象属性。第一种是 数据属性。我们已经知道如何使用它们了。到目前为止，我们使用过的所有属性都是数据属性。第二种类型的属性是新东西。它是 访问器属性（accessor properties）。它们本质上是用于获取和设置值的函数，但从外部代码来看就像常规属性。getter 和 setter访问器属性由 “getter” 和 “setter” 方法表示。在对象字面量中，它们用 get 和 set 表示：let obj = { get propNam原创 2022-03-01 10:01:09 · 1046 阅读 · 0 评论 -
javascript（JS） --- 浅拷贝和深拷贝 --- 带你深入手写一个深拷贝函数
浅拷贝与深拷贝浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。赋值和深/浅拷贝的区别这三者的区别如下，不过比较的前提都是针对引用类型：当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。原创 2022-02-25 19:51:18 · 398 阅读 · 0 评论 -
javascript（JS）高级进阶（七）函数装饰器模式和转发调用，call/apply，节流，防抖装饰器
装饰器模式和转发，call/applyJavaScript 在处理函数时提供了非凡的灵活性。它们可以被传递，用作对象，现在我们将看到如何在它们之间 转发（forward） 调用并 装饰（decorate） 它们。透明缓存假设我们有一个 CPU 重负载的函数 slow(x)，但它的结果是稳定的。换句话说，对于相同的 x，它总是返回相同的结果。如果经常调用该函数，我们可能希望将结果缓存（记住）下来，以避免在重新计算上花费额外的时间。但是我们不是将这个功能添加到 slow() 中，而是创建一个包装器（w原创 2022-02-24 22:56:32 · 783 阅读 · 0 评论 -
javascript（JS）---立即执行函数（immediately-invoked function expressions，IIFE）
IIFE在之前，JavaScript 中只有 var 这一种声明变量的方式，并且这种方式声明的变量没有块级作用域，程序员们就发明了一种模仿块级作用域的方法。这种方法被称为“立即调用函数表达式”（immediately-invoked function expressions，IIFE）。如今，我们不应该再使用 IIFE 了，但是你可以在旧脚本中找到它们。IIFE 看起来像这样：(function() { var message = "Hello"; alert(message); //原创 2022-02-24 21:38:55 · 398 阅读 · 0 评论 -
JavaScript （JS） --- 最新的八种基本的数据类型（七种原始数据类型，一种引用数据类型）
数据类型JavaScript 中的值都具有特定的类型。例如，字符串或数字。在 JavaScript 中有 8 种基本的数据类型（译注：7 种原始类型和 1 种引用类型）。在这里，我们将对它们进行大体的介绍，在下一章中，我们将详细讨论它们。我们可以将任何类型的值存入变量。例如，一个变量可以在前一刻是个字符串，下一刻就存储一个数字：// 没有错误let message = "hello";message = 123456;允许这种操作的编程语言，例如 JavaScript，被称为“动态类型”（d原创 2022-02-24 17:37:55 · 2989 阅读 · 0 评论 -
javascript（JS）高级进阶（六）作用域、执行上下文、词法环境
JS 执行上下文1、 代码位置全局代码函数（局部）代码2、全局执行上下文在执行全局代码前将window确定为全局执行上下文对全局数据进行预处理var定义的全局变量 --> undefined ，添加window 属性function 声明的全局函数 --> 赋值（fun） ，添加window方法this --> 赋值（window）开始执行全局代码3、函数执行上下文在调用函数，准备执行函数体之前，创建对应的函数执行上下文对象对局部数原创 2022-02-24 17:26:11 · 895 阅读 · 0 评论 -
javascript（JS）高级进阶（五）闭包、内存溢出、内存泄漏
闭包1、 如何产生闭包当一个嵌套的内部函数引用了嵌套的外部函数的变量（函数）时，就产生了闭包2、闭包时什么使用chorme 调试查看理解一： 闭包时嵌套的内部函数（大部分人）理解二：包含被引用变量的对象（少部分人）3、产生闭包的条件函数嵌套内部函数引用了外部函数的数据（变量/函数）闭包的作用1、 使用函数内部的变量在执行完后，仍然存活在内存中（延长了局部变量的生命周期）2、让函数外部可以操作（读写）到函数内部的（变量/函数）问题：1、函数执行完后，函数内部变量是否还原创 2022-02-24 16:45:49 · 839 阅读 · 0 评论 -
JavaScript（JS） --- JSON方法，自定义toJSON，转化JSON格式
JSON 方法，toJSON假设我们有一个复杂的对象，我们希望将其转换为字符串，以通过网络发送，或者只是为了在日志中输出它。JSON.stringifyJSON（JavaScript Object Notation）是表示值和对象的通用格式。在 RFC 4627 标准中有对其的描述。最初它是为 JavaScript 而创建的，但许多其他编程语言也有用于处理它的库。因此，当客户端使用 JavaScript 而服务器端是使用 Ruby/PHP/Java 等语言编写的时，使用 JSON 可以很容易地进行数据原创 2022-02-23 22:27:43 · 3606 阅读 · 0 评论 -
javascript（JS）Object.keys，values，entries方法，及转换对象让它能用数组的方法
Object.keys，values，entries在前面的文章中，我们认识了 map.keys()，map.values() 和 map.entries() 方法。这些方法是通用的，有一个共同的约定来将它们用于各种数据结构。如果我们创建一个我们自己的数据结构，我们也应该实现这些方法。它们支持：MapSetArray普通对象也支持类似的方法，但是语法上有一些不同。Object.keys，values，entries对于普通对象，下列这些方法是可用的：Object.keys(obj)原创 2022-02-23 16:54:00 · 877 阅读 · 0 评论 -
javascript --- 数组的常用方法备忘单
数组方法备忘单：添加/删除元素：push(...items) —— 向尾端添加元素，pop() —— 从尾端提取一个元素，shift() —— 从首端提取一个元素，unshift(...items) —— 向首端添加元素，splice(pos, deleteCount, ...items) —— 从 pos 开始删除 deleteCount 个元素，并插入 items。slice(start, end) —— 创建一个新数组，将从索引 start 到索引 end（但不包括 end）的元素复制原创 2022-02-23 14:23:43 · 248 阅读 · 0 评论 -
javascript（JS）--- 垃圾回收机制
垃圾回收对于开发者来说，JavaScript 的内存管理是自动的、无形的。我们创建的原始值、对象、函数……这一切都会占用内存。当我们不再需要某个东西时会发生什么？JavaScript 引擎如何发现它并清理它？可达性（Reachability）JavaScript 中主要的内存管理概念是 可达性。简而言之，“可达”值是那些以某种方式可访问或可用的值。它们一定是存储在内存中的。这里列出固有的可达值的基本集合，这些值明显不能被释放。比方说：当前执行的函数，它的局部变量和参数。当前嵌套调用链原创 2022-02-22 16:55:25 · 245 阅读 · 0 评论 -
javascript（JS）高级进阶（四）操作原型对象的现代方法
javascript（JS）高级进阶（四）操作原型对象的现代方法，原型简史，为什么不使用__proto__以及深拷贝对象原创 2022-02-22 16:27:09 · 360 阅读 · 0 评论 -
javascript（JS）高级进阶（三）原生原型（原型链）
javascript（JS）高级进阶（三）原生原型（原型链）原创 2022-02-22 15:31:12 · 659 阅读 · 0 评论 -
javascript（JS）高级进阶（二） 函数原型
javascript（JS）高级进阶（二） 函数原型，构造函数，constructor，显示原型，隐式原型原创 2022-02-21 23:34:34 · 1225 阅读 · 0 评论 -
javascript（JS）高级进阶（一） 原型，继承（对象原型）
javascript（JS）高级进阶（一） 原型，继承（对象原型）详解了对象如何继承原型__proto__ ,以及 Prototype ，for in 在对象中的呈现，结合案例演示原创 2022-02-21 19:40:43 · 256 阅读 · 0 评论 -
javascript（JS） 0基础快速入门 （九）（正则表达式的使用）
JS 中正则表达式的两种创建方法，字面量创建，构造函数创建，正则表达式结合字符串的运用方法，已经正则表达式的语法，量词，语法缩写等原创 2022-02-20 22:22:58 · 730 阅读 · 0 评论 -
JS、CSS --- 获取元素样式的方法，获取元素的坐标，windows坐标
JS --- 获取元素样式的方法，获取可见样式，并且获取鼠标滚动的高度，可视高度，用scrollHeight（鼠标滚动条的高度） - scrollTop（鼠标滚动距离的高度） == clientHeight（当前视口高度）表示鼠标已经滚动到底了来实现一个小案例原创 2022-02-20 21:31:33 · 1701 阅读 · 0 评论