Prototype和_proto_的区别

• Prototype属性（原型对象）。是函数（Function）独有的属性，非函数类对象没有这个属性。作用是，作为一个“公共仓库”，用来放置希望所有实例共享的属性和方法。
• _proto_属性（隐式原型指针）。JavaScript 中的每一个对象（包含函数、数组、实例等）都有。作用是，指向创建该对象的构造函数的 prototype。它就是对象用来“向上查找”的连接线。

一个函数对象拆解后的实际样子

要彻底搞懂一个函数对象在内存和浏览器控制台里的完整拆解结构，我们可以将它划分为 4 大核心板块。

在 Chrome 控制台中运行 console.dir(Foo) 并展开后，你能看到它的全部内部组成：

function Foo(name) {
  this.name = name;
}
Foo.prototype.sayHello = function() {};
Foo.myStaticMethod = function() {}; // 静态方法

console.dir(Foo);

function Foo(name) {
  this.name = name;
}
Foo.prototype.sayHello = function() {};
Foo.myStaticMethod = function() {}; // 静态方法

console.dir(Foo);

函数对象的 4 大结构板块

板块 1：函数自身的常规属性（静态属性与方法）

这是挂载在函数本身上的属性。当你把函数当成普通对象使用时（例如 Foo.myStaticMethod = ...），这些属性直接存在于函数自身。

• name：函数名（如 "Foo"）。
• length：形参个数（如 1）。
• 自定义静态属性/方法：例如 myStaticMethod、Array.isArray、Object.keys 等。

板块 2：prototype（显式原型板块 —— “供实例调用的共享仓库”）

这个板块专门负责给由 new Foo() 创建出来的实例对象提供共享的方法和属性。

• 主要内容：
  1. 自定义共享方法/属性：例如 sayHello，所有实例共享此方法。
  2. constructor（构造器指针）：默认存在，反向指回函数 Foo 本身（Foo.prototype.constructor === Foo）。
  3. [[Prototype]]（原型的原型）：Foo.prototype 本身也是一个普通对象，所以它也有自己的 [[Prototype]]，指向 Object.prototype。

板块 3：[[Prototype]]（隐式原型板块 —— “函数自身的继承通道”）

这是函数自身作为对象所拥有的原型，指向 Function.prototype。因为函数本身也是由 JavaScript 的内置构造函数 Function 创建的。

• 主要内容：
  1. 内置函数方法：call()、apply()、bind()、toString() 等。你能在任何函数上直接调用 Foo.call()，就是从这个板块里继承来的。
  2. constructor：指向 Function 构造函数。
  3. [[Prototype]]：指向 Object.prototype（原型链继续向上查找）。

板块 4：内部槽 / 隐式作用域（引擎私有板块）

控制台中以 [[...]] 双方括号包裹的内容，属于 JavaScript 引擎内部维护的私有属性。

• [[Scopes]]：函数的作用域链（包含了函数定义时的闭包 Closure、全局作用域 Global 等）。
• [[FunctionLocation]]：源代码中该函数定义的文件和行号位置。

控制台展开结构对照表

在 Chrome / Edge 控制台里展开 console.dir(Foo)，对应结构如下：

代码验证（一秒分清两个 Prototype）

JavaScript

// 1. 查看 Foo 给【实例】准备的共享仓库 (板块 2)
console.log(Foo.prototype.sayHello); // ƒ () {}

// 2. 查看 Foo 【自己】调用的函数能力 (板块 3)
console.log(Foo.call); // ƒ call() { [native code] }

// 验证：Foo 的 [[Prototype]] 就是 Function.prototype
console.log(Object.getPrototypeOf(Foo) === Function.prototype); // true

// 1. 查看 Foo 给【实例】准备的共享仓库 (板块 2)
console.log(Foo.prototype.sayHello); // ƒ () {}

// 2. 查看 Foo 【自己】调用的函数能力 (板块 3)
console.log(Foo.call); // ƒ call() { [native code] }

// 验证：Foo 的 [[Prototype]] 就是 Function.prototype
console.log(Object.getPrototypeOf(Foo) === Function.prototype); // true

JS对象迷惑性：理解本质

对于C++、Java、C#面向对象的语言而言，对象这个词都是很明确的：“对象”必须以“类（Class）”为模板实例化而来。

而JS中的对象概念，则宽泛得多。例如，以下代码中的staff 、p都是对象，甚至函数Person也是对象：

//普通对象
const staff = {
    name: "Tom",
    age: 18
};

//Promise对象
const p = new Promise(...);

//函数也是一个对象
function Person(name) {
  this.name = name;
}

//普通对象
const staff = {
    name: "Tom",
    age: 18
};

//Promise对象
const p = new Promise(...);

//函数也是一个对象
function Person(name) {
  this.name = name;
}

这不禁让人困惑，JavaScript的对象到底指的是什么？

因为中文把 Object 翻译成“对象”，听起来特别抽象，实际上：

JS 里的“对象”并不是指某一种长相，而是指一种“可以被当成一个整体来管理，并且可以通过属性名找到内部东西”的值。

“对象”本质上只是一个包含键值对（Key-Value）的动态哈希表。

很粗浅的理解，对象就是一个可以装很多“属性”的东西。

认识了这个本质，我们很快就能理解了，staff，p，Person 长相完全不同，但它们在 JavaScript 的底层分类上都属于 Object。以下都是JS中的对象，只是创建它们的“模板”不同而已：

JavaScript Object
│
├── 普通对象
├── Promise对象
├── Array对象
├── Date对象
├── RegExp对象
├── Map对象
└── …

创建对象有很多种方式

例如，普通对象：

 const a = {};

 const a = {};

其它类型对象：

 //Promise 对象
 const b = new Promise(...);
 //Array 对象。
 const c = [];
 //Date 对象
 const d = new Date();
 //Map 对象
 const e = new Map();
 //RegExp 对象
 const f = /abc/;
  //甚至得到的是函数对象
 const g = function() {};

 //Promise 对象
 const b = new Promise(...);
 //Array 对象。
 const c = [];
 //Date 对象
 const d = new Date();
 //Map 对象
 const e = new Map();
 //RegExp 对象
 const f = /abc/;
  //甚至得到的是函数对象
 const g = function() {};

不要再把对象单一理解成：

 { name: “Tom”, age: 18 }

而应该理解成：

对象 = 一个可以拥有属性和方法、可以被独立操作的实体。

于是：

                  Object
                     │
         ┌───────────┼────────────┐
         ↓           ↓            ↓
      普通对象      Array        Promise
         │           │            │
     name/age     push/length   then/catch

它们虽然功能完全不同，但都属于“对象”这个大类别。

即使写程序很多年的老鸟，能真正说清楚道明白HTTP方法的也不多，多数都只会使用而不知道所以然。每个人都知道使用GET、POST方法，使用也很熟练，但是底层设计思想并不一定了解。这里，来认真梳理一下HTTP方法背后设计的逻辑。

一. HTTP方法常见10种

HTTP 标准里常见的10 个：

（实际上HTTP方法数量多达几十种，这里只是列举常见的方法，详见文末）

二.HTTP方法两个核心设计理念：安全（Safe） 与 幂等（Idempotent）

注意：以上的标准是2014年颁布的RFC 7231，QUETY标准出自2026颁布的RFC 10008

字形编译引擎(Text Shaping Engine)当今的绝对王者HarfBuzz，拥有极强性能，Android、Chromium、Firefox等主流应用底层都在用它。HarfBuzz有一个hb-subset 子集化模块，是专业的字体子集化引擎：

当你给它一段文本（比如 "动态字体子集化"）和原字体时，HarfBuzz 会：
自动分析这几个汉字对应的 Glyph ID。
保留这几个字所需的矢量描边数据。
剔除其余上万个未用到的字形数据。
重构并修复 .ttf 文件的 OpenType 内部索引表，确保输出的小字体符合国际标准，能在浏览器中被完美加载。

直观了解：HarfBuzz是做什么的？

官方是这样介绍的：

---

harfbuzz-world.cc is a single-file build of HarfBuzz that drops into your own C or C++ project without any build-system glue, plus a live playground for it right here in your browser:

harfbuzz-world.cc 提供了一个单文件版的 HarfBuzz（HarfBuzz 整个库整合成一个可以直接编译的 .cc 文件。），可以直接放进你自己的 C/C++ 项目中，无需额外处理构建系统；同时，它还在浏览器中提供了一个可以实时操作的 HarfBuzz 实验场。


shape — the shaped glyph stream as a table, alongside an SVG preview.（字形整形 / 字形塑形）
subset — produce a font subset for the current text and download it.（子集化）
raster — pixel-perfect BGRA rendering at any size, blitted to a canvas.（光栅化/位图化）
vector — the same shaped text rendered to SVG and downloadable PDF.
gpu — slug-based GPU rendering via WebGL2.（GPU 渲染）

官网地址：https://harfbuzz-world.cc/

---

OpenType（包括排版规则、连字、变形、字形定位表等）也是一套极其复杂的标准规范，而 HarfBuzz 就是这套标准在全世界最权威、最完美的执行引擎（“编译器/解析引擎”）。 很多人以为：计算机显示文本 = 查字典（给一个字符编码，找到对应的字体形状画出来）。 如果全世界只有英文字母（A-Z），这确实很简单。但在现实世界中，文字的显示极其复杂：

—— 复杂连字（Ligatures）与形态变化：阿拉伯文同一个字母，在词首、词中、词尾、单独存在时，形状完全不同，而且必须连笔。印地文/泰文： 辅音和元音组合时，元音符号可能会跑到辅音的上方、下方甚至左边。英文在优雅的排版中，f 和 i 连着写时，f 的横线和 i 的点会融合成一个整体（fi 连字）。

—— 字形（Glyph）与字符（Character）不是一回事。字符（Unicode）：是逻辑上的编码（如 U+0061 代表 a）。字形（Glyph）：是字体文件（.ttf）中实际绘制出来的矢量图形。一个字符可能对应多个字形，多个字符也可能合成一个字形。

HarfBuzz 的核心工作，这串文本在当前字体下，应该使用字体库里的哪几个字形（Glyph ID）？每个字形应该放在什么坐标位置？字形之间的间距（Kerning）是多少？

说得更直白一些，HarfBuzz就是把字体规则给完美呈现出来，就像浏览器，要把庞大复杂的HTML/CSS/Javascript这些规则给视觉实现，HarfBuzz就是字体界的浏览器。

由于项目需要，我们需要做动态字体子集化，HarfBuzz是不二之选。我们采用的是Python FastAPI + HarfBuzz + Redis+Nginx+Vue3+pdf-lib前后端技术栈来实现。以下的记录是其中一些操作要点。

最近做了一个在线生成PDF，适时预览并可在线打印的系统。使用了pdf-lib.js（https://pdf-lib.js.org），作为前端创建PDF的框架，虽然很方便，但遇到一个棘手的问题：如何解决中文显示。

PDF文件不同于web文件（HTML+CSS），它的字体是嵌入文件的，而由于安全性和PDF文件本身机制的问题，并不能读取本地字体文件。而国际PDF阅读器规范中的 “Standard 14 Fonts”（14 种标准字体）中并没有中文字体，这就导致了在不嵌入中文字体的情况下，出现中文就会无法渲染。

Standard 14 Fonts

内置的 14 种标准字体 这 14 种字体全部属于 拉丁字母（英文） 系列，分为四大类：
1.无衬线 (Sans Serif)字体： Helvetica, Helvetica-Bold, Helvetica-Oblique, Helvetica-BoldOblique
2.衬线 (Serif/Roman) 字体：Times-Roman, Times-Bold, Times-Italic, Times-BoldItalic
3.等宽 (Monospace)字体： Courier, Courier-Bold, Courier-Oblique, Courier-BoldOblique
4.符号 (Symbol) ：Symbol, ZapfDingbats

PDF 的设计初衷是 “所见即所得” (WYSIWYG)。它的目标是：不管你把这个文件发给谁，在手机上、打印机上还是 20 年后的电脑上，看到的排版必须一模一样。

封闭性：PDF 不信任阅读者的系统。它认为：“万一对方电脑里没有微软雅黑，我的排版不就乱了吗？”

机制：为了保证绝对一致，pdf-lib 必须执行 “字体嵌入 (Embedding)”。它需要把字体文件的每一个二进制数据“缝进” PDF 文件里。

面临的难点：

这个系统需要兼容正体中文（繁体）和简体中文，而这种字体体量大得惊人。兼容性最好的Adobe全字符体——Super OTC 体积高达100M+，师出同门的Google Noto也差不多这个体量，如放到Web项目，简直是灾难，浏览器瞬间会被卡死。

于是只能放弃使用这种大字符集的字体，选择性地支持正体或简体。

但是单独的简体字体，体积也很大，思源Source Han Serif，单独一种字重的字体，也高达20M+，Noto也要10M-20M。如果要加载这么大的字体，配置一般的电脑尤其是内存小的电脑，会频繁出现假死的情况。

于是，只能想办法减少字体的体积。

通过万能的Gemini，终于有了解决办法：字体子集化。

说白了，就是从原字体中提取一部分字符，只要能覆盖自己常用的字符就行了。

方案：

1. 用集成工具做子集化。这是最常用的方式，工具例如，Fontmin（https://ecomfe.github.io/fontmin/）。

这种方式就是要准备“字体白名单”，也就是你要把那些你需要的字符一一列出来，让它把你需要的字符从庞大字库中“抠”出来。

可以到GitHub上下载常用中文字符3500字等整理好的字符集，导入Fontmin中。也可以自己整理用到的文字再加进去。

2.用 Python 做字体子集化。

#安装fonttools库
pip install fonttools brotli

#命令执行子集化
pyftsubset original.ttf --text-file=chars.txt --output-file=sub.woff2 --flavor=woff2
'''
其中
original.ttf：原始字体，如思源宋体
--text-file：字符白名单文件
--output-file输出字体
'''

#不指定字符白名单，只按照某个标准来子集化（如变成GB2312标准字符集）
pyftsubset NotoSerifSC-Medium.ttf --unicodes="U+0020-007E,U+00A0-00FF,U+2000-206F,U+3000-303F,U+4E00-9FA5" --output-file=label_gb2312.ttf --layout-features='*'

#安装fonttools库
pip install fonttools brotli

#命令执行子集化
pyftsubset original.ttf --text-file=chars.txt --output-file=sub.woff2 --flavor=woff2
'''
其中
original.ttf：原始字体，如思源宋体
--text-file：字符白名单文件
--output-file输出字体
'''

#不指定字符白名单，只按照某个标准来子集化（如变成GB2312标准字符集）
pyftsubset NotoSerifSC-Medium.ttf --unicodes="U+0020-007E,U+00A0-00FF,U+2000-206F,U+3000-303F,U+4E00-9FA5" --output-file=label_gb2312.ttf --layout-features='*'

3.在线动态字体子集化

① Node.js 生态方案：Fontmin，基于 fonteditor-core，支持 TTF、EOT、WOFF、WOFF2 之间的转换。它支持插件机制，可以方便地动态剪裁。示例代码：

const Fontmin = require('fontmin');

const fontmin = new Fontmin()
    .src('fonts/SourceHanSansCN-Regular.ttf') // 原始 15MB 字体
    .use(Fontmin.glyph({
        text: '张三的PDF发票金额: ￥100.00' // 前端传过来的动态文本
    }))
    .use(Fontmin.ttf2woff2()) // 转换为更小的 woff2 格式
    .dest('dist/fonts');

fontmin.run((err, files) => {
    // 这里的 files[0].contents 就是剪裁后只有几 KB 的字体二进制流
});

const Fontmin = require('fontmin');

const fontmin = new Fontmin()
    .src('fonts/SourceHanSansCN-Regular.ttf') // 原始 15MB 字体
    .use(Fontmin.glyph({
        text: '张三的PDF发票金额: ￥100.00' // 前端传过来的动态文本
    }))
    .use(Fontmin.ttf2woff2()) // 转换为更小的 woff2 格式
    .dest('dist/fonts');

fontmin.run((err, files) => {
    // 这里的 files[0].contents 就是剪裁后只有几 KB 的字体二进制流
});