- 笔记JavaScript 核心概念箭头函数不可作为构造函数不可使用 arguments 无预加载（类似变量提升

JavaScript 核心概念

箭头函数

不可作为构造函数
不可使用 arguments
无预加载（类似变量提升）
不存在 this 或者说 this 指向定义时所在对象，而非调用对象（上级作用域）
构造函数 this 指向实例对象，普通函数谁调用指向谁

闭包

函数作为参数被传入或者作为返回值被返回，或者说函数内部创建的函数返回内部的变量。

防止内存泄漏

在不再需要使用闭包时手动解除对闭包的引用
使用模块化的方式
将包含闭包的变量赋值为 null
内部变量使用 WeakMap 或 WeakSet

文档片段插入

const frag = document.createDocumentFragment()
for (let i = 0; i < 10; i++) {
  const li = document.createElement('li')
  frag.appendChild(li)
}
document.body.appendChild(frag)

模块系统

ES Module 与 CommonJS

ES Module

静态引入 / 编译引入
语法：import / export / export default
支持 tree-shaking

CommonJS

动态引入 / 执行引入
语法：require() / module.exports

require 导入模块步骤

相对路径转换为绝对路径
查看缓存
读取文件代码，优先考虑 js（js / json 可省后缀，其他文件当作 js 处理）
包裹函数执行并缓存

模块导入方式

CommonJs: Node.js 使用
AMD: require.js - 异步调用
CMD: sea.js - 依赖就近
ES6: 现代 JavaScript 标准

export default x
import { x } from 'path'
import { x as alisaName } from 'path'
import * as all from 'path'

// 动态导入：常用于结合异步组件和 webpack 代码分割功能实现路由懒加载
const obtn = document.querySelector('#btn')
obtn.addEventListener('click', () => {
  import('url').then(mod => {})
})

Babel 配置与工具

官网：babeljs.io/

核心包说明

babel-loader

加载器，用于将 JS 代码转换为 AST 树进行语法分析和处理
构建过程中将 ES6+ 语法转换为浏览器可执行的 JS 代码

@babel/core

Babel 的核心库，提供了核心的转换功能和 API

@babel/preset-env

polyfill（补丁）的集合
支持语法解析但不支持特殊的 API（如 promise、includes）
会造成全局和原型污染

core-js

提供 JavaScript 标准库的库
包含新的 JavaScript API 和全局对象的 Polyfill 实现
用于实现浏览器中缺失的新特性

@babel/plugin-transform-runtime

减小体积，将代码中的公共辅助函数提取到单独的模块中
通过导入的方式引入以减少冗余代码
会自动引入 @babel/runtime 来提供转译所需的运行时函数和工具

babel/polyfill

集合了 core-js、regenerator（core-js 满足不了 yield 但 regenerator 库支持）
Babel 7.4 弃用了 babel-polyfill，推荐直接使用 core-js 和 regenerator

.babelrc 配置示例

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage", // 按需引入
        "corejs": 3
      }
    ],
    "@babel/preset-react" // React 项目
  ]
}

调试技巧

浏览器调试基础

JS 利用率查看

浏览器 F12 打开控制台 → Ctrl+Shift+P → 搜索 coverage

调试方法

debugger - 阻塞
alert - 阻塞
console 输出
断点调试
- 单步
- 多步
- 监视变量

无缓存测试：使用无痕模式

Console 控制台功能

类型：info、error、warn、debug
时间：time、timeEnd
清空：clear
表格：table
对象属性：dir（宣誓对象所有属性和方法）
组别输出：group
回放选择：$_（上一个表达式）、$0（当前选择元素）

真机调试

Chrome + Android

手机进入开发者模式
保持唤醒状态打开
USB 调试打开
数据线连接
网络保持一致
访问：chrome://inspect/#devices → inspect

白屏问题解决

检查 Chrome 是否最新版本
检查手机浏览器是否最新版本

内网穿透方案

frp
ngrok
localtunnel
webhiik.site
smee.io

移动端调试包

vConsole
Eruda Whistle

抓包工具

Charles（MAC）
Fiddler（Windows）
wireshark（跨端）
mitmproxy

开发工具快捷键

通用快捷键

Ctrl+Shift+J: 设置
Ctrl+Shift+P: 搜索命令
- 如搜索：>Cursor setting
Ctrl+I: Composer（代码重构与优化）
- 选中一段代码，告诉它"优化这段代码的性能"或"重构为函数式组件"，它会直接帮你修改
Ctrl+L: 打开 agent 聊天界面

Cursor 设置

General → Privacy Mode 隐私模式

在 agent 输入框中按 Shift+Tab 切换 Plan Mode

工作区布局

workbench.ac 找到 Workbench 选择 vertical 侧边栏布局