console.log('script start');

setTimeout(() => {
  console.log('timeout A');
  // 宏任务内部产生的微任务，会在这个宏任务结束后立即执行，
  // 不会等到所有 timer 都跑完（Node 11+ 与浏览器一致）
  Promise.resolve().then(() => console.log('promise inside timeout A'));
}, 0);

setTimeout(() => console.log('timeout B'), 0);

queueMicrotask(() => console.log('queueMicrotask'));

async function bar() {
  console.log('bar sync');            // async 函数体在被调用时同步执行
}

async function foo() {
  console.log('foo sync');
  await bar();                        // await 之后的代码等价于放进 .then 回调
  console.log('after await');
}

foo();

new Promise((resolve) => {
  console.log('promise executor');    // executor 是同步执行的
  resolve();
})
  .then(() => console.log('then 1'))
  .then(() => console.log('then 2')); // 链式 then 是"一层一个微任务轮次"

console.log('script end');

script start
foo sync
bar sync
promise executor
script end
queueMicrotask
after await
then 1
then 2
timeout A
promise inside timeout A
timeout B

   ┌───────────────────────────┐
┌─>│         timers            │  setTimeout / setInterval 到期回调
│  ├───────────────────────────┤
│  │   pending callbacks       │  上一轮延迟的系统级回调（如 TCP ECONNREFUSED）
│  ├───────────────────────────┤
│  │     idle, prepare         │  libuv 内部使用
│  ├───────────────────────────┤     ┌───────────────┐
│  │          poll             │<────│  等待 I/O     │  ← 空闲时阻塞在这里
│  ├───────────────────────────┤     └───────────────┘
│  │          check            │  setImmediate 回调
│  ├───────────────────────────┤
│  │     close callbacks       │  socket.on('close') 等
└──┴───────────────────────────┘

setTimeout(() => { console.log('timer1'); Promise.resolve().then(() => console.log('p1')); }, 0);
setTimeout(() => { console.log('timer2'); Promise.resolve().then(() => console.log('p2')); }, 0);
// Node 11+ / 浏览器：timer1 p1 timer2 p2
// Node 10-：       timer1 timer2 p1 p2

function processQueue(deadline) {
  // 在帧空闲期分片处理低优任务，避免掉帧
  while (deadline.timeRemaining() > 1 && queue.length) {
    handle(queue.shift());
  }
  if (queue.length) requestIdleCallback(processQueue, { timeout: 2000 }); // 没处理完，下个空闲期继续
}
requestIdleCallback(processQueue, { timeout: 2000 });

function makeCounter(start) {
  let count = start;        // 被内层引用 → 分配到堆上的 Context
  const step = 1;           // 也被引用 → 同样进 Context
  const unused = new Array(1e6); // 没被内层引用 → 留在栈帧，makeCounter 返回后即可回收
  return function inc() {
    count += step;
    return count;
  };
}

const c1 = makeCounter(0);
const c2 = makeCounter(100);
console.log(c1(), c1(), c2()); // 1 2 101 —— 两次调用产生两个独立 Context

c1 (JSFunction)                       堆
 ├─ Code  → inc 的字节码/机器码
 └─ Environment ──────────────▶ Context#1 { count: 2, step: 1, previous → 全局 Context }

c2 (JSFunction)
 └─ Environment ──────────────▶ Context#2 { count: 101, step: 1, previous → 全局 Context }

function make() {
  let n = 0;
  return { inc: () => ++n, get: () => n }; // inc 和 get 共享同一个 Context
}
const o = make();
o.inc(); console.log(o.get()); // 1

function leak() {
  const huge = new Array(1e7).fill('*'); // 被 rarely 捕获
  function rarely() { return huge.length; }
  function often() { return 1; }         // 只保留 often，huge 仍可能被同一 Context 留住
  return often;
}

// 防抖：timer 与 lastArgs 通过闭包保存
function debounce(fn, wait = 300, { leading = false } = {}) {
  let timer = null;
  return function debounced(...args) {
    const shouldCallNow = leading && timer === null;
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      timer = null;
      if (!leading) fn.apply(this, args);
    }, wait);
    if (shouldCallNow) fn.apply(this, args);
  };
}

// memoize：cache 是私有的，外部拿不到也改不了
function memoize(fn) {
  const cache = new Map();
  return function (...args) {
    const key = args.length === 1 ? args[0] : JSON.stringify(args);
    if (cache.has(key)) return cache.get(key);
    const val = fn.apply(this, args);
    cache.set(key, val);
    return val;
  };
}

for (var i = 0; i < 3; i++) setTimeout(() => console.log(i)); // 3 3 3：三个闭包共享同一个 i
for (let i = 0; i < 3; i++) setTimeout(() => console.log(i)); // 0 1 2：每轮迭代创建新的绑定
for (var j = 0; j < 3; j++) ((k) => setTimeout(() => console.log(k)))(j); // 0 1 2：IIFE 手动造作用域

/* 把被捕获的变量抬到堆上的结构体里，函数额外接收环境指针 */
typedef struct { int count; int step; } CounterEnv;

int inc(CounterEnv *env) {          /* 环境显式作为第一个参数传入 */
    env->count += env->step;
    return env->count;
}

typedef struct { int (*fn)(CounterEnv *); CounterEnv *env; } Counter; /* 这就是"闭包对象" */

Counter make_counter(int start) {
    CounterEnv *env = malloc(sizeof(CounterEnv)); /* 关键：必须在堆上，否则栈帧一销毁就悬垂 */
    env->count = start; env->step = 1;
    Counter c = { inc, env };
    return c;
}
/* 调用：c.fn(c.env);   释放：free(c.env); —— 手动 GC */

// 不使用闭包，用对象显式携带环境
class CounterClosure {
  constructor(start) {
    this.env = { count: start, step: 1 }; // 显式的堆上环境
  }
  call() {                                // 显式的代码部分
    this.env.count += this.env.step;
    return this.env.count;
  }
}
const c = new CounterClosure(0);
console.log(c.call(), c.call()); // 1 2 —— 与闭包版行为完全一致

'use strict';
globalThis.tag = 'global';

// ① 默认绑定
function f() { return this; }
f();               // 严格模式：undefined；非严格：globalThis（this 被"装箱"为全局对象）

// ② 隐式绑定：看调用点的 . 左边是谁
const obj = { tag: 'obj', get() { return this.tag; } };
obj.get();         // 'obj'
const detached = obj.get;
detached();        // 严格模式：TypeError（this 是 undefined）；非严格：undefined（读 globalThis.tag → 'global'）

// ③ 显式绑定
detached.call({ tag: 'A' });   // 'A'
detached.apply({ tag: 'B' });  // 'B'
const bound = detached.bind({ tag: 'C' });
bound();                        // 'C'，且 bind 后不可再被 call 改变
bound.call({ tag: 'D' });       // 仍是 'C'

// ④ new 绑定
function Person(name) { this.name = name; }
const p = new Person('Tom');    // this 指向新创建的对象
new (Person.bind({ tag: 'X' }))('Jerry'); // new 的优先级高于 bind，硬绑定被忽略

// ⑤ 箭头函数：词法 this
const o2 = {
  tag: 'o2',
  method() {
    const arrow = () => this.tag;   // 捕获 method 调用时的 this
    return arrow.call({ tag: 'ignored' }); // 'o2' —— call 对箭头函数无效
  },
};

function show() { return this; }
show.call(7);        // 严格：7（number）；非严格：Number 包装对象
show.call(null);     // 严格：null；非严格：globalThis

'use strict';
globalThis.tag = 'global';

const obj = {
  tag: 'obj',
  regular() {
    console.log('A:', this.tag);
    function inner() { console.log('B:', this); }
    inner();
    const arrow = () => console.log('C:', this.tag);
    arrow();
    [1].forEach(function () { console.log('D:', this); });
    [1].forEach(function () { console.log('E:', this.tag); }, { tag: 'thisArg' });
    [1].forEach(() => console.log('F:', this.tag));
  },
  arrowProp: () => console.log('G:', typeof this),
};

obj.regular();
obj.arrowProp();

const { regular } = obj;
try { regular(); } catch (e) { console.log('H:', e.constructor.name); }

const bound = obj.regular.bind({ tag: 'bound' });
bound();

class Widget {
  tag = 'widget';
  normal() { return this?.tag; }
  arrow = () => this.tag;
}
const w = new Widget();
const { normal, arrow } = w;
console.log('I:', normal());
console.log('J:', arrow());

A: obj          隐式绑定，调用点是 obj.regular()
B: undefined    inner 是普通函数调用 → 默认绑定 → 严格模式为 undefined
C: obj          箭头函数捕获 regular 的 this
D: undefined    forEach 的回调是普通函数，未传 thisArg，严格模式下为 undefined
E: thisArg      forEach 第二个参数指定了回调的 this
F: obj          箭头函数无视 thisArg，仍取词法 this
G: undefined    arrowProp 定义在模块/脚本顶层，捕获顶层 this（ES Module 中为 undefined，
                typeof undefined === 'undefined'）
H: TypeError    解构出来的 regular 丢失接收者，读 undefined.tag 抛错
A: bound / B: undefined / C: bound / D: undefined / E: thisArg / F: bound
I: undefined    normal 是原型方法，脱离实例调用，this 为 undefined，用 ?. 兜住
J: widget       arrow 是实例字段上的箭头函数，构造时捕获了实例，脱离对象依然正确

Function.prototype.myCall = function (thisArg, ...args) {
  if (typeof this !== 'function') throw new TypeError('not callable');
  // 非严格模式语义：null/undefined 回退到全局对象；原始值装箱。此处按非严格语义模拟
  const ctx = thisArg == null ? globalThis : Object(thisArg);
  const key = Symbol('fn');              // 用 Symbol 避免覆盖已有属性
  Object.defineProperty(ctx, key, { value: this, enumerable: false, configurable: true });
  try {
    return ctx[key](...args);            // 借助"隐式绑定"实现显式绑定
  } finally {
    delete ctx[key];                     // 保证异常时也清理
  }
};

Function.prototype.myBind = function (thisArg, ...preArgs) {
  if (typeof this !== 'function') throw new TypeError('not callable');
  const target = this;
  function bound(...args) {
    // 被 new 调用时，this 是 bound 的实例，此时忽略 thisArg
    return target.apply(this instanceof bound ? this : thisArg, [...preArgs, ...args]);
  }
  bound.prototype = Object.create(target.prototype); // 维持原型链，使 instanceof 正确
  return bound;
};

function myNew(Ctor, ...args) {
  if (typeof Ctor !== 'function') throw new TypeError(`${Ctor} is not a constructor`);
  // ① 以 Ctor.prototype 为原型创建对象；若 prototype 不是对象（如被改成基本类型），回退到 Object.prototype
  const proto = (Ctor.prototype !== null && typeof Ctor.prototype === 'object')
    ? Ctor.prototype : Object.prototype;
  const obj = Object.create(proto);
  // ② 以 obj 为 this 执行构造函数
  const ret = Ctor.apply(obj, args);
  // ③ 返回值是对象（含函数）就用它，否则用 obj
  return (ret !== null && (typeof ret === 'object' || typeof ret === 'function')) ? ret : obj;
}

const realNew = (Ctor, ...args) => Reflect.construct(Ctor, args); // 与 new 完全等价

function myInstanceof(left, Right) {
  if (typeof Right !== 'function') throw new TypeError('Right-hand side is not callable');
  // ① 先看有没有 Symbol.hasInstance 覆写（规范优先走这条）
  const hasInstance = Right[Symbol.hasInstance];
  if (typeof hasInstance === 'function' && hasInstance !== Function.prototype[Symbol.hasInstance]) {
    return Boolean(hasInstance.call(Right, left));
  }
  // ② 原始值永远返回 false
  if (left === null || (typeof left !== 'object' && typeof left !== 'function')) return false;
  const target = Right.prototype;
  if (target === null || (typeof target !== 'object' && typeof target !== 'function')) {
    throw new TypeError('prototype is not an object');
  }
  // ③ 沿原型链逐级比较
  let proto = Object.getPrototypeOf(left);
  while (proto !== null) {
    if (proto === target) return true;
    proto = Object.getPrototypeOf(proto);
  }
  return false;
}

class Even {
  static [Symbol.hasInstance](n) { return typeof n === 'number' && n % 2 === 0; }
}
console.log(2 instanceof Even, 3 instanceof Even); // true false

// 签名：Object.create(proto, propertiesObject?)
const base = { greet() { return `hi ${this.name}`; } };
const o = Object.create(base, {
  name: { value: 'Tom', writable: true, enumerable: true, configurable: true },
  id:   { value: 1 },   // 默认全 false：不可写、不可枚举、不可配置
});
console.log(o.greet(), Object.keys(o)); // 'hi Tom' ['name']

// 纯字典：无原型，避免 __proto__ / toString 等原型污染与键名冲突
const dict = Object.create(null);
dict.toString = 1;                     // 安全，不会覆盖任何东西
console.log(Object.getPrototypeOf(dict)); // null

if (!Object.create) {
  Object.create = function (proto) {
    function F() {}                    // 空构造函数，避免执行父类构造逻辑
    F.prototype = proto;
    return new F();                    // 只继承原型，不继承实例属性
  };
}

// ES5：寄生组合式继承（最优解，父构造函数只调用一次）
function Animal(name) { this.name = name; }
Animal.prototype.speak = function () { return `${this.name} makes a sound`; };

function Dog(name, breed) {
  Animal.call(this, name);                 // ① 继承实例属性
  this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype); // ② 继承原型方法（不调用 Animal 构造）
Dog.prototype.constructor = Dog;                 // ③ 修正 constructor 指向
Dog.prototype.speak = function () { return `${this.name} barks`; };

// ES6：等价写法，且额外继承了静态成员（Dog.__proto__ === Animal）
class Animal2 {
  constructor(name) { this.name = name; }
  speak() { return `${this.name} makes a sound`; }
  static create(n) { return new this(n); }  // this 指向调用的类，子类调用会返回子类实例
}
class Dog2 extends Animal2 {
  constructor(name, breed) {
    super(name);                            // 必须先调 super 才能用 this
    this.breed = breed;
  }
  speak() { return `${super.speak()} (woof)`; } // super 走的是 HomeObject.__proto__
}

// Promise 链：错误沿链下传，一个 catch 兜底，但难区分是哪一步失败
fetchUser(id)
  .then((u) => fetchOrders(u.id))
  .then((orders) => render(orders))
  .catch((err) => report(err))     // render 抛错也会进来，容易误判为网络错误
  .finally(() => hideLoading());

// async/await：可精确到语句级，且能自然使用局部变量
async function load(id) {
  showLoading();
  try {
    const user = await fetchUser(id);       // ← 只有这一句的错误被下面区分
    let orders;
    try {
      orders = await fetchOrders(user.id);
    } catch (e) {
      orders = [];                          // 降级：订单失败不影响主流程
      report(e, { stage: 'orders' });
    }
    render(orders);
  } catch (e) {
    report(e, { stage: 'user' });
    throw e;                                // 需要向上传播就显式 rethrow
  } finally {
    hideLoading();
  }
}

async function bad() {
  doAsyncThing();          // 忘记 await：错误逃逸出 try/catch
  try {
    doAsyncThing();        // 同样逃逸
  } catch { /* 永远进不来 */ }
}
// ESLint 规则 no-floating-promises / require-await 可静态拦住这类问题

// ❌ 串行：总耗时 = t1 + t2 + t3
async function serial(ids) {
  const out = [];
  for (const id of ids) out.push(await fetchOne(id));
  return out;
}

// ✅ 并发：总耗时 ≈ max(t1, t2, t3)。先全部发起，再统一 await
async function parallel(ids) {
  return Promise.all(ids.map((id) => fetchOne(id)));
}

// ✅ 部分并行 + 有依赖：先并发拿到不相关的两份数据，再串行用
async function mixed(id) {
  const [user, config] = await Promise.all([fetchUser(id), fetchConfig()]);
  return fetchOrders(user.id, config.pageSize);
}

// 超时控制（推荐用 AbortSignal.timeout，能真正取消底层请求）
async function fetchWithTimeout(url, ms = 3000) {
  // AbortSignal.timeout 需要较新的浏览器/Node 17.3+；老环境用 AbortController + setTimeout
  const res = await fetch(url, { signal: AbortSignal.timeout(ms) });
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

// 并发限流：既不串行也不打爆服务端
async function mapLimit(items, limit, worker) {
  const results = new Array(items.length);
  let cursor = 0;
  const runners = Array.from({ length: Math.min(limit, items.length) }, async () => {
    while (cursor < items.length) {
      const i = cursor++;                       // 单线程下自增是原子的，无需锁
      results[i] = await worker(items[i], i);
    }
  });
  await Promise.all(runners);
  return results;
}

const res = await fetch('/api/stream');
for await (const chunk of res.body.pipeThrough(new TextDecoderStream())) {
  appendToUI(chunk);       // 边下边渲染
}

project/
├─ babel.config.js        # 项目根配置，作用于 node_modules 也能生效（推荐）
├─ .browserslistrc        # 目标环境的唯一真相来源
└─ package.json

# 生产环境：覆盖率 + 兜底
> 0.5%
last 2 versions
Firefox ESR
not dead
not op_mini all

[modern]
last 2 chrome versions
last 2 firefox versions
last 2 safari versions

[development]
last 1 chrome version

// babel.config.js —— 使用项目级配置（而非 .babelrc），可对 node_modules 中的依赖生效
module.exports = (api) => {
  const isTest = api.env('test');
  api.cache.using(() => process.env.NODE_ENV); // 按环境缓存配置

  return {
    presets: [
      ['@babel/preset-env', {
        // targets 不写 → 自动读取 .browserslistrc，保持单一真相来源
        // 测试环境直接跑在当前 Node 上，不必降级，编译更快
        ...(isTest ? { targets: { node: 'current' } } : {}),

        // 'usage': 按代码中实际用到的 API 自动按需注入 polyfill（推荐）
        // 'entry': 需在入口手写 import 'core-js/stable'，按 targets 展开
        // false  : 完全不注入
        useBuiltIns: 'usage',

        // 必须与 package.json 中安装的 core-js 版本一致（含 minor），否则按需注入不准
        corejs: { version: '3.37', proposals: false },

        // 用更精准的 bugfix 转换，产物更小（Babel 7.9+）
        bugfixes: true,

        // 保留 ESM 语法交给打包器做 Tree Shaking；设为 'commonjs' 会破坏 Tree Shaking
        modules: false,
      }],
    ],
    plugins: [
      ['@babel/plugin-transform-runtime', {
        // 应用项目：polyfill 交给 useBuiltIns:'usage' 全局注入，这里只复用 helper
        corejs: false,
        helpers: true,     // 把 _classCallCheck 等辅助函数抽到 @babel/runtime，避免每文件重复
        regenerator: true, // 需要 regenerator 时从 runtime 引用，不污染全局
      }],
    ],
  };
};

npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime browserslist
npm i    core-js@3 @babel/runtime            # 注意：这两个是运行时依赖，不是 devDependencies

// 库不能污染使用者的全局环境，必须用 transform-runtime 的沙箱式 polyfill
module.exports = {
  presets: '@babel/preset-env', { useBuiltIns: false, modules: false },
  plugins: [['@babel/plugin-transform-runtime', {
    corejs: { version: 3, proposals: false }, // 需安装 @babel/runtime-corejs3
    helpers: true,
    regenerator: true,
  }]],
};

module: {
  rules: [{
    test: /\.m?js$/,
    // 关键：不要无脑 exclude 整个 node_modules。很多现代库只发 ES2018+ 产物，
    // 不转会导致低端浏览器白屏。推荐只排除已知安全的包，或用 include 白名单。
    exclude: /node_modules[\\/](?!(some-es6-lib|another-lib)[\\/])/,
    use: { loader: 'babel-loader', options: { cacheDirectory: true } },
  }],
}

<script type="module" src="app.modern.js"></script>
<script nomodule defer src="app.legacy.js"></script>

JS 主线程          网络进程/线程                     JS 主线程
   │  fetch()  ──▶  DNS / 连接 / TLS / 收发 / 解压
   │  (立即返回        (独立线程，主线程此刻可以
   │   Promise)         继续跑别的 JS 和渲染)
   │                              │
   │                        响应完成 ──IPC──▶ 把回调作为任务投递到事件循环
   ▼                                              │
继续执行同步代码 ... 栈空 ... 事件循环取出任务 ◀────┘ → 执行 .then 回调

// main.js
// 用 new URL(..., import.meta.url) 让打包器（Vite/Webpack 5）能正确解析 worker 入口
const worker = new Worker(new URL('./heavy.worker.js', import.meta.url), {
  type: 'module',      // 允许在 worker 内使用 import
  name: 'image-proc',  // 便于 DevTools 调试
});

// 用 Promise 包装 postMessage，把消息式 API 变成可 await 的调用
function callWorker(worker, type, payload, transfer = []) {
  return new Promise((resolve, reject) => {
    const id = crypto.randomUUID();
    const onMessage = (e) => {
      if (e.data.id !== id) return;                   // 支持并发多请求
      worker.removeEventListener('message', onMessage);
      e.data.ok ? resolve(e.data.result) : reject(new Error(e.data.error));
    };
    worker.addEventListener('message', onMessage);
    // 第二个参数是 Transferable 列表：所有权转移，零拷贝，转移后主线程侧的 buffer 变成 detached
    worker.postMessage({ id, type, payload }, transfer);
  });
}

// worker 内未捕获错误会触发 error 事件（注意：error 事件不会经过上面的 Promise）
worker.addEventListener('error', (e) => console.error('worker crashed:', e.message));
worker.addEventListener('messageerror', (e) => console.error('结构化克隆失败:', e));

// 使用：把 1000 万个数的求和挪出主线程，页面动画不掉帧
const data = new Float64Array(1e7).map(() => Math.random());
const sum = await callWorker(worker, 'sum', data, [data.buffer]); // 转移所有权，避免 80MB 拷贝
console.log(sum, data.length); // 注意：转移后 data.length 变成 0（buffer 已 detached）

worker.terminate(); // 不用了要销毁，否则线程和内存一直占着

// heavy.worker.js
// Worker 全局是 DedicatedWorkerGlobalScope：没有 window / document / DOM，
// 但有 fetch、WebSocket、IndexedDB、Cache、crypto、OffscreenCanvas、importScripts
self.addEventListener('message', async (e) => {
  const { id, type, payload } = e.data;
  try {
    let result;
    switch (type) {
      case 'sum': {
        let s = 0;
        for (let i = 0; i < payload.length; i++) s += payload[i]; // 跑满 CPU 也不影响主线程
        result = s;
        break;
      }
      case 'parse':
        result = JSON.parse(payload);   // 大 JSON 解析是典型的主线程杀手
        break;
      default:
        throw new Error(`unknown type: ${type}`);
    }
    self.postMessage({ id, ok: true, result });
  } catch (err) {
    // 必须自己捕获并回传，否则主线程只能从 error 事件拿到有限信息
    self.postMessage({ id, ok: false, error: err.message });
  }
});

// 让出主线程：优先用标准调度 API，逐级降级
const yieldToMain = () =>
  globalThis.scheduler?.yield?.()                       // Chrome 129+，最优
  ?? new Promise((r) => {
    // MessageChannel 是宏任务且不受 setTimeout 的 4ms 钳制，React 调度器同款方案
    const { port1, port2 } = new MessageChannel();
    port1.onmessage = () => { port1.close(); r(); };
    port2.postMessage(null);
  });

async function renderLongList(items) {
  let lastYield = performance.now();
  const frag = document.createDocumentFragment();
  for (const item of items) {
    frag.append(createRow(item));
    // 每累计 5ms 就让出一次，保证不产生 >50ms 的 Long Task（影响 INP 指标）
    if (performance.now() - lastYield > 5) {
      await yieldToMain();
      lastYield = performance.now();
    }
  }
  document.querySelector('#list').append(frag); // 一次性插入，只触发一次回流
}

// Node：worker_threads 用于 CPU 密集；I/O 密集本来就是 libuv 线程池 + 事件循环，不需要 worker
import { Worker } from 'node:worker_threads';

const worker = new Worker(new URL('./cpu-task.js', import.meta.url), {
  workerData: { size: 1e7 },
});
worker.on('message', (r) => console.log(r));
worker.on('error', (e) => console.error(e));
worker.on('exit', (code) => { if (code !== 0) console.error(`exit ${code}`); });