FE-04-JavaScript 高级：闭包、原型链、异步、模块化

2026-09-28

字数统计: 2.2k字 | 阅读时长≈ 11分

FE-04-JavaScript 高级：闭包、原型链、异步、模块化

本节目标：深入理解 JS 核心机制：作用域链、闭包、原型链、this 绑定、Promise/async-await、模块系统。

1. 执行上下文与作用域

执行上下文（Execution Context） 是 JS 引擎执行代码的环境：

var a = 1;
function foo() {
  var b = 2;
  function bar() {
    var c = 3;
    console.log(a, b, c);  // 1 2 3
  }
  bar();
}
foo();

三个层级：

全局执行上下文（最外层）
函数执行上下文（每个函数调用）
Eval 执行上下文（eval 内）

执行栈（Call Stack）：LIFO，最后调用的先返回。

2. 作用域链

const global = 'global';

function outer() {
  const outerVar = 'outer';

  function inner() {
    const innerVar = 'inner';
    console.log(global, outerVar, innerVar);  // 全能找到
  }
  inner();
}

作用域链：当前作用域 → 父作用域 → … → 全局。

let/const 的块级作用域：

{
  let x = 1;
  const y = 2;
  var z = 3;
}
console.log(x);  // ReferenceError
console.log(y);  // ReferenceError
console.log(z);  // 3（var 不受块作用域限制）

3. 闭包（Closure）

闭包 = 函数 + 其引用的词法环境：

function makeCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = makeCounter();
console.log(counter());  // 1
console.log(counter());  // 2
console.log(counter());  // 3

经典场景：

数据封装：

function createWallet(initial) {
  let balance = initial;
  return {
    deposit: (amount) => balance += amount,
    withdraw: (amount) => {
      if (amount > balance) throw new Error('余额不足');
      balance -= amount;
    },
    getBalance: () => balance,
  };
}
const w = createWallet(100);
w.deposit(50);
console.log(w.getBalance());  // 150
// balance 外部访问不到

循环中的闭包陷阱：

// 错：所有输出 3
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}

// 对：let 有块作用域
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}

// 对：IIFE
for (var i = 0; i < 3; i++) {
  (function(j) {
    setTimeout(() => console.log(j), 100);
  })(i);
}

4. 原型链

**每个 JS 对象都有一个隐藏的 [[Prototype]]**（通过 __proto__ 或 Object.getPrototypeOf() 访问）。

const obj = { a: 1 };
console.log(obj.__proto__ === Object.prototype);  // true

// 原型链查找
obj.toString();  // 自身没找到，沿着 __proto__ 找到 Object.prototype.toString

构造函数 + prototype：

function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  return `Hello, ${this.name}`;
};

const alice = new Person('Alice');
console.log(alice.greet());  // Hello, Alice
console.log(alice.__proto__ === Person.prototype);  // true

原型链：

alice (实例)
  → Person.prototype
  → Object.prototype
  → null

ES6 class 语法糖：

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hello, ${this.name}`;
  }
}
// 实际就是构造函数 + prototype

继承：

class Animal {
  constructor(name) { this.name = name; }
  speak() { return `${this.name} makes a sound`; }
}

class Dog extends Animal {
  speak() { return `${this.name} barks`; }
}

const d = new Dog('Rex');
console.log(d.speak());  // Rex barks

5. this 绑定

this 的值取决于调用方式，不是定义位置。

// 1. 默认绑定（独立函数调用）
function f() { console.log(this); }
f();  // window（严格模式下 undefined）

// 2. 隐式绑定（作为方法调用）
const obj = {
  name: 'Alice',
  greet() { console.log(this.name); },
};
obj.greet();  // 'Alice'

// 3. 显式绑定（call/apply/bind）
function greet() { console.log(this.name); }
const obj = { name: 'Alice' };
greet.call(obj);     // 'Alice'
greet.apply(obj);    // 'Alice'
const bound = greet.bind(obj);
bound();             // 'Alice'

// 4. new 绑定（构造函数）
function Person(name) {
  this.name = name;
}
const p = new Person('Alice');  // this 指向新创建的实例

优先级：new > 显式 > 隐式 > 默认

箭头函数没有自己的 this（继承外层）：

const obj = {
  name: 'Alice',
  greet: () => console.log(this.name),  // this 来自定义时的外层（这里是全局）
  greet2() {
    const f = () => console.log(this.name);  // 继承 greet2 的 this
    f();
  },
};
obj.greet();   // undefined
obj.greet2();  // 'Alice'

6. 异步编程

6.1 回调函数（Callback）

fs.readFile('a.txt', (err, data) => {
  if (err) return console.error(err);
  console.log(data);
});

回调地狱：

fs.readFile('a', (err, a) => {
  fs.readFile('b', (err, b) => {
    fs.readFile('c', (err, c) => {
      // 嵌套太深，难以维护
    });
  });
});

6.2 Promise

const p = new Promise((resolve, reject) => {
  setTimeout(() => resolve('done'), 1000);
});

p.then(v => console.log(v))      // done
 .catch(e => console.error(e))
 .finally(() => console.log('end'));

链式调用：

fetch('/api/user')
  .then(res => res.json())
  .then(user => fetch(`/api/posts/${user.id}`))
  .then(res => res.json())
  .then(posts => console.log(posts))
  .catch(err => console.error(err));

静态方法：

Promise.all([p1, p2, p3])    // 全部成功才成功
Promise.race([p1, p2, p3])  // 第一个完成
Promise.allSettled([p1, p2])  // 全部完成（不论成功失败）
Promise.any([p1, p2, p3])   // 第一个成功

6.3 async/await

async function 返回 Promise，await 等待 Promise resolve：

async function loadUser(id) {
  try {
    const user = await fetch(`/api/users/${id}`).then(r => r.json());
    const posts = await fetch(`/api/posts/${user.id}`).then(r => r.json());
    return { user, posts };
  } catch (err) {
    console.error(err);
  }
}

const result = await loadUser(1);

并发 vs 串行：

// 串行：依次等待
const a = await fetchA();
const b = await fetchB(a.id);

// 并发：同时发起
const [a, b] = await Promise.all([fetchA(), fetchB()]);

6.4 手写 Promise

class MyPromise {
  constructor(executor) {
    this.state = 'pending';
    this.value = undefined;
    this.callbacks = [];

    const resolve = (value) => {
      if (this.state !== 'pending') return;
      this.state = 'fulfilled';
      this.value = value;
      this.callbacks.forEach(cb => cb.onFulfilled(value));
    };
    const reject = (reason) => {
      if (this.state !== 'pending') return;
      this.state = 'rejected';
      this.value = reason;
      this.callbacks.forEach(cb => cb.onRejected(reason));
    };

    try {
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }

  then(onFulfilled, onRejected) {
    return new MyPromise((resolve, reject) => {
      const handle = () => {
        try {
          if (this.state === 'fulfilled') {
            const result = onFulfilled(this.value);
            resolve(result);
          } else if (this.state === 'rejected') {
            const result = onRejected(this.value);
            resolve(result);
          } else {
            this.callbacks.push({
              onFulfilled: (v) => {
                try {
                  resolve(onFulfilled(v));
                } catch (e) { reject(e); }
              },
              onRejected: (e) => {
                try {
                  resolve(onRejected(e));
                } catch (err) { reject(err); }
              },
            });
          }
        } catch (err) {
          reject(err);
        }
      };
      handle();
    });
  }
}

7. 模块化

7.1 演进历史

IIFE（ES5 之前）
CommonJS（Node.js）
AMD（RequireJS，已淘汰）
UMD（兼容 CommonJS 和 AMD）
ES Modules（ES6+，浏览器原生）

7.2 CommonJS（Node.js）

// math.js
function add(a, b) { return a + b; }
module.exports = { add };

// app.js
const { add } = require('./math');
console.log(add(1, 2));  // 3

特点：

同步加载
运行时解析
缓存已加载模块

7.3 ES Modules

// math.js
export function add(a, b) { return a + b; }
export default class Calculator {}

// app.js
import { add } from './math.js';
import Calculator from './math.js';

特点：

静态分析（编译时优化）
异步加载
浏览器原生支持
Tree-shakable

7.4 动态导入

// 按需加载
const { default: Chart } = await import('./chart.js');

// 路由懒加载
const routes = [
  {
    path: '/admin',
    component: () => import('./AdminView.vue'),
  },
];

7.5 CommonJS vs ESM 互操作

// ESM 引入 CJS
import cjs from './cjs-module';  // default import = module.exports

// CJS 引入 ESM（不支持！必须用动态 import）
// require() 不能加载 ESM
(async () => {
  const { foo } = await import('./esm-module.mjs');
})();

8. 防抖与节流

// 防抖（debounce）：N 秒内只执行最后一次
function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

// 节流（throttle）：N 秒内最多执行一次
function throttle(fn, delay) {
  let last = 0;
  return function(...args) {
    const now = Date.now();
    if (now - last >= delay) {
      last = now;
      fn.apply(this, args);
    }
  };
}

// 用法
window.addEventListener('resize', debounce(handleResize, 200));
window.addEventListener('scroll', throttle(handleScroll, 100));

9. 深拷贝

// 浅拷贝
const a = { x: 1, y: { z: 2 } };
const b = { ...a };          // 第一层独立，y 仍共享
const c = Object.assign({}, a);

// 深拷贝
const d = structuredClone(a);  // 现代浏览器/Node 17+ 原生
// 老的 polyfill：
function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof RegExp) return new RegExp(obj);
  if (Array.isArray(obj)) return obj.map(deepClone);
  return Object.fromEntries(
    Object.entries(obj).map(([k, v]) => [k, deepClone(v)])
  );
}

JSON.parse(JSON.stringify(obj)) 的问题：

丢失函数、undefined、Symbol
Date 变字符串
循环引用会爆栈

10. JS 内存管理

内存生命周期：

分配（声明变量、对象）
使用（读写）
释放（GC）

GC 算法：现代浏览器用标记-清除（Mark-Sweep）：

定期从根对象（window）开始遍历
不可达的对象标记为可回收
在适当时机清除

内存泄漏常见原因：

// 1. 意外的全局变量
function leak() {
  x = 'leak';  // 没有 var/let/const → 全局
}

// 2. 忘记清除定时器
const timer = setInterval(...);
// 忘记 clearInterval(timer);

// 3. 闭包引用大对象
function attach() {
  const big = new Array(1000000);
  return function() {
    console.log(big[0]);  // 闭包保持 big 引用
  };
}

// 4. DOM 引用
const el = document.getElementById('x');
el.remove();  // DOM 删了，但 JS 变量还引用着
// el = null;  ← 必须显式置空

// 5. 事件监听未移除
element.addEventListener('click', handler);
// 忘记 removeEventListener

检测内存：

Chrome DevTools → Memory → Heap snapshot
performance.memory.usedJSHeapSize（Chrome only）

小结

概念	关键点
作用域	全局/函数/块级
闭包	函数 + 词法环境，封装数据
原型链	`__proto__` 链，方法查找路径
this	调用时决定，不是定义时
Promise	三态、then/catch/finally
async/await	同步写法 + 异步语义
模块化	ESM 是未来，CJS 是历史
内存	标记清除 GC，避免泄漏

下一节讲 TypeScript 进阶：泛型、条件类型、类型体操。

本文作者： CoderSong
本文链接： https://jack-song-gif.github.io/2026/09/28/FE-04-JavaScript高级/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！