设计模式

class SingletonLogin {
    constructor(name, password) {
        this.name = name
        this.password = password
    }
    static getInstance(name, password) {
        if (!this.instance) {
            this.instance = new SingletonLogin(name, password)
        }
        return this.instance
    }
}

let obj1 = SingletonLogin.getInstance('CXK', '123')
let obj2 = SingletonLogin.getInstance('CXK', '321')
console.log(obj1 === obj2)  // true

class User {
  constructor(name, auth) {
    this.name = name
    this.auth = auth
  }
}

class UserFactory {
  static createUser(name, auth) {
    if (auth === 'admin') return new User(name, 1)
    if (auth === 'user') return new User(name, 2)
  }
}

const admin = UserFactory.createUser('cxk', 'admin');
const user = UserFactory.createUser('cxk', 'user');

观察者模式实现

class Subject {
  constructor() { this.observers = []; }
  subscribe(observer) { this.observers.push(observer); }
  unsubscribe(observer) { this.observers = this.observers.filter(obs => obs !== observer); }
  notify(data) { this.observers.forEach(observer => observer.update(data)); }
}

class Observer {
  constructor(name) { this.name = name; }
  update(data) { console.log(`${this.name} received data: ${data}`); }
}

发布订阅模式实现（带事件中心）

class EventHub {
  constructor() { this.eventMap = {}; }
  subscribe(eventName, callback) {
    if (!this.eventMap[eventName]) this.eventMap[eventName] = [];
    this.eventMap[eventName].push(callback);
  }
  publish(eventName, data) {
    if (this.eventMap[eventName])
      this.eventMap[eventName].forEach(callback => callback(data));
  }
  unsubscribe(eventName, callback) {
    if (this.eventMap[eventName])
      this.eventMap[eventName] = this.eventMap[eventName].filter(cb => cb !== callback);
  }
}

function info(target) {
  target.prototype.name = '张三'
  target.prototype.age = 10
}

@info
class Man {}

let man = new Man()
man.name  // 张三

函数装饰器示例：

function logDecorator(originalFunction) {
  return function(...args) {
    console.log(`Calling function with arguments: ${args}`);
    const result = originalFunction(...args);
    console.log(`Function called. Result: ${result}`);
    return result;
  };
}
const decoratedGreet = logDecorator(greet);

class Adaptee {
  test() { return '旧接口' }
}

class Target {
  constructor() { this.adaptee = new Adaptee() }
  test() {
    let info = this.adaptee.test()
    return `适配${info}`
  }
}

let target = new Target()
console.log(target.test())  // 适配旧接口

const idol = {
  name: '蔡x抻',
  phone: 10086,
  price: 1000000
}

const agent = new Proxy(idol, {
  get: function(target) {
    return '经纪人电话:10010'
  },
  set: function(target, key, value) {
    if (key === 'price') {
      if (value < target.price) throw new Error('报价过低')
      target.price = value
    }
  }
})

agent.phone        // 经纪人电话:10010
agent.price = 100  // Uncaught Error: 报价过低

• 新生代：刚创建的对象，来得快死得也快。频繁、小成本地清理。
• 老生代：存活多轮的对象，回收频率更低，但回收更重。

• 新对象分配在 From 空间
• GC 时从根对象找存活对象，复制到 To 空间
• 没被复制的默认是垃圾
• 交换 From/To 角色
• 存活多轮的对象会晋升（promote）到老生代

Minor GC 便宜，因为只扫描新生代，通过 write barrier 和 remembered set 记录「老指新」引用，无需扫描整个老生代。

• Mark（标记）：从根遍历，把还能访问到的对象标记为「活着」
• Sweep（清除）：把没标记的对象对应内存回收到空闲链表
• Compact（压缩）：碎片多时把活对象往一起挪，减少内存碎片

• Parallel：多线程一起做 GC
• Incremental：把 GC 工作拆成多小段
• Concurrent：后台线程并发标记，尽量不阻塞主线程

口播模板：V8 的 GC 采用分代回收。新生代用 Scavenger 复制式回收，成本低、消除碎片。存活多轮晋升老生代。老生代用 Mark-Sweep 和 Mark-Compact。为减少停顿引入并行、增量、并发 GC，官方称作 Orinoco。

• 未解除的事件监听器：元素移除时未 removeEventListener，监听器仍持有引用
• 未清理的全局变量：尽量避免，用 let/const，不用时置 null
• 闭包：确保只保留需要的引用
• DOM 引用未释放：移除 DOM 后将引用置 null
• 定时器：用 clearInterval/clearTimeout 清理
• 缓存：用 WeakMap/WeakSet 或定期清理

// 事件监听器清理
button.removeEventListener('click', handleClick);

// 定时器清理
clearInterval(intervalId);

// DOM 引用释放
element = null;

1. 取消未完成的异步请求（isMounted 或 AbortController）

useEffect(() => {
  let isMounted = true;
  fetchData().then(response => {
    if (isMounted) setData(response);
  });
  return () => { isMounted = false; };
}, []);

2. AbortController 取消 fetch

useEffect(() => {
  const controller = new AbortController();
  fetch('https://api.example.com/data', { signal: controller.signal })
    .then(r => r.json())
    .then(setData)
    .catch(err => { if (err.name !== 'AbortError') throw err; });
  return () => controller.abort();
}, []);

3. useEffect cleanup 清除定时器与事件

useEffect(() => {
  const intervalId = setInterval(() => console.log('tick'), 1000);
  return () => clearInterval(intervalId);
}, []);

useEffect(() => {
  const handleResize = () => console.log('resized');
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

• 进程：资源分配的基本单位。每个进程有独立的内存空间、系统资源。创建/销毁开销大。进程崩溃通常不影响其他进程。
• 线程：进程中的执行路径，共享进程资源。创建/销毁开销小。线程崩溃可能导致整个进程崩溃。
• 通信：进程间用 IPC（消息队列、管道、共享内存等）；线程间直接共享内存。

• Browser 进程：负责 UI、网络、存储等
• Renderer 进程：每个标签页一个，负责页面渲染、JS 执行
• GPU 进程：GPU 加速
• Plugin 进程：插件

多进程隔离保证单个标签页崩溃不会影响其他标签页。

// 主线程
const worker = new Worker('worker.js');
worker.postMessage({ data: 'hello' });
worker.onmessage = (e) => console.log(e.data);

// worker.js
self.onmessage = (e) => {
  self.postMessage({ result: e.data.data + ' processed' });
};