Superman_H的博客

Pointer Events 是现代移动端开发的输入事件标准，统一处理鼠标、触摸和触控笔输入。核心事件包括 pointerdown、pointermove、pointerup 等，支持冒泡和设备区分。关键特性包括指针捕获、多点触控识别和压力感应。典型应用场景包括：1）拖拽元素（使用 setPointerCapture），2）双指缩放（通过 pointerId 跟踪触点），3）滑动方向识别（计算移动距离差），4）长按检测（setTimeout 计时）。相比传统 Touch/Mouse 事件，Pointer E

构造函数是用于创建和初始化对象的特殊函数，通过new关键字调用。JavaScript中有内置构造函数（如Object、Array）和自定义构造函数两种类型。使用new时，引擎会：1）创建空对象；2）设置原型；3）绑定this；4）执行构造函数代码；5）返回对象。构造函数应使用大驼峰命名（Person），普通函数用小驼峰（getUser）。不使用new会导致this指向错误，严格模式下会报错。构造函数默认返回新实例对象（this），即使没有显式return语句。

JavaScript原生函数是语言内置的构造函数，用于处理不同类型的数据。主要包括基本类型相关（如String、Number）和引用类型相关（如Object、Array）的构造函数。这些函数可以两种方式使用：作为普通函数进行类型转换（如String(123)），或配合new创建封装对象（如new String("abc")）。关键区别在于前者返回基本类型值，后者返回对象类型。需要注意的是Symbol和BigInt不能使用new创建，而Array和Function可以省略new。JavaS

# history 对象history 提供与当前窗口的会话历史记录相关的 API。# 常用属性1. `length`：一个整数，表示会话历史的数目。2. `scrollRestoration`：允许 Web 应用程序在历史导航上显式地设置默认滚动恢复行为。 1. `auto`：恢复到用户已滚动到的页面上的位置。 2. `manual`：不恢复位置。3. `state`：一个任意值，表示历史堆栈顶部的状态。这是一种不必等待 popstate 事件而查看状态

# script 标签script 标签之间共享顶层对象。```html var a = 1; console.log(a); // 1```但是全局变量作用域的提升机制在这些边界中不适用：```html foo(); function foo() { console.log('foo'); }

# console.logconsole.log 会将参数转为字符串 并输出到控制台。它会在参数之间输出空格，并在输出所有参数后重新开始一行。console.debug、console.info、console.warn、console.error 与 console.log 几乎相同。在 Node 中，console.error 将其输出发送到标准错误流，而不是标准输出流。除此之外的其他函数都是 console.log 的别名。在浏览器中，这几个函数生成的输出消息前面可能会带一个图标，表示

# CommonJs (cjs)- cjs 是 Node 的模块化规范，使用 **`require`** & **`exports`** 进行导入导出- cjs 可作用于 **node** 环境 & **webpack** 环境，但不可作用浏览器- 如果前端项目在 webpack 中，也可以理解为浏览器和 Node 都支持 有些模块只支持 cjs，比如 ms，但并不影响它在前端项目中使用 ( 通过 webpack ) 但是，如果通过 cdn 的方式直接在浏览器中引入，则会出问题``

转义字符转义符号 \转义字符 \字符想用单引号包裹单引号，可以转义 \'let str = '你非常\'优秀\'';console.log(str); // 你非常'优秀'如果想显示 \，可以转义 \\let str = '你非常\\优秀\\';console.log(str); // 你非常\优秀\一些规定好的转义字符：\n 换行；\t 制表符；\r 回车正则表达式正则表达式是字符串的一种匹配模式，为简化字符串操作而生说白了就是检索字符串中特定字符的规则正则

# ESModule- ESModule (esm) 是 ES6 的模块化方案，使用 **`import`** & **`export`** 进行导入导出- **Node** 及**浏览器**均支持 esm - 在 .html 文件中应用模块化，需要给 script 标签设置 `type="module"` - Node 默认支持 cjs 模块化规范。若想 Node 支持 esm，需要： ① 确保 Node 版本 >= 14.15.1 ② 在 package.json 的根节

# ClassES6 引入了 Class 这个概念，通过关键字 `class`，可以定义类关键字 `class` 可以看作是构造函数的语法糖，`class` 的绝大部分功能都能通过构造函数实现## ES5 的构造函数```js// 通过构造函数设置实例属性function Person(name) { this.name = name;};// 为原型 Person.prototype 添加方法, 使得所有实例共享此方法Person.prototype.sho

# async 函数> #### `async` 函数的返回值1. `return` Promise 实例```jsasync function show() { return Promise.resolve("ok");}let p1 = show();console.log("p1", p1); // p1 Promise { } —— 同步获取 (获取失败)setTimeout(() => { console.log("p1", p1)

Promise 是一套处理异步场景的规范，能避免回调地狱的产生，使代码更清晰简洁。这套规范最早诞生于前端社区，并被命名为 Promise A+ 规范。参数executor称为执行器，为一回调函数调用resolve，Promise 实例的状态会从 pending 变为 fulfilled；调用reject，Promise 实例的状态会从 pending 变为 rejected；如果不调用resolvereject，则 Promise 实例的状态将一直是 pending。调用resolve。

Generator 生成器执行 Generator 函数会返回一个迭代器对象。就是说，Generator 函数是一个生成迭代器对象的函数跟普通函数的区别关键字 function 与函数名之间有一个星号 *函数体内部使用 yield 表达式，定义不同的内部状态Generator 函数不能和 new 一起使用，会报错使用方法生成器的定义关键字 function 与 函数名 之间有一个星号 *function* show() { yield '语句1'; yield

Proxy 用于修改某些操作的默认行为，属于一种 “元编程”，即对编程语言进行编程通俗地讲，就是通过 Proxy 代理扩展了对象、方法的一些功能ES6 提供 Proxy 构造函数，用来生成 Proxy 实例接收 2 个参数：① ：代理对象（目标对象）② ：配置对象（拦截对象），用来定制拦截行为如果没有设置任何拦截，那就相当于直接操作原对象上面代码中， 是一个空对象，没有任何拦截效果，∴ 访问 就等同于访问 拦截 Object接收 3 个参数：① ：代理对象（目标对象），就是构造函数

# 进程与线程> #### 进程进程是操作系统进行任务调度和资源分配的基本单位。- 进程是操作系统对程序的一种抽象，它包含了程序执行所需的资源和状态信息。- 操作系统可以同时运行多个进程，每个进程都是相互独立的执行环境。- 进程之间通过进程间通信（IPC，Interprocess Communication）机制来进行交互和数据传输。> #### 线程线程是进程内的执行单元，是操作系统调度的最小执行单位。- 一个进程至少有一个线程。在进程开启后会自动

类似于数组 Array，但 Set 里面不能有重复值、且 Set 元素的 [下标] & [值] 是一样的初始化实例语法：，接收 1 个数组参数可以通过 Set 实例的 属性获取集合的长度常用方法只接收 1 个参数，后面的参数会被忽略执行 返回 Set 实例自身，所以可以 [链式调用]只接收 1 个参数，后面的参数会被忽略返回 -删除成功、-删除失败返回 -有、-无不需要参数、没有返回值遍历元素可以发现，set 的 [下

# SymbolSymbol (符号) 是 ES6 新增的**基本数据类型**。- 符号实例是唯一、不可变的。- 符号的用途是确保对象属性使用唯一标识符，不会发生属性冲突的危险。```jsconst symbol = Symbol();console.log("type", typeof symbol); // type symbolconsole.log("value", symbol); // value Symbol()```# 基本使用调用

作用于数组展开数组、类数组对象let arr = [1, 2, 3];console.log(...arr); // 1 2 3let arrLike = document.querySelectorAll('div');console.log(...arrLike); // <div></div> <div></div> <div></div>进而可以将 [类数组] 转成 [数组]'hello'.split(''

数字进制新增二进制数值二进制：0b 作为前缀let a = 0b10; // 2如果后面写的数字不符合二进制，就报错let a = 0b12; // 报错ES5 的其他进制八进制：0o 为前缀的数值let a = 0O666; // 八进制十六进制：0x 为前缀的数值let a = 0Xccc; // 十六进制Number 新增方法Number.parseInt()ES5 时，是挂载在 window 身上的；ES6 是挂载在 Number 身上所以，现

作用于数组解构赋值简介解构赋值：按照一定的模式，从数组 / 对象中提取值，并对变量进行赋值let [a, b, c] = [12, 5, 6]; // 左边的结构 = 右边的结构console.log(a, b, c); // 12 5 6本质上，这种写法属于 “模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值变量 = 值let [a, b, c] = [12, [5, 6]];console.log(a, b, c); // 12 [5, 6] undefined

# window 对象BOM（Browser Object Model，浏览器对象模型）提供与浏览器相关的 API。BOM 的核心是 window 对象，表示浏览器的实例。window 对象在浏览器中有两重身份，一个是 ECMAScript 中的 Global 对象，另一个就是浏览器窗口的 JS 接口。这意味着网页中定义的所有对象、变量和函数都以 window 作为其 Global 对象，都可以访问其上定义的 `parseInt()` 等全局方法。因为 window 对象的属性在全局作用域中有

# 事件的使用## 绑定事件1. DOM0 写法：`dom.on事件类型 = listener`2. DOM2 写法：`dom.addEventListener('事件类型', listener, 配置对象)``listener` 可以被指定为一个回调函数 / 对象（其 `handleEvent()` 方法用作回调函数）。例如，一个可同时处理 `fullscreenchange` 和 `fullscreenerror` 事件的函数如下：```jsfunction e

国际标准中，已全面使用 UTC 时间，而不再使用 GMT 时间。（但还是会以 GMT 的形式书写出来）ISO 8601 标准规定，建议以表示时间。GMT、UTC、ISO 8601 表示的都是零时区的时间。Unix 时间戳 (Unix Timestamp)：UTC 时间 1970 年 1 月 1 日 0 时 0 分 0 秒 ~ 指定时间之间的毫秒数 (秒数)Unix 时间戳这个概念最早由 Unix 系统提出程序对时间的计算、存储务必使用 UTC 时间或时间戳。

Math 对象Math 对象是 JS 的内置对象，可以直接使用console.log(typeof Math) // object常用属性 & 方法1. Math.PI：圆周率 3.1415926535897932. Math.random()：[0, 1) 之间的随机数获取 [x, y) 之间的数值：Math.random() * (y-x) + x3. Math.min(a,b)：获取最小参数值如果传入的参数不是 number 类型，会发生隐式转换，转不了也就

使用定时器[window.]setTimeout() 延迟定时器[window.]setInterval() 循环定时器（间隔器）这两个是 window 的方法，所以 this → window 对象，window. 可以不写第 1 个参数匿名函数setTimeout(function () { console.log('superman')}, 2000)有名函数setTimeout(function out() { console.log('super

pseudoElt获取的属性名要符合标识符规范。所以有连字符的属性名要写成小驼峰内写的是字符串，所以可以保留连字符。

节点的操作获取节点parentNode：父节点（最高的父节点为 #document）childNodes：所有子节点，返回类数组firstChild：第一个子节点lastChild：最后一个子节点nextSibling：下一个兄弟节点previousSibling：上一个兄弟节点兼容所有浏览器<ul id="box"> <li id="con1"></li> <li id="con2"></li>

DOM 简介DOM (Document Object Model) 描绘了一个层次化的节点树，以添加、删除、修改页面的内容。这使 JavaScript 通过操作节点来操作 HTML，降低了编程难度。DOM 提供了丰富的 API：获取元素、CSS样式、事件、运动、元素尺寸位置、节点操作…DOM 也叫 DOM 树，由多个 DOM 节点组成浏览器显示页面：浏览器解析 HTML，生成 HTML 树（DOM 树）浏览器解析 CSS，生成 CSS 树DOM 树和 CSS 树合并，生成渲染树浏览器根据

字符串ES5 的字符串处理ES5 的字符串模板输出通常是使用 + 拼接let name = "superman";let age = 18;let str = "姓名：" + name + "；年龄：" + age + "岁";console.log(str); // 姓名：superman；年龄：18岁ES6 的字符串模版用 `` 括住，可以随意换行表示多行字符串时，所有的空格和缩进都会被保留在输出之中模板字符串中嵌入变量时，需要将变量名写在 ${} 内大括号内部可以放入任意

字符串的创建字面量创建方式var str = 'superman'console.log(typeof str) // string构造函数创建方式var str = new String('superman')console.log(typeof str) // object字符串属性字符串是特殊的数组，都具有 length 属性，也可以像数组一样使用下标来获取字符var str = 'superman'console.log(str.length) // 8consol

# forEach`arr.forEach(callback[, thisObj])` 用于遍历数组：1. `callback`：`(item, index, arr) => undefined` `item`-当前元素、`index`-当前下标、`arr`-当前数组2. `thisObj`：`callback` 的 `this` 指向（箭头函数不生效 `thisObj` 配置项）- 返回值：`undefined````jsconst arr = ['a', 'b',

标有 `-` 表示会改变原数组；标有 `*` 表示字符串也有同名方法# unshift 头插-- 在数组前面添加 1 ~ n 个数据 ( 1 ~ n 个参数 )- 返回值：添加数据后的 `length`- 会改变原数组```jsconst arr = [1, 2, 3];const result = arr.unshift(0);console.log(result); // 4console.log(arr); // [0, 1, 2, 3]

# 数组的创建## 字面量创建数组```jsconst arr = [12, 34, 45, 56, 67];```数组的元素可以为任意类型的数据：```jsconst arr = [1, 'superman', true, undefined, null];```注意：如果 `,` 之间没有写入数据，默认为 `empty`，输出为 `undefined`。```jsconst arr = [1, , 2];console.log(arr); // [1, empty,

# this 指向在全局环境中，this 指向顶层对象；在函数中，this 的指向取决于函数的**调用方式**。1. 直接调用：this 指向顶层对象。```jsvar name = 'superman';function showName() { console.log(this); // Window{window: Window, self: Window, document: document, …} console.log(this.name); // supe

# JSON 简介JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于阅读和编写，并且容易被多种编程语言解析和生成。编写 demo.json 文件：```json{ "name": "John", "age": 30, "isMarried": false, "hobbies": ["reading", "hiking", "photography"], "address": { "city"

访问实例的属性时，先查看该实例自己的属性；若还是没有，则查看其原型对象的原型对象的属性；思路：因为实例可以获取原型链上的数据，这样我们可以把父类的实例作为子类的构造函数的原型。思路：复制父类实例的属性给子类实例，解决原型链继承中的 “引用值共享问题”。可以发现，只要我们更新原型链上的某一节点，就会影响该节点以下的所有实例。通过构造函数继承，继承父类的属性，并解决 “引用值共享问题”。如果我们给实例重写了一些的同名属性，会覆盖其原型对象的属性。通过原型链继承，继承父类的原型链的属性。

# 原型 `prototype`- 原型 `prototype` 是**函数**的一个属性，属性值是一个对象。- 原型 `prototype` 又有一个属性 `constructor`，属性值是函数本身。- 箭头函数没有原型 `prototype`。# 隐式原型 `__proto__`- 隐式原型 `__proto__` 是实例的一个属性，属性值为其构造函数的原型 `prototype`。# (隐式)原型与实例我们可以把每个实例都有的属性 / 方法，设置在其隐式原型

# ES6 新增语法## 简洁语法> #### 一般写法```jsconst myName = "superman", // 定义变量 myAge = 18;// 定义函数function showName() { console.log(this.myName);}const obj = { myName: myName, myAge: myAge, showName: showName, showAge: function ()

# object 对象对象就是一组属性的集合，属性包括属性名和属性值。属性名也叫键名，属性值也叫键值，所以对象的属性也叫**键值对**```jslet superman = { name: "superman", age: 21, eat: function () { console.log("I eat something"); },};```- 对象的类型是引用类型 object```jslet superman = {};c

# 作用域作用域可以分为以下几种类型：1. 全局作用域（Global Scope）：全局作用域是整个程序中都可访问的最外层作用域。 在全局作用域中声明的变量为全局变量，可以被程序中的任何代码访问。2. 函数作用域（Function Scope）：函数作用域是在函数内部声明的变量的可访问范围。 在函数作用域中声明的变量为局部变量，只能在函数内部访问。3. 块级作用域（Block Scope）：块级作用域是在代码块（由 `{ }` 包裹的代码片段）内部声明的变量的可访问范围。